Databases
StackOverflow2013
Postsdbo
POJquery plugin re-inits when method is called
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery plugin re-inits when method is called
    text
    copied!<p>This is my first stab at trying to create a JQuery plugin, so I apologize for my noobbery. My issue is that I believe the plugin is re-initializing when I try to call a public method. It's a simple plugin that creates a div and fills it with tiles, the method .reveal() should remove the tiles.</p> <p>Plugin declaration:</p> <pre><code>(function($){ $.fn.extend({ //pass the options variable to the function boxAnimate: function(options) { //Set the default values, use comma to separate the settings, example: var defaults = { bgColor: '#000000', padding: 20, height: $(this).height(), width: $(this).width(), tileRows:25, tileHeight:$(this).height()/25, tileCols:25, tileWidth:$(this).width()/25, speed: 500 } var options = $.extend(defaults, options); this.reveal = function(){ var lastTile = $('.backDropTile:last').attr('id'); var pos1 = lastTile.indexOf("_"); var pos2 = lastTile.lastIndexOf("_"); var lCol = parseInt(lastTile.substr(pos2+1)); var lRow = parseInt(lastTile.substr(pos1+1,(pos2-pos1)-1)); alert(lCol+' '+lRow+' #bdTile_'+lRow+'_'+lCol); for(lRow;lRow&gt;=0;lRow--){ //Iterate by col: for(lCol;lCol&gt;=0;lCol--){ $('#bdTile_'+lRow+'_'+lCol).animate({ opacity: 0 }, 100, function() { $('#bdTile_'+lRow+'_'+lCol).remove(); }); } } alert(lCol+' '+lRow); } return this.each(function(index) { var o = options; //Create background: $(this).prepend('&lt;div id="backDrop" style="color:white;position:absolute;z-index:998;background-color:'+o.bgColor+';height:'+o.height+'px;width:'+o.width+'px;"&gt;&lt;/div&gt;'); //create boxes: //First iterate by row: for(var iRow=0;iRow&lt;o.tileRows;iRow++){ //Iterate by col: for(var iCol=0;iCol&lt;o.tileCols;iCol++){ $('#backDrop').append('&lt;span class="backDropTile" id="bdTile_'+iRow+'_'+iCol+'" style="z-index:998;float:left;background-color:green;height:'+o.tileHeight+'px;width:'+o.tileWidth+'px;"&gt;&lt;/span&gt;'); } } }); } }); })(jQuery); </code></pre> <p>Usage:</p> <pre><code> $(document).ready(function() { $('#book').boxAnimate(); $('#clickme').click(function() { $('#book').boxAnimate().reveal(); }); }); </code></pre> <p>So I pretty much know what my problem is, but I'm not familiar enough with creating jQuery plugins to fix it. It's seems like the more I read, the more confused I become as it appears to be many ways to achieve this.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload