Databases
StackOverflow2013
Postsdbo
POCan we use same jquery plugin twice in a single page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan we use same jquery plugin twice in a single page?
    text
    copied!<p>Ive been trying to add a slider model to the webpage and I want to add the sliders in two different divs.. Ive tried renaming the elements and class names..bt it doesnt wrk... Is there a solution for this???is it possible to use a jquery plug in twice in same page??</p> <p>I am trying to add the plugin code </p> <pre> var currentPosition1 = 0; var slideWidth1 = 900; var slides1 = $('.slider1'); var numberOfSlides1 = slides1.length; // Remove scrollbar in JS $('#slidesContainer1').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides1 .wrapAll('') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth1 }); // Set #slideInner width equal to total width of all slides $('#slideInner1').css('width', slideWidth1 * numberOfSlides1); // Insert controls in the DOM $('#slideshow1') .prepend('Clicking moves left') .append('Clicking moves right'); // Hide left arrow control on first load manageControls1(currentPosition1); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1; // Hide / show controls manageControls1(currentPosition1); // Move slideInner using margin-left $('#slideInner1').animate({ 'marginLeft' : slideWidth1*(-currentPosition1) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls1(position1){ // Hide left arrow if position is first slider2 if(position1==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() } // Hide right arrow if position is last slider2 if(position1==numberOfSlides1-1){ $('#rightControl1').hide() } else{ $('#rightControl1').show() } } </pre> <p>in to the div Panel1</p> <pre><code>&lt;div class="panel1"&gt; &lt;div id="slideshow1"&gt; &lt;div id="slidesContainer1"&gt; &lt;div class="slider1"&gt; &lt;table style="margin-bottom:50px;"&gt;&lt;tbody id="facetPrsnRslt"&gt;&lt;/tbody&gt;&lt;/table&gt; &lt;/div&gt; &lt;div class="slider1"&gt; &lt;p&gt;This is the END my Friend...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>, there is another div panel 2, i want to add the same slider plugin in to panel2, bt no luck...</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