Member Avatar for bufospro

Hi,
I am trying to learn about JQUERY. So , I found some examples and I am trying to apply to my pages.
But something goes wrong.

Could you help me please ?

For example
1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    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: -33,
          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>
</head>

<body>

<div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
       Test
  </div>
</div>

</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none; /* keeps the popup hidden if no JS available */
}

Also I have jquery.js from http://code.jquery.com/jquery-1.4.1.js

  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by bufospro
Member Avatar for pritaeas

What goes wrong ? Do you get an error ?

Member Avatar for bufospro

What goes wrong ? Do you get an error ?

Neither Test nor popup window appeared

Edited by bufospro because: n/a
Member Avatar for pritaeas

If I try this on jsBin then on hover of the image, Test appears (Opera, jQuery 1.4.2, both without the css and with inline css).

Edited by pritaeas because: n/a
Member Avatar for bufospro

If I try this on jsBin then on hover of the image, Test appears (Opera, jQuery 1.4.2, both without the css and with inline css).

Maybe the problem is the version of my Mozilla because it is beta :(

Thanks a lot

Edited by bufospro because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.