I build websites

Michael A. Sypes Web Development

Contact Form   |   602·715·3647   |   2005 E. Avenida del Sol Phoenix, AZ 85024

Pop-Ups

Language(s): 

Probably the most obvious bit of flashiness on the site, these are the regions that,
if you hover your mouse over them, they make a little pop-upbox appear. Isn't that cute!

Code Snippet: 
 $(function(){
    var 
timer;
    
    $(
'[class^="pop-trigger-"]').each(
        function(){
            $(
this).addClass('pop-trigger');//add additional styling to the triggers
            // identify the pop-ups
            
var pop = $(this).attr('class').match(/pop-trigger-\S+\b/)[0].replace('pop-trigger-','');
            $(
'#'+pop).fadeOut(0);// hide them
            
$(this).hover(function(event){
                
//hide any pop-ups already shown
                
$('.pop-up').fadeOut(300);
                if (
timer){
                    
clearTimeout(timer);
                    
timer null;
                }
                
// Place the pop-up
                
var windowDimension getWindowDimensions();
                var 
x_coord event.pageX 40;
                var 
y_coord event.pageY - $(window).scrollTop() - 20;
                if (
x_coord 10){x_coord=10;}
                if (
x_coord windowDimension['height']-50){x_coord=windowDimension['height']-50;}
                if (
y_coord windowDimension['width']-100){y_coord 50;}
                $(
'#'+pop).addClass('pop-up').css('top',y_coord).css('left',x_coord).fadeIn(0);
            },
            function(){
                
hideMe($('#'+pop));
            });
    });

    
// allow pop-ups to maintain their displayed states
    
$(document).on('mouseenter mouseleave','.pop-up',
        function(
event){
            if(
event.type=='mouseenter'){            
                if (
timer){clearTimeout(timer);}
            }
            else{
hideMe($(this),500);}
        }
    );
    
    
// fxn called with delay to hide pop-ups
    
function hideMe(me,waitTime) {
        
waitTime = (typeof waitTime !== 'undefined') ? waitTime:2000;
        
timer setTimeout(function(){me.fadeOut(300);},waitTime);
    }
    
    function 
getWindowDimensions(){
        var 
winW 630winH 460;
        if (
document.body && document.body.offsetWidth) {
            
winW document.body.offsetWidth;
            
winH document.body.offsetHeight;
        }
        if (
document.compatMode=='CSS1Compat' && 
            
document.documentElement && 
            
document.documentElement.offsetWidth ) {
                
winW document.documentElement.offsetWidth;
                 
winH document.documentElement.offsetHeight;
        }
        if (
window.innerWidth && window.innerHeight) {
            
winW window.innerWidth;
            
winH window.innerHeight;
        }
        return {
"width":winW,"height":winH};
    }
}); 

Here's how it's done:

The regions triggering the hover event have a particular class to identify them as triggers, in my particular case, I used the term "pop-trigger-id of the pop-up".

The regions that pop up must have unique id's matching whichever trigger they're using.

Other classes and styles can be present in the CSS specifications; all the "pop-trigger-id does is identify everything for the effect, which is effected by the jQuery script below

So what's going on?

  1. On load, the pop-trigger regions are identified, and along with them their corresponding pop-ups.
  2. The triggers get additional styling so they'll be visually identifiable as interesting/interactive.
  3. The pop-ups get hidden from view.

The main function is basically just a jQuery.hover() implementation:
Pop-up items are toggled between having the "pop-up" style or being hidden in response to hover events on their associated triggers.

Other features are

  • the setTimeout-associated code which
    1. keeps the pop-ups visible for a bit (2000 ms) when the mouse is not over the the trigger, so they can be moused over themselves,
    2. Makes sure they stay visible as long as the mouse is either over their triggers or themselves,
    3. makes them disappear immediately if the mouse hovers over another trigger.
  • the code getting info on the window dimensions, so I can nicely place the pop-up, with it going off screen are being somewhere ugly. (I copied/pasted the code from someplace on the web for that.)

Now, the motives behind the madness: I did play around with a freely-available jQuery pop-up function, ToolTip (now part of jQueryUI), but didn't like some things about it: It's not unobtrusive / doesn't degrade gracefully. That was a big issue for me. I started as a hobbiest in an an academic environment, and section 508 compliance was considered a big deal. For those who don't understand, try turning off javascript and explore my site. All the pop-up regions & their triggers will display perfectly normally, without any particularly fancy styling, as though they were just a regular part of the pages' content, which is how it should be. Only if javascript is functioning will they be hidden in the first place, and be given all the fancy styling that's associated with the interactive behavior. ToolTip was more flash than I needed. Don't get me wrong. I've used it elsewhere, and it's very good. I just didn't have any need for its extra/fancy features. ToolTip requires that the trigger and pop-up not just be siblings, but be adjacent. You can't even have a
tag between the spans. For some unexplained reason, Tooltip was acting squirrely on my original site. The pop-ups weren't appearing where expected, sometimes actually off-screen.