StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJquery plugin development, attach a browser event and methods
text
Body
copied!<p>Ok so i'm learning to write plugins and the jQuery site for plugin authoring is damn confusing. I'm really trying to figure out how to add methods to my plugin that will fire based on a browser event. So basically I have a plugin that builds out a swipeable slide show for a mobile device. When the device is rotated I need it to rebuild the slideshow for the new dimensions. Right now I have it so it builds it the first time but I can't (a) figure out to add methods for different functions and (b) bind events to those specific methods. here's my code. </p> <pre><code>(function( $ ){ $.fn.jCarousel = function( options ) { var empty = {} var defaults = { height: $(window).height(), width: $(window).width(), count: 1, amount: $('.swiper', this).length, thisone:this, }; var options = $.extend(empty, defaults, options); return this.each(function() { options.thisone = this; amount = $('.swiper', this).length; holdWidth = options.width * options.amount; $('.swiper', this).height(options.height); $(this).height(options.height); $('.swiper', this).width(options.width); $(this).width(holdWidth); $('.swipe_slide',this).width(holdWidth); //================================================================================================================== //================================================================================================================== $('.swiper', this).each(function(i) { var nwidth = options.width*i; $(this).css('left',nwidth); }); //================================================================================================================== //================================================================================================================== //================================================================================================================== //================================================================================================================== $('.swipe_slide', this).swipe(function(evt, data) { if(data.direction=='left'){ //alert('count: '+options.count+" amount: "+options.amount); if(options.count != options.amount){ moveWidth = options.count * -options.width; $('.swipe_slide',options.thisone).css( "left" ,moveWidth ); options.count++ }else{ return } }else{ if(options.count!=1){ moveWidth = moveWidth+ options.width; $('.swipe_slide',options.thisone).css( "left" ,moveWidth ); options.count-- } else{ return } } }); //================================================================================================================== //================================================================================================================== }); }; })( jQuery ); </code></pre>

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