Handy jQuery Overlay Info Panel

When developing websites I often find myself having to print out the SESSION, POST and GET objects as well as the WordPress objects. Here's a handy tip for doing just that in a nice unobtrusive way.

Ok this is gonna be a short and easy one. What I’m going to show you is how to set up a simply jQuery overlay panel that can show you any info you want without disturbing the elements in the page you’re working on. As usual I’m assuming that you’re comfortable with PHP HTML CSS and jQuery.

Step 1. Setting Up

What I’m going to do is set up the example jQuery tools simple overlay shown here. First though you need to download the jQuery and jQuery tools library from here and attach it into the head of the pages you’re working on. Also, there are a couple of images I’m going to use in this which you can download here and here.

Step 2. The HTML

Copy this code into your page, right below the open body tag.

<a id="info_button" rel="#info_display"><img src="images/info-button.png" alt="info"/></a>

<div id="info_display">
     <pre>
         <?php print_r($_SESSION); ?>
     </pre>
</div>

This is a link that opens the overlay and the div thats going to pop up. Make sure the image src is pointing to the info button image you downloaded in step 1. You can see I’m printing the session variable out in the info_display div. You can add as many as you like.

Step 3. The CSS

Copy the following into your style sheet:

/*----OVERLAY----*/
#info_button{
    position:fixed;
    z-index:9999;
    top:0;
    right:20px;
}
/* the overlayed element */
.simple_overlay {
    /* must be initially hidden */
    display:none;
    /* place overlay on top of other elements */
    z-index:10000;
    /* styling */
    background-color:#ccc; 

    width:675px;     
    min-height:200px;
    border:1px solid #666;
    padding:10px;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;     
} 

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(images/info-close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:30px;
    width:30px;
}

This sets the info_display div to hidden and makes the a tag fixed and positions it on the top right of the browser window. The rest of the style is used by the overlay. Make sure the url for the close button is pointing to the image you downloaded in step 1. Also, remember to set pre{overflow:auto;} so that it’ll add a horizontal scroll bar if the there’s some particularly wide stuff in your session

Step 4. The JavaScript

Copy the following into the head of your page:

$(document).ready(function(){
     $("a[rel]").overlay();
});

This single line of code is all thats needed to activate the overlay. I love the simplicity of jQuery tools

And BAM! You now have a nice way of displaying any info you need without interfering with your beautiful layout. Remember you can add anything you like into the overlay now. I find it particularly useful for printing out the various template tags and functions when working with WordPress.

Tags: JQuery/jQuery Tools/Overlay/Wordpress
Posted in Blog by Abban |