PopupDetails

docs

The PopupDetail class combines StickyWin with String.substitute together into functionality that lets you hover some details next to something on the page.

Note that by default, the strings in your html template are surrounded by percent (%) signs. You can change this with the regExp option.

A quick example:

<div class="infoboxstyle"> <div class="dis"> <h3 class="curv"> <div class="popupDetails"> <h2>%name%</h2> <img src="%thumbnail%" width="88" height="140" align="left"> <div style="float: left; width: 175px;"> <p><b>Directed By:</b> %director%</p> <p><b>Written By:</b> %writer%</p> <p><b>Starring:</b> %starring%</p> <p><b>Run time:</b> %duration%</p> </div> </div> </h3> <div class="innerC"></div> </div> </div>

new PopupDetail($('popupDetailHTML').get('value'), $('raidersThumb'), {
  data: {
    thumbnail: '/wiki/_media/cnet-libraries/jones1.jpg',
    name: 'Raiders of the Lost Ark',
    director: 'Steven Spielberg',
    writer: 'George Lucas & Philip Kaufman',
    starring: 'Harrison Ford & Karen Allen',
    duration: '115 min'
  },
  stickyWinOptions: {
    position: 'upperRight',
    offset: {
      x: 10,
      y: -50
    }
  }
});

After you execute the code, mouse over the thumbnail of the movie poster above. Again, what it looks like is up to you.

Using the same example above, here's the same thing except using ajax to get the data. Here's our json file. So the PopupDetail instance would look like this:

new PopupDetail($('popupDetailHTML').get('value'), $('raidersThumbAjax'), {
  useAjax: true,
  ajaxLink: '/wiki/_media/cnet-libraries/raiders.json',
  ajaxOptions: {method: 'get'},
  stickyWinOptions: {
    position: 'upperRight',
    offset: {
      x: 10,
      y: -50
    }
  }
});

Watch your console and you'll see the ajax fire to get the json.

PopupDetail has several other options, so be sure to dig into the docs.

The default behavior for PopupDetail objects requires a template and a json object either pre-defined or returned via ajax. You can, however, use html in your response for Ajax requests and return the entire popup body instead of data in JSON/javascript object format.

Here's a super simple example to illustrate the concept.

new PopupDetail("the html argument is ignored", $('PopupDetailAjaxHTMLExample'), {
  useAjax: true,
  ajaxLink: '/wiki/stickyWinAjaxExample.html',
  htmlResponse: true
});

You can also use this functionality with the PopupDetailCollection class below.

The PopupDetailCollection class manages creating a bunch of PopupDetail instances on a page. Imagine a search results page or something similar where you have a list of objects and you want to show details for each one (when the user clicks or mouses over each result). PopupDetailCollection lets you configure things in a group.

var indianaJones = [
 {  name: 'Raiders of the Lost Ark',
    thumbnail: '/wiki/_media/cnet-libraries/jones1.jpg',
    director: 'Steven Spielberg',
    writer: 'George Lucas & Philip Kaufman',
    starring: 'Harrison Ford & Karen Allen',
    duration: '115 min'
  },
 {  name: 'Temple of Doom',
    thumbnail: '/wiki/_media/cnet-libraries/doom.jpg',
    director: 'Steven Spielberg',
    writer: 'George Lucas & Willard Huyck',
    starring: 'Harrison Ford & Kate Capshaw',
    duration: '118 min'
  },
 {  name: 'The Last Crusade',
    thumbnail: '/wiki/_media/cnet-libraries/crusade.jpg',
    director: 'Steven Spielberg',
    writer: 'George Lucas & Philip Kaufman',
    starring: 'Harrison Ford & Sean Connery',
    duration: '127 min'
  }
];
new PopupDetailCollection($$('#popupDetailCollectionThumbs img'), {
  details: indianaJones,
  template: $('popupDetailHTML').get('value'),
  popupDetailOptions: {
   stickyWinOptions: {
     position: 'upperRight',
     offset: {
       x: 0,
       y: -50
     }
   }
  }
});

We can make a collection that gets its data from ajax if we want:

new PopupDetailCollection($$('#popupDetailCollectionAjaxThumbs img'), {
  ajaxLinks:[
    '/wiki/_media/cnet-libraries/raiders.json',
    '/wiki/_media/cnet-libraries/doom.json',
    '/wiki/_media/cnet-libraries/crusade.json'
  ],
  template: $('popupDetailHTML').get('value'),
  popupDetailOptions: {
    useAjax: true,
    stickyWinOptions: {
      position: 'upperRight',
      offset: {
        x: 0,
        y: -50
      }
    }
  }
});

Note that the PopupDetail won't go away if you move your mouse over it. When you mouse over the icon the popup appears and if you move your mouse over the popup it hangs around until you mouse out of the popup. This means that the popup can have interactive elements.