jQuery Forum

Hi guys,

I've wrote a plugin - and it works great for what I need - except I've noticed today that:

1. return this.each(function() {

Puts the elements in the order they appear in the DOM.

So on my html page, I have this...

1. <div id="id1"></div>
   <div id="id2"></div>
   <div id="id3"></div>

But I want to change the divs in the order I provide the plugin. Like this...

1. $("#id3,#id1,#lid2).myPlugin()

The each function changes the order to how the elements appear on the page - 1,2,3 But this is no good.

Please can someone explain how I can make the plugin do its thing in the order I enter the elements

Thanks for the help!

Hi guys,

I've made a custom plugin that fills a div with text - as big as it can be (based on fittext) - it works the way I want - except for one thing...

You call the plugin like this:

1.  $(".lotsOfDivs").myPlugin("% fill","% from top");

At the bottom of the plugin I've got this line:

1. $(window).on('resize.myplugin orientationchange.myplugin', resizeText);

If I have a div ("big") that is 100% width and height of the body - and I call the plugin like this:

1. <div class="big">
2. <div class="item">My Text</div>
3. </div>

Then I use my plugin like this:

1.  $(".item").myPlugin(100,0);

That works fine - if I resize or change the browser - the text resizes to fit the box.

BUT...

If I don't resize the browser - and do the following:

1. $(".big").width("50%");
2. $(".big").height("50%");
   

My plugin isn't called - as it only loads when the browser is resized. So my text is the wrong size.

So what I need is a way to "update" the function. Like...

1. $(".item").myPlugin().update()

or a way to update all elements that are using the plugin.

1. myPlugin.updateAll()

Thanks for any help.

1. this.tooltip = function(){
    /* CONFIG */  
     xOffset = 10;
     yOffset = 20;  
     // these 2 variable determine popup's distance from the cursor
     // you might want to adjust to get the right result  
    /* END CONFIG */  
    $("a.tooltip").hover(function(e){            
     this.t = this.title;
     this.title = "";          
     $("body").append("<p id='tooltip'>"+ this.t +"</p>");
     $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");  
       },
    function(){
     this.title = this.t;  
     $("#tooltip").remove();
       }); 
    $("a.tooltip").mousemove(function(e){
     $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
    });   
   };

1. <a class="tooltip" title="My Link" href="#">Hover</a>

1. $('<div id="new' + myCount + '"><a class="tooltip" title="New Tooltip" href="#"> </a></div>').insertBefore('#new1');

The new link is added to the page -- but i dont know how to update the tooltip function to include the new created dynamic link