Jump to content
Sign in to follow this  
Mad_Griffith

Basic Slideshow plugin: scoping and multi-instantiation

Recommended Posts

Hi, I am building an extremely basic jQuery Slideshow plugin (code below). I have two issues:

 

1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function?

2) How can I make the plugin multi-instance with pure jQuery? Can I avoid JS classical/prototypal inheritance?

$('.article-previous').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();if(inner.position().left < 0) { $('.interaction-tab .inner').css({ 'left' : '+=' + slide_width + 'px' });}e.stopPropagation();});$('.article-next').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();var max_pos = total_width - slide_width;if(-inner.position().left < max_pos) {$('.interaction-tab .inner').css({ 'left' : '-=' + slide_width + 'px' });}e.stopPropagation();});

Thanks :)

Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

You could have a single function for both events:

$('.article-previous').click(articleButton);$('.article-next').click(articleButton);function articleButton(e) {  var inner = $('.interaction-tab .inner');  var article = $('.interaction-tab .inner article');  var total_width = inner.width();  var slide_width = article.width();  var max_pos = total_width - slide_width;  var element = $(this);  if(element.hasClass('article-previous') && inner.position().left < 0) {     inner.css({ 'left' : '+=' + slide_width + 'px' });  }  if(element.hasClass('article-next') && -inner.position().left < max_pos) {    inner.css({ 'left' : '-=' + slide_width + 'px' });  }  e.stopPropagation();}

Share this post


Link to post
Share on other sites

1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function?

It looks like you can use Function.bind in recent browsers to create a copy of the function that gets passed specific parameters:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bindThere's a polyfill for a Function.createDelegate method that you could also use, which I stole from ExtJS/Sencha:http://w3schools.invisionzone.com/index.php?showtopic=33082#entry181427I don't think that jQuery has ever added something like that, where you can create a copy of a function that runs in a specific scope and automatically gets passed certain parameters, in addition to any others that get passed when it is actually called.

How can I make the plugin multi-instance with pure jQuery?

"Pure jQuery" is a strange term. You realize that jQuery is written using Javascript, right? It's not a new language or anything, it's a Javascript program.

Can I avoid JS classical/prototypal inheritance?

Not even you're using jQuery, because that's how jQuery works.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...