Gruntle Enterprise

We needed a mechanism to easily place, at a moment's notice, special announcements on the campus home page.  For example, with the recent snow storms hitting the great lakes region, we wanted to assure students that classes were not canceled.  Of course, we did not want visitors to see the dialog box every time they hit the home page, so setting a cookie was in order as well.

JQuery and the accompanying UI collection make this quite simple to accomplish.  The requisite JavaScript libraries are:

jquery-1.3.2.min.js
jquery.cookie.js
ui.core.js
ui.resizable.js
ui.droppable.js
ui.dialog.js

You will also need to customize the dialog with your own styles, which you can easily generate using the JQuery Theme Roller.

Let's start with the HTML you will need.  All you need is a div container with a DOM id and whatever content you want to display within it.  For example:

<div id="announcement_popup" title="Special Announcement">
    <h3>Classes are not canceled today.</h3>
</div>

The title of the div container will appear as the title of your dialog box.  Everything else will appear in the content area.  Now for the JavaScript:

$(function() {
    $("#announcement_popup").dialog({
        bgiframe: true,
        modal:true,
        resizable:false,
        autoOpen:false,
        height:265,
        width:400,
        close: function() {
            $.cookie("announcement", "closed", { expires: 1 });
        },
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
    if ($.cookie("announcement") == "closed"){ 
        $("#announcement_popup").dialog("destroy"); 
    }else{ 
        $("#announcement_popup").dialog("open"); 
    } 
});

Basically, we initialize our dialog by associating it with the DOM ID of our div container, set the height, width, and a few other options, the bulk of which can be found on JQuery's site.  Most importantly, we set autoOpen to "false".  That way, we can control when the dialog appears and when it does not via the cookie.

As we want the dialog to remain closed after the first visit, we use a simple function within the close method to set a cookie that will expire in 24 hours. We do the same within the button method.  Lastly, we set up simple logic to determine if the dialog should be displayed or not and deal with the cookie accordingly.

0 Comments, 0 trackbacks (Trackback URL)