SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tooltip layer positioning issue

    Hi all,

    I'm using a great jquery script called Coda Bubbles to display tooltips on a clients website. I've used this script before, and it uses JS and CSS to position a div with extra information over an image. Never had any trouble using this until now.

    Because I only have one image this time with several links attached to it using a html image map, the script is acting funny. In stead of a hovering div above the href-area, Firefox shows the info somewhere in the lower left part of the image and Internet Explorer shows it somewhere in the lower right corner, cutting of a great part of the div.

    How can I make sure the pop up div is shown right above the mouse cursor, or at least in the lower left corner like in FF?

    This is the JS:

    Code JavaScript:
    <script language="JavaScript" type="text/javascript">
    // tooltips
    $(function () {
      $('.bubbleInfo').each(function () {
        // options
        var distance = 10;
        var time = 250;
        var hideDelay = 0;
     
        var hideDelayTimer = null;
     
        // tracker
        var beingShown = false;
        var shown = false;
     
        var trigger = $('.trigger', this);
        var popup = $('.popup', this).css('opacity', 0);
     
        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function () {
          // stops the hide event if we move from the trigger to the popup element
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
     
          // don't trigger the animation again if we're being shown, or already visible
          if (beingShown || shown) {
            return;
          } else {
            beingShown = true;
     
            // reset position of popup box
            popup.css({
              top: -100,
              left: -2,
              display: 'block' // brings the popup back in to view
            })
     
            // (we're using chaining on the popup) now animate it's opacity and position
            .animate({
              top: '-=' + distance + 'px',
              opacity: 1
            }, time, 'swing', function() {
              // once the animation is complete, set the tracker variables
              beingShown = false;
              shown = true;
            });
          }
        }).mouseout(function () {
          // reset the timer if we get fired again - avoids double animations
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
     
          // store the timer so that it can be cleared in the mouseover if required
          hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            popup.animate({
              top: '-=' + distance + 'px',
              opacity: 0
            }, time, 'swing', function () {
              // once the animate is complete, set the tracker variables
              shown = false;
              // hide the popup entirely after the effect (opacity alone doesn't do the job)
              popup.css('display', 'none');
            });
          }, hideDelay);
        });
      });
    });
    </script>

    This is the HTML:

    Code HTML4Strict:
    <div id="contactmap">
    <img src="http://fileserv.twizted.be/reynders/gui/contactmap.gif" width="800" height="455" border="0" usemap="#contactmap" />
    <map name="contactmap" id="contactmap">
     
    <div class="bubbleInfo"><area shape="poly" coords="115,243,122,241,125,247,124,252,111,244" href="contact/belgium" alt="Belgie" class="trigger" />
    <div class="popup"><strong>Belgi&euml;</strong><br />Reynders Label Printing<br />Reynders Pharmaceutical<br />Reynders Security & Specialty</div>
    </div>
     
    <div class="bubbleInfo"><area shape="poly" coords="87,259,95,263,100,272,99,279,98,284,106,288,115,289,119,284,125,285,130,281,128,269,123,268,132,256,125,252,110,245,103,254,97,251,96,256,87,258" href="contact/france" alt="France" class="trigger" />
    <div class="popup"><strong>France</strong><br />Reynders Etiquettes<br />Reynders Cosmetiques<br /></div>
    </div>
     
    <div class="bubbleInfo"><area shape="poly" coords="154,227,157,243,164,248,169,252,183,255,189,245,186,236,187,225,170,224,169,220,154,227" href="contact/poland" alt="Polska" class="trigger" />
    <div class="popup"><strong>Polska</strong><br />Reynders Label Printing</div>
    </div>
     
    <div class="bubbleInfo"><area shape="poly" coords="367,322,367,330,373,333,370,339,358,353,354,351,351,355,356,365,347,369,354,380,362,374,362,392,379,426,388,416,391,398,412,382,415,376,422,376,416,357,389,347,392,341,383,334,390,321,384,318,376,324,367,322" href="contact/india" alt="India" class="trigger" />
    <div class="popup"><strong>India</strong><br />Reynders Label Printing</div>
    </div>
     
    </map>
    </div>

    This is the CSS:

    Code CSS:
    /* contact */
    div#contactmap{
    overflow: hidden;
    width: 900px;
    margin: 0 auto;
    }
     
    /* tooltips */
    .bubbleInfo {
    position: relative;
    display: inline;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 2px;
    }
     
    .popup {
    position: absolute;
    display: none;
    width: 175px;
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    padding: 8px;
    font-size: 10px;
    }

    Any help to fix this would be greatly appreciated.

    Greets,
    Stef
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could this have anything to do with the image map? Or does the answer lie in this piece of JS which alters the position of the pop up div (but not the same in each browser):

    Code JavaScript:
    [COLOR=#FF5555][I]// reset position of popup box[/I][/COLOR]
            popup.[COLOR=#006600]css[/COLOR][COLOR=#66CC66]([/COLOR][COLOR=#66CC66]{[/COLOR]
              top: [COLOR=#CC0000]-100[/COLOR],
              left: [COLOR=#CC0000]-2[/COLOR],
              display: [COLOR=#3366CC]'block'[/COLOR] [COLOR=#FF5555][I]// brings the popup back in to view[/I][/COLOR]
            [COLOR=#66CC66]}[/COLOR][COLOR=#66CC66])[/COLOR]
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


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
  •