SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to do this within Prototype/Scriptaculous framework (or similar)?

    I have a client who wants a popup graphic on hover -- when a customer rolls over a product graphic they want the supersized image to appear.

    See example below:
    http://www.cbslimited.com/prom-dresses/prom_faviana

    Has anyone done this using a framework like prototype or scriptaculous? I'd rather not code it from scratch.

    Any recommendations?

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, cool website for fancy dresses
    There is in fact the ever popular Lightbox which was developed using Proto/Scriptac. But this can simply be done with any framework since you're going the framework route
    Your core ingredients really only need to include a getXY function, a setXY, and a little dandy work of creating an element.

    Consider the logic behind it.
    Code:
    function get(el) {
      return document.getElementById(el);
    }
    function getXY(el) {
      // ...
      return [x,  y];
    }
    function setXY(el) {
      // set's xy of element
    }
    
    
    var example = get('example');
    var previewEl = get('preview');
    
    
    // use Prototype's Event.observe, YUI's addListener, or jQuery's 'hover'
    
    addListener(example, 'mouseover', function() {
      var xy = getXY(this);
      // find the right x coordinate to set
      var xToSet = xy[0] + this.offsetWidth;
      // then set the preview
      setXY(previewEl, [x, xy[1]]);
    
      // show it
      previewEl.style.display = 'block';
    });
    addListener(example, 'mouseout', function() {
      // hide it
      previewEl.style.display = 'none';
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •