Here’s a little utility I’m releasing for you sportsfans out there. After much wailing and gnashing of teeth, it would appear to be leak free. So what is it?

UPDATE This is now released for Mootools 1.0.

popupdetails.js makes a little DHTML layover when the user clicks or mouses over an element, generally to provide more detailed information for that item. It makes use of moo.fx to fade in and out (slick!) and it uses an iframe shim to obscure select elements and the like so they don’t poke through.

Required source files (in this order!):
http://i.d.com.com/html/js/dl/prototype.lite.events.js
- (or any other version of prototype) - 6K
http://i.d.com.com/html/js/dl/moo.fx.js - 3K
http://i.d.com.com/html/js/dl/moo.dom.js - 4K
http://i.d.com.com/html/js/dl/popupdetails.js - 9.5K

Usage:
To instantiate this class you must set up the page a bit. First, a template:

Create a div in your source and style it as display: none; so it’s not visible - give that div a unique id. Inside this div put the html that you’d like to pop up. You can mark this up with css like you normally would, but don’t position it anywhere.

Throughout the template, where you want something substituted (the product name, the url, etc.) just insert %url% or %name%. My code will swap these out for you. You can create as many of these per entry as you like.

Next up you need to create an array of all the items on the page. Each item corresponds with the links or elements you are observing. So if there are 8 links on the page that you want to have popups using this template, you’ll need 8 records in the data object.

Each entry in the data object should have name/value pairs that correspond to the %key% entries in your template. Thus:

<div id="template" style="display: none">
  <div id="popup_%index%" class="popupDiv">
    <a href="%url%">%name%</a>
  </div>
</div>

<script>
  var popupDetails = [];
  var detail = {
    url: "http://.....",
    name: "item number 1",
    index: 0
  };
  popupDetails.push(detail);
  ...repeat
</script>

Now you have a template and a collection of objects for popups (one for each object you are observing). Lastly, you need to collect the things to observe. The easy way is to give them all a class name. Let’s say you’re observing some links, and you can collect them all with a single css descriptor:

  var myLinks = $S('a.popupLinks');
  // $S() is a moo.dom shortcut to capture all the
  // elements that match this selector

Finally, you instantiate my code:

var popups = null;
Event.observe(window,"load", function() {
 popups = new popDetailsList({
 details: popupDetails,  //the array of detail info
 observers: myLinks, //the things to observe
 links: myLinks,
    //you can make the whole popup clickable
    //if you give it links
 observeCorner: "upperRight",
     //make the popup relative to which corner of
     //the observed object?
 observerAction: "mouseover",
     //you can have the user mouseover or click to
     //show the popup
 listName: "popups",
     //the namespace of this instance of the
     //popupDetailsList object
 template: "template",
     //the id of the template; you can also pass in
     //a string as the template
 offsety: -20,
     //move it up or down relative to the observed
     //link corner specified above
 offsetx: 30,
     //move it left or right
 effectDurationOn: 250,
     //how long the fade takes to fade in
 effectDurationOff: 150, //... to fade out
 effectDelayOn: 500,
    //how long to wait after the user interacts before
    //the popup shows
 effectDelayOff: 1000,
    //how long after they deactivate the popup before it fades
 iframeShimSelector: "div.popupDiv"
    //the element in your template that should define
    //the borders of the iframe shim
});

And you’re done.

Here it is in action (mouse over the product links). Here it is showing a little popup help (click the “what’s this” link).

This entry was posted on Monday, June 26th, 2006 at 3:30 pm and is filed under Code Snippets, Examples, Visual Effects. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.