jQuery Forum

Hello,

I have a problem on my tooltip plugin: http://jsfiddle.net/mdmoura/RPUX6/

When I move the mouse faster between elements (1 and 2) the tooltip does not show.

I think this happens because I have a delay on element mouse leave:

1.   $this.mouseleave(function (e) {
2.     tooltip.timer = setTimeout(function () {
3.       $("." + options.class).detach();
4.     }, !options.mouse || options.static ? options.delay || 0 : 0);
5.   }), // Mouse leave 

I have it to allow the mouse to move over the tooltip for when there is a link in it.

The idea would be to cancel the hide delay when the mouse goes over another element.

Thank You,
Miguel

Hello,

On a plugin I have the following:

1. var defaults = {         
2.   hide: function ($element, $tooltip) {
3.     $tooltip.fadeOut(4000);
4.   }
5. };
6. $(this).each(function (e) {
7.   $this.mouseleave(function (e) {
8.     tooltip.timer = setTimeout(function () {
9.       options.hide($this, $("." + options.class).stop(true, true), function () {
10.         $("." + options.class).remove(); // THE ELEMENT IS NOT BEING REMOVED
11.       });         
12.     }, 0);
13.   }), // Mouse leave 
14. })

On mouse leave I am trying to remove the element after the animation ends.

The problem is that the element is not being removed. But it works if I use:

1.   $this.mouseleave(function (e) {
2.     tooltip.timer = setTimeout(function () {
3.       options.hide($this, $("." + options.class).stop(true, true));
4.       $("." + options.class).remove(); // THE ELEMENT IS BEING REMOVED
5.     }, 0);
6.   }), // Mouse leave 

Then everything works fine ... Why is function() { ... } disable the remove action?

Thank You,
Miguel

Hello,

I have created a JQuery tooltip plugin and I am applying it to a few A tags.

For each A tag there should be a different tooltip associated with it so I have:

1.     var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');

Where the tooltip id includes a random number created as follows:

1.     id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000)

The plugin does not behave well. I checked the HTML added to the page.

Only one tooltip is being added to the page ... Always the same.

How can I fix this? What am I doing wrong?
I have an example in: http://codepen.io/mdmoura/pen/wgapv

And the plugin code is the following:

1.     $(document).ready(function () {
2.       $("table a").Tooltip();
3.     });
4.     // Tooltip
5.     (function ($) {
6.      
7.       $.fn.Tooltip = function (options) {
8.         var defaults = {         
9.           class: 'Tooltip',
10.           delay: [200, 200],
11.           offset: [0, -10],
12.           hide: function ($element, $tooltip) {
13.             $tooltip.fadeOut(200);
14.           },
15.           show: function ($element, $tooltip) {
16.             $tooltip.fadeIn(200);
17.           }
18.         };
19.         var options = $.extend({}, defaults, options);  
20.         var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };
21.         $(this).each(function (e) {    
22.           var $this = $(this);
23.           tooltip.title = $this.attr('title') || '';
24.           $this.mouseenter(function (e) {                 
25.             if (tooltip.ready) {
26.               var $tooltip = $("#" + tooltip.id);
27.             } else {
28.               var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
29.               $tooltip.html(tooltip.title);
30.               tooltip.ready = true;
31.               $this.attr('title', '');
32.             }
33.             var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
34.            
35.             $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
36.             tooltip.timer = window.setTimeout(function () {
37.               options.show($this, $tooltip.stop(true, true));
38.             }, options.delay[0] || 0);
39.                          
40.             $("#" + tooltip.id).mouseenter(function () {
41.               window.clearTimeout(tooltip.timer);
42.               tooltip.timer = null;
43.             }); // Tooltip enter
44.        
45.             $("#" + tooltip.id).mouseleave(function () {
46.               tooltip.timer = setTimeout(function () {
47.                 options.hide($this, $tooltip);
48.               }, 0);
49.             });
50.  
51.           }), // Mouse enter
52.        
53.           $this.mouseleave(function (e) {
54.             tooltip.timer = setTimeout(function () {
55.               options.hide($this, $("#" + tooltip.id).stop(true, true));
56.             }, options.delay[1] || 0);
57.           }) // Mouse leave 
58.         }); // Each
59.       }; // Tooltip
60.  
61.     })(jQuery); // JQuery

And the HTMl is the following:

1.     <table>
2.       <tr><td><a href="#" title="Tooltip 01 Text">Tooltip 01</a></td></tr>
3.       <tr><td><a href="#" title="Tooltip 02 Text">Tooltip 02</a></td></tr>
4.       <tr><td><a href="#" title="Tooltip 03 Text">Tooltip 03</a></td></tr>
5.       <tr><td><a href="#" title="Tooltip 04 Text">Tooltip 04</a></td></tr>
6.       <tr><td><a href="#" title="Tooltip 05 Text">Tooltip 05</a></td></tr>
7.     </table>

Thank you,
Miguel

Hello,

I created a JQuery tooltip plugin but I have a problem.

I need to be able to move the mouse over the tooltip ...

I tried to make this work with setTimeout and clearTimeout but no luck.

I have a working version here: http://www.codepen.io/mdmoura/pen/KdyJH

The important code is at the end of Mouse Enter event and in Mouse Leave event.

Here is the plugin code (I added comments in uppercase to explain what I am trying to do):

1. // JQuery
2. (function ($) {
3.   // Tooltip
4.   $.fn.Tooltip = function (options) {
5.     var defaults = {         
6.       class: 'Tooltip',
7.       content: '',
8.       delay: [200, 200],
9.       cursor: false,
10.       offset: [0, 1],
11.       hide: function ($element, $tooltip) {
12.         $tooltip.fadeOut(200);
13.       },
14.       show: function ($element, $tooltip) {
15.         $tooltip.fadeIn(200);
16.       }
17.     };
18.     var options = $.extend({}, defaults, options);
19.     var identity = "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000);
20.     var info = { ready: false, shown: false, timer: null, title: '' };
21.     $(this).each(function (e) {    
22.       var $this = $(this);
23.       info.title = $this.attr('title') || '';
24.       // Mouse enter          
25.       $this.mouseenter(function (e) {                 
26.         if (info.ready) {
27.           var $tooltip = $("#" + identity);
28.         } else {
29.           var $tooltip = $("<div>").attr("id", identity).attr("class", options.class).appendTo('body');
30.           $tooltip.html(options.content != '' ? (typeof options.content == 'string' ? options.content : options.content($this, $tooltip)) : this.title);
31.           info.ready = true;
32.           $this.attr('title', '');
33.         }
34.         if (options.cursor) {
35.           var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
36.         } else {
37.           var coordinates = $this[0].getBoundingClientRect();
38.           var position = [
39.             (function () {
40.               if (options.offset[0] < 0)
41.                 return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth();
42.               else if (options.offset[0] === 0)
43.                 return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth()) / 2);
44.               else
45.                 return coordinates.left + $this.outerWidth() + options.offset[0];
46.             })(),
47.             (function () {
48.               if (options.offset[1] < 0)
49.                 return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight();
50.               else if (options.offset[1] === 0)
51.                 return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight()) / 2);
52.               else
53.                 return coordinates.top + $this.outerHeight() + options.offset[1];
54.             })()
55.           ];
56.         }
57.         $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
58.         // HERE THE TOOLTIP IS DISPLAYED
59.         timer = window.setTimeout(function () {
60.           options.show($this, $tooltip.stop(true, true));
61.         }, options.delay[0] || 0);
62.         // THIS IS THE EVEN WHEN THE MOUSE MOVES OVER THE TOOLTIP.
63.         // IT SHOULD CANCEL THE HIDE CALL OF THE TOOLTIP.
64.         // AFTER THE MOUSE MOVES AWAY FROM THE "A" TAG THERE SHOULD BE A DELAY.
65.         // THE DELAY WOULD ALLOW THE MOUSE TO MOVE TO THE TOOLTIP.
66.         // IN THAT CASE THE HIDE CALL SHOULD BE CANCELED.
67.         $("#" + identity).mouseenter(function() {
68.           window.clearTimeout(timer);
69.           timer = null;
70.         });
71.         // HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM IT
72.         $("#" + identity).mouseleave(function () {
73.           timer = setTimeout(function () {
74.             options.hide($this, $tooltip);
75.           }, options.delay[1]);
76.         });
77.       }), // Mouse enter
78.       // HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM THE "A" TAG
79.       // WHEN THE MOUSE MOVES OVER THE TOOLTIP THIS SHOULD BE CANCELED.
80.       $this.mouseleave(function (e) {
81.         window.clearTimeout(timer);
82.         timer = null;
83.         options.hide($this, $("#" + identity).stop(true, true));
84.       }) // Mouse leave              
85.     }); // Each
86.   }; // Tooltip
87. })(jQuery); // JQuery

Remember that I have the working example in: http://www.codepen.io/mdmoura/pen/KdyJH

Thank You,
Miguel

Hello,

I have a table where in one of the rows I have a child table.
When the anchor with class "Show" is clicked I would like to:

1 - Make the child table visible ... Sliding it.
2 - Change the anchor class from "Show" to "Hide".

    <table class="Parent">
      <tr>
          <td class="Task"></td>
          <td>Row1</td>
       </tr>
      <tr>
        <td class="Task"><a class="Show">Show</a></td>
        <td>Row 2
          <table class="Child" style="display: none">
              <tr><td>Row1</td></tr>
             <tr><td>Row2</td></tr>
          </table>
        </td>
       </tr>
    </table>

How can I do this?

Thank You,
Miguel

Hello,

I have the following HTML:

1. <a href="#">Link</a>
2. <div>Some Text</div>

How can I align div with A tag on the following positions: top center, bottom center, right middle and left middle?

Thank You,
Miguel

Hello,

I created a JQuery tooltip plugin which can be used in two ways:

• The tooltip content is the title of the HTML anchor;
• The tooltip content is passed as an option;

I would like to have another option:

• The entire tooltip markup would be an element in the page.

          Let me give an example of what I am looking for:

1.          $("table td.Task a.Menu", "li div.Menu").Tooltip();

           So every link Menu under "table td.Task" would fire a tooltip.

           The tooltip markup would be the div.Menu under the same LI of the a.Menu

           How to change my plugin to also being able to do this? My current code is:

1. (function ($) {
2.   $.fn.Tooltip = function (options) {
3.     var defaults = {
4.       content: "",
5.       class: "Tooltip",
6.       id: "Tooltip"
7.     };
8.     var options = $.extend({}, defaults, options);
9.     var tooltip;
10.     $(this).each(function () {
11.       var title = $(this).attr("title");
12.       if (title == undefined && options.content == "") return;
13.       $(this).mouseenter(function (e) {
14.         $(this).removeAttr("title")
15.         tooltip = "<div id='{id}' class='{class}'>{content}</div>"
16.         var content = options.content == "" ? title : options.content;
17.         tooltip = tootip.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", content);
18.         $("body").append(tooltip);
19.         $("#" + options.id).fadeIn("fast");
20.       }), // Mouse Enter
21.       // Mouse Leave, Mouse Down and Mouse Move functions ...
22.     }
23.    }

Thank You,
Miguel

Hello,

Some time ago I created a Balloon plugin using JQuery 1.8.3.

When I updated from JQuery 1.8.3 to JQuery 1.9.1 my plugin stoped working.

The balloons do not show anymore. I went back to 1.8.3 and it works.

I tried to understand what might be wrong but I can't find it.

Could someone, please, help me out? This is my code:

1.     (function ($) {
2.       $.fn.Balloon = function (options) {
3.     var defaults = {
4.           balloon: "",
5.           class: "Balloon",
6.           click: false,
7.           id: "Balloon",
8.           sensible: false,
9.           x: -4,
10.           y: -40
11.         };
12.         var options = $.extend({}, defaults, options);
13.         var balloon;
14.         $(this).each(function () {
15.           var title = $(this).attr("title");
16.           if (title == undefined) return;
17.           $(this).hover(function (e) {
18.             $(this).removeAttr("title")
19.             balloon = "<div id='{id}' class='{class}'><span class='Text'>{content}</span><span class='Background'></span></div>"
20.             if (options.balloon == "") {
21.               balloon = balloon.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", title);
22.             } else {
23.               balloon = balloon.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", options.balloon).replace("{title}", title);
24.             }
25.             $("body").append(balloon);
26.             $("#" + options.id).fadeIn("fast");
27.           },
28.           function () {
29.             $("#" + options.id).remove();
30.             $(this).attr("title", title);
31.           });
32.           $(this).mousedown(function (e) {
33.             if (options.click) {
34.               $("#" + options.id).remove();
35.               $(this).attr("title", title);
36.             }
37.           }),
    
38.           $(this).mousemove(function (e) {
39.             var x = e.pageX + options.x;
40.             var y = e.pageY + options.y;
41.             if (options.sensible) {
42.               var width = $("#" + options.id).width();
43.               var height = $("#" + options.id).height();
44.               var right = $(window).width() - (x + width);
45.               var bottom = $(window).height() - (y + height);
46.               if (right < 20) {
47.                 x = e.pageX - width - options.x;
48.               }
49.               if (bottom < 20) {
50.                 y = e.pageY - height - options.y;
51.               }
52.             }
53.             $("#" + options.id).css({ top: y, left: x });
54.           }); // Mouse Move
55.         }); // Balloon
56.       };
57.     })(jQuery);

Thank You,
Miguel

Hello,

I have the following HTML:

1. <dl class="Faq">
2.   <dt>Question 1?</dt>
3.   <dd>Answer 1</dd>
4.   <dt>Question 2?</dt>
5.   <dd>Answer 2</dd>
6. </dl>
   

How can I show / hide a DD when its DT (on top) is clicked?

Thank You,
Miguel

Hello,

I am using MatchMedia:
https://github.com/paulirish/matchMedia.js

To test a Media Query in Javascript:

1. if (matchMedia('only screen and (max-width: 480px)').matches) {
2. }
   

Can I use JQuery to run ths check when the browser is resized?

I am looking for a solution that is not heavy ...

Thank You,
Miguel

Hello,

I have a table as follows (posting only two rows):

1.     <table id="Data">
2.       <tr><th>01-05-2012</th><td>40</td><td>42</td></tr>
3.       <tr><th>02-05-2012</th><td>22</td><td>26</td></tr>
4.     <table>

I would like to create an array with this data. Something like:

{ { 01-05-2012, { 40, 42 } }, { 02-05-2012, { 22, 26 } }, ...

Basically the TH contains a X value and the TDs contains the Y values.

Note: there might be one or more Y values (TD) in each row (TR).

How can I do this with JQuery?

Thank You,
Miguel

Hello,

I have the following code:

Hello,

I am using the following CSS Media Queries:

1.     @media screen {width: 1198px;}
2.     @media screen and (max-width: 1024px) {width: 940px;}

So, when the screen width goes under 1024px the width of the site becomes 940px instead of 1198px.

When this happens I need to refresh some images, containing charts.

How can I do this detection in JQuery?

Is there a way to translate CSS Media Queries to JQuery? Some plugin?

Thank You,
Miguel

Hello,

I have the following applied to Anchors:

1.   $('a').click(function () {
2.     this.target = "_blank";
3.   });

I would like to apply it to anchors which href does NOT contain "mydomain" and if possible case insensitive.

How can I do this?

Thank You,
Miguel

Hello,

I have N child divs inside a parent div as follows:

1. <div class="Parent">
2.   <div class="Child">child</div>
3.   <div class="Child">child</div>
4.   <div class="Child">child</div>
5. </div>

How can show randomly one of the child divs?

Thank You,
Miguel

Hello,

I have an input on a page form where I write "Hello".

When I select "Hello" with the mouse the background becomes blue.

Is it possible, with JQuery, to apply a consistent style to the selected text.

An example of a site that does that: http://unwrongest.com/projects/password-strength/

Type a password and then select it ...

That is the effect I am looking for.

Thank You,
Miguel

Hello,

I have the following selector:

1. $('form.Data :input').focus(function () {

Hello,

I am calling a URL using Ajax when a link is clicked:

  $('a.Delete').click(function (e) {
    e.preventDefault();
    if (confirm("Delete?")) {
      $.ajax({
        type: 'DELETE',
        url: e.href
      });   
    };
  });

However I get the link "http://.../flug/access/roles?p=1" instead of "http://.../flug/access/roles/23/delete".

So I am getting the url of the current page and not the one on the link.

What am I doing wrong?

Thank You,
Miguel

Hello,

I am adding a CSS class to a DIV as follows:

1. $div.addClass("Hover");

But I would like the class to be added only if the DIV does not have a class named "Disabled".

How can I do this?

Thank You,
Miguel

Hello,

Hello,

I have a few links on a page:

1. <a href="#AboutUs" class="AboutUs">About Us</a
2. <a href="#Contact" class="Contact">Contact</a

When I click the links the page goes to DIV's with those IDs: "AboutUs", "Contact", etc.

How can I add a slide effect to this?

Thank You,
Miguel

Hello,

How can I create a menu that is fixed on the page top and when the user clicks an option the page slides to that section H2?

Is there a JQuery plugin for this?

Thank You,
Miguel

Hello,

I created a plugin that shows a message using an element on page. One of the options is cookieName.

I would like to use the cookie value, if the cookie exists, as the element content.

And to delete the cookie after the message disappears.

I downloaded the Cookie plugin but I am not sure the best way to do this.

How can add this functionality to my plugin? Here is my code:

1. (function ($) {
2.   $.fn.Notice = function (options) {
3.     var defaults = {
4.       delay: 800,
5.       opacity: 0.9,
6.       pause: 4000,
7.       speed: 400,
8.       cookieName: ""
9.     };
10.     var options = $.extend({}, defaults, options);
11.     $(this).each(function () {
12.       var $this = $(this);
13.       $this.css({ opacity: options.opacity });
14.       $this.delay(options.delay).slideDown(options.speed).delay(options.pause).slideUp(options.speed, function () { $this.remove(); });
15.       $this.mousedown(function (e) {
16.         $this.stop(true).slideUp(options.speed, function () { $this.remove(); });
17.       }) // Mouse Down
18.     });
19.     return this;
20.   }; // Notice
21. })(jQuery);

Thank You,
Miguel

Hello,

I have links on a table as follows:

<a href="/Post/Delete/1" class="Delete">Delete</a>

I need to use HTTP POST or HTTP DELETE which are safer than HTTP GET for delete.

So my idea is to turn all the a.Delete into Ajax calls using JQuery.

Should I use POST or DELETE (I suppose it is not supported by all browsers)?

And maybe have a confirmation box.

How can I do this?

Thank You,
Miguel