Place the prev/next buttons after the clip element to make z-index de…

…clarations unnecessary
mak1e · Apr 3, 2010 · 74545ab · 74545ab
1 parent 2e745f9
commit 74545ab
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -121,14 +121,14 @@ <h3>Getting started</h3>
     <pre>
 &lt;div class=&quot;jcarousel-skin-<em>name</em>&quot;&gt;
   &lt;div class=&quot;jcarousel-container&quot;&gt;
-    &lt;div disabled=&quot;disabled&quot; class=&quot;jcarousel-prev jcarousel-prev-disabled&quot;&gt;&lt;/div&gt;
-    &lt;div class=&quot;jcarousel-next&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;jcarousel-clip&quot;&gt;
       &lt;ul class=&quot;jcarousel-list&quot;&gt;
         &lt;li class=&quot;jcarousel-item-1&quot;&gt;First item&lt;/li&gt;
         &lt;li class=&quot;jcarousel-item-2&quot;&gt;Second item&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/div&gt;
+    &lt;div disabled=&quot;disabled&quot; class=&quot;jcarousel-prev jcarousel-prev-disabled&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;jcarousel-next&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
@@ -140,11 +140,9 @@ <h4>Note:</h4>
   <ul>
     <li>The skin class &quot;jcarousel-skin-<em>name&quot;</em> has been moved
       from the <code>&lt;ul&gt;</code> to the top <code>&lt;div&gt;</code> element.</li>
-    <li>The&nbsp;first nested <code>&lt;div&gt;</code> under <code>&lt;div class=&quot;jcarousel-container&quot;&gt;</code>
-        illustrates a disabled button, the second an enabled one. The disabled
-        button has
-        the
-        attribute
+    <li>The last 2 nested <code>&lt;div&gt;</code>'s under <code>&lt;div class=&quot;jcarousel-container&quot;&gt;</code>
+        are the next/prev buttons of the carousel. The first one illustrates a disabled button, the second an enabled one. The disabled
+        button has the attribute
       <code>disabled</code> (which actually makes no sense for <code>&lt;div&gt;</code>
       elements, but you can also use <code>&lt;button&gt;</code> elements or
       whatever  you want) as well as the additional class <code>jcarousel-prev-disabled</code>

diff --git a/lib/jquery.jcarousel.js b/lib/jquery.jcarousel.js
@@ -23,14 +23,14 @@
      *
      * <div class="jcarousel-skin-name">
      *   <div class="jcarousel-container">
-     *     <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
-     *     <div class="jcarousel-next"></div>
      *     <div class="jcarousel-clip">
      *       <ul class="jcarousel-list">
      *         <li class="jcarousel-item-1">First item</li>
      *         <li class="jcarousel-item-2">Second item</li>
      *       </ul>
      *     </div>
+     *     <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
+     *     <div class="jcarousel-next"></div>
      *   </div>
      * </div>
      *
@@ -136,20 +136,20 @@
         if (!this.clip.length || !this.clip.hasClass('jcarousel-clip'))
             this.clip = this.list.wrap('<div></div>').parent();
 
-        this.buttonPrev = $('.jcarousel-prev', this.container);
-
-        if (this.buttonPrev.size() == 0 && this.options.buttonPrevHTML != null)
-            this.buttonPrev = this.clip.before(this.options.buttonPrevHTML).prev();
-
-        this.buttonPrev.addClass(this.className('jcarousel-prev'));
-
         this.buttonNext = $('.jcarousel-next', this.container);
 
         if (this.buttonNext.size() == 0 && this.options.buttonNextHTML != null)
-            this.buttonNext = this.clip.before(this.options.buttonNextHTML).prev();
+            this.buttonNext = this.clip.after(this.options.buttonNextHTML).next();
 
         this.buttonNext.addClass(this.className('jcarousel-next'));
 
+        this.buttonPrev = $('.jcarousel-prev', this.container);
+
+        if (this.buttonPrev.size() == 0 && this.options.buttonPrevHTML != null)
+            this.buttonPrev = this.clip.after(this.options.buttonPrevHTML).next();
+
+        this.buttonPrev.addClass(this.className('jcarousel-prev'));
+
         this.clip.addClass(this.className('jcarousel-clip'));
         this.list.addClass(this.className('jcarousel-list'));
         this.container.addClass(this.className('jcarousel-container'));