Are we there yet? http://www.rogerpence.com Application development lessons learned (and some not!) Thu, 28 Apr 2011 13:16:58 +0000 en hourly 1 http://wordpress.org/?v=3.3 A generic jQuery message panel http://www.rogerpence.com/a-generic-jquery-message-panel/ http://www.rogerpence.com/a-generic-jquery-message-panel/#comments Mon, 25 Apr 2011 03:43:00 +0000 admin http://www.rogerpence.com/?p=126 rpMessagePanel is a generic message panel that shows at the top of a Web page. Use the demo link below to take a look at the panel and its options.

Demo Code on Github Download zip

The rpMessagePanel is displayed with its display([options]) method. This method takes one argument; a JavaScript object with any or all of the following values.The default values are shown in bold text.

Option Values Description
panelMode modal Display the message panel modally over a gray-out parent page. All input on the parent page is inhibited while the message panel is displayed modally.
nonmodal Display the message panel nonmodally over its parent page. The parent page still accepts input while the message panel is displayed nonmodally..
panelType error Display a red message panel with an “X” icon.
info Display a yellow message panel with a “!” icon.
displayMode overlap Display the the message panel overlapping its parent page.
pushdown Display the message panel while pushing down the content on the parent page.
slideDuration “fast” or “slow” or an integer value Set the speed at which the message panel is displayed. This is a millisecond duration for jQuery’s slideDown() method. This value is passed on to jQuery’s slideDown() method.The special values “fast” and “slow” can also be used.

For example, to display the rpMessagePanel as a nonmodal info pushdown panel panel slowly, call display() like this:

001rp.messagePanel.display( { "panelMode" : "nonmodal",
002                           "panelType" : "info",
003                           "slideDuration" : "slow",
004                           "displayMode" : "pushdown" } )

The rpMessagePanel provides two other public methods, create([panelTitle]) and addMessage([messageTitle], [messageText]). You must call create() once before displaying the panel; you can call addMessage() as many times as necessary to show as many message lines as you need. addMessage()’s messageText argument isn’t encoded so it can include HTML. To omit the first argument to addMessage(), use null as its value. For example, the code below:

001rp.messagePanel.create( "This is an example error message." );
002rp.messagePanel.addMessage( "Error message", "Something really bad happened." );
003rp.messagePanel.addMessage( "Error level"  , "1" );
004rp.messagePanel.addMessage( "Instructions" , "Call your manager!" );
005rp.messagePanel.addMessage( null, </span>
006      <a target='_blank' href='yourUrl'>Comment on this error</a>" );
007
008rp.messagePanel.display();

displays a message panel like this:

rpmessagePanel

In the example above, the options object wasn’t passed to the display() method, so the message panel is displayed using the default values.

rpMessagePanel uses the jQuery tmpl plugin to build the HTML for the message panel.There isn’t a need to add any templating code to your Web page, rpMessagePanel uses its private injectTemplateIntoPage() method to push the required HTML into your page for you.You do need to include the jQuery tmpl JavaScript into your page.

Source listing

Figure 1a. rpMessagePanel.js sourceCopy
001var rp = rp || {};
002    
003rp.messagePanel = function() {
004    var panelDefinition;
005    var $messagePanel;
006    
007    var template = [];
008    template.push( '<script id="messagePanelTemplate" type="text/x-jQuery-tmpl">' );
009    template.push( '<div id="messagePanel" class="error" style="display:none">' );
010    template.push( '<div id="messagePanelIcon" title="Close this panel."></div>' );    
011    template.push( '<div id="headingText"><span class="heading">${error}</span></div>' );
012    template.push( '<div id="messageDetails">' );
013    template.push( '<div id="innerDetails">' );
014    template.push( '{{each errors}}' );
015    template.push( '{{if title}}' );
016    template.push( '<div>${title}: <strong>{{html message}}</strong></div>' );
017    template.push( '{{else}}' );
018    template.push( '<div><strong>{{html message}}</strong></div>' );
019    template.push( '{{/if}}' );
020    template.push( '{{/each}}' );
021    template.push( '</div>' );    
022    template.push( '</div>' );
023    template.push( '<div title="Close this panel." class="closeBox" id="closeBox" >x</div>' );
024    template.push( '</div>' );
025    template.push( '</script>' );    
026
027    function create( topLevelMessage ) {
028        panelDefinition = { "error" : topLevelMessage, "errors" : [] };
029    }
030
031    function addMessage( title, message ) {
032        panelDefinition.errors.push( { "title" : title, "message" : message  } );
033    }
034
035    function removePanel() {
036        // If displayed nonmodally, the cached value 
037        // $messagePanel may not yet be available.
038        $( "#messagePanel" ).remove();
039    }
040
041    function hidePanel( options ) {
042        $("#shadow").hide();
043        if ( $messagePanel.is( ":visible" ) ) { 
044            $messagePanel.slideUp( options.slideTime );    
045        }     
046        removePanel();
047    }
048    
049    function injectTemplateIntoPage() {
050        if ( $( "#messagePanelTemplate" ).length === 0 ) {
051            $( "body" ).append( template.join( "" ) );        
052        }
053    }
054    
055    function expandTemplate() {
056        var templateId = $( "#messagePanelTemplate" );
057        templateId.tmpl( panelDefinition ).prependTo( "body" ); 
058        $messagePanel = $( "#messagePanel" );
059    }
060
061    function prepareModalShadow() {
062        if ( $( "#shadow" ).length === 0 ) {
063            $( "body" ).append( "<div id='shadow'></div>" );
064        }     
065        $("#shadow").css( "height", $( document ).height() ).hide();
066    }
067
068    function preparePanel( options ) {
069        removePanel();
070        injectTemplateIntoPage();
071        expandTemplate();
072
073        var modal = options.panelMode === "modal";
074        if ( modal ) {
075            prepareModalShadow();
076        }
077        
078        if ( options.slideDuration !== "fast" && options.slideDuration !== "slow" ) {
079            options.slideDuration = options.slideDuration.toInt();
080        }
081        
082        if ( options.panelType === "error" ) {
083            $messagePanel.removeClass( "warning" ).addClass( "error" );        
084        }
085        else {
086            $messagePanel.removeClass( "error" ).addClass( "warning" );        
087        }
088
089        if ( options.displayMode === "overlap" ) {        
090            $messagePanel.css( "position", "absolute" );
091        }
092        
093        if ( modal ) {
094            $("#shadow").show();
095        }    
096
097        $( ".closeBox, #messagePanelIcon", $messagePanel ).click( function() {
098            hidePanel( options );
099        });
100    }
101                 
102    function display( runtimeOptions ) {
103        runtimeOptions = runtimeOptions || {};
104        var defaultOptions = { "panelMode" : "modal",
105                               "panelType" : "error",
106                               "slideDuration" : 500,
107                               "displayMode" : "overlap" }
108
109        var options = $.extend( {}, defaultOptions, runtimeOptions );
110        
111        preparePanel( options );
112        
113        //alert( options.slideDuration );
114
115        $messagePanel.slideDown( options.slideDuration );
116    }
117
118    return {
119        create : create, 
120        addMessage : addMessage,
121        display : display
122    };
123}();
124
125Function.prototype.method = function ( name, func ) {
126    this.prototype[ name ] = func;
127    return this;
128};
129
130Number.method( "toInt", function () {
131    return Math[this < 0 ? 'ceil' : 'floor'](this);
132});
133
134String.method( "toInt", function() {    
135    return parseInt( this, 10 );
136});

Figure 1b. rpMessagePanel.css sourceCopy
001#shadow { 
002    background-color: gray;
003    position:absolute; 
004    left:0; 
005    top:0; 
006    width:100%; 
007    z-index:100; 
008    filter:alpha(opacity=65); 
009    -moz-opacity:0.65;
010    -khtml-opacity: 0.65;
011    opacity: 0.65; 
012    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65, FinishOpacity=65, Style=2)";    
013} 
014
015#messagePanel span.heading 
016{
017    font-size: 1.2em;
018}
019
020#messagePanel #innerDetails {
021    font-size: 1em;
022}
023
024#messagePanel #headingText {
025    float: left;
026    display: block;
027    height: 35px;
028    padding-top: 8px;
029}
030
031#messagePanel #icon {
032    float: left;
033    cursor: pointer;    
034}
035
036#messagePanel #messageDetails {
037    clear: both;
038    padding-right: 6px;
039    padding-left: 6px;
040    padding-bottom: 6px;
041}
042
043#messagePanel #innerDetails {
044    padding: 6px;
045    border: 2px silver dotted;
046    background: whitesmoke;
047    -webkit-border-radius: 6px;
048    -moz-border-radius: 6px;
049    border-radius: 6px;    
050}
051
052#messagePanel #innerDetails div
053{
054    margin-top: 5px;
055}
056
057#messagePanel {
058    z-index: 5000;
059    color: #333333;
060    position: relative;
061    top: 0;
062    font-family: Arial, Helvetica, sans-serif;
063    padding-top: 4px;
064    background-position: 6px 6px;
065    background-repeat: no-repeat;
066    left: 0;
067    width: 100%;
068}    
069
070#messagePanel.error {
071    background-color: #FFCCCC;
072    border-color: #FF99CC;
073    background-image: url( "../Images/error.png" );
074}
075
076#messagePanel.warning {
077    background-color: #ffc;
078    border-color: #ffcc00;
079    background-image: url( "../Images/warning.png" );
080}
081
082#messagePanel #messagePanelIcon {
083    width: 37px;
084    height: 37px;
085    float: left;
086    cursor: pointer;
087}
088
089#messagePanel span.heading 
090{
091    margin-left: 10px;
092}
093
094#messagePanel span 
095{
096    margin-left: 8px;
097}
098
099#messagePanel #closeBox
100{
101    position: absolute;
102    top: 0;
103    right: 0;
104    border: 2px solid #FF99CC;
105    font-family: Consolas;
106    font-size: 1.2em;
107    font-weight: 800;
108    padding: 0 8px 4px 8px;
109    background-color: red;
110    color: white;
111    cursor: pointer;
112    margin-top: 3px;
113    margin-right: 3px;
114}

]]> http://www.rogerpence.com/a-generic-jquery-message-panel/feed/ 0 Hello, iPage host! http://www.rogerpence.com/hello-ipage-host/ http://www.rogerpence.com/hello-ipage-host/#comments Fri, 01 Apr 2011 05:14:26 +0000 rp http://www.rogerpence.com/?p=5 I just moved my blog from MochaHost to iPage. I am sooooooo glad to be off of MochaHost! MochaHost’s tech support is less responsive than a latex sex doll. My MochaHost issues were also probably made worse because I made the mistake of buying a Windows hosting package (using IIS) to use for posting both some example .NET apps and hosting my WordPress blog. The iPage blog uses Apache and already I’m very glad I made that choice. I know IIS can be tweaked to do things like semantic URLs, but MochaHost’s configuration fought me every step of the way.

I’m looking forward to digging in on this blog. Please check back.

]]> http://www.rogerpence.com/hello-ipage-host/feed/ 2