Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ol> <li><p>"min range jumps ahead the handle" - I've reduced the bug here: <a href="http://jsfiddle.net/jefferyto/Gd5dn/" rel="nofollow">http://jsfiddle.net/jefferyto/Gd5dn/</a></p> <p>This is a <a href="http://bugs.jquery.com/ticket/7109" rel="nofollow">bug</a> in <code>jQuery.animate()</code> when animating non-pixel values; Slider uses percentages. Before animating, jQuery converts the element's starting value (in pixels) into the end value's units, and assigns this non-px starting value to the element (lines 8601-8605 in jQuery 1.7.2 (unminified)).</p> <p>The calculation is flawed for small end values (like 0%), and so the range's starting width is larger than what it should be.</p> <p>I've opened a <a href="https://github.com/jquery/jquery/pull/808" rel="nofollow">pull request</a> with a fix; the same fix can be applied to the current stable version of jQuery.</p> <p><strong>Update:</strong> You can find a plugin that fixes this bug (for jQuery 1.7.2) here: <a href="http://jsfiddle.net/jefferyto/zbkQX/" rel="nofollow">http://jsfiddle.net/jefferyto/zbkQX/</a></p> <p>Copy from (at the top)</p> <pre><code>// Start jQuery.animate() fix </code></pre> <p>to (before the test code)</p> <pre><code>// End jQuery.animate() fix </code></pre> <p>It should work if you paste this code into your plugins.js.</p></li> <li><p>"it should animate to the last position but it jumps there" - this is because the Slider and jPages plugins are connected with circular callbacks.</p> <p>When the user clicks on the slider, Slider triggers a <code>slide</code> event then animates the handle and range. The <code>slide</code> event handler calls jPages to change to the new page. jPages calls its assigned callback function, which passes the current page number back to Slider. Slider sets its value and starts to animate the handle/range.</p> <p>After the <code>slide</code> event, Slider goes back to animating the handle and range (which is actually the second time it is animating). Slider calls <code>.stop(1, 1)</code> on the elements before animating, which causes the first animation to stop and jump immediately to its end value. (The second <code>.animate()</code> does nothing since the elements are already in the correct position.)</p> <p>(I hope that made sense :-) )</p> <p>I suggest adding logic in the jPages callback to call Slider with the new page number only if the trigger isn't originally from Slider.</p> <p><strong>Update:</strong> I think you'll need to update both callbacks:</p> <p>For Slider:</p> <pre><code>slide: function(event, ui) { if (!self.paging) { self.paging = true; $(self.shop_navigation_class).jPages(ui.value); self.paging = false; } } </code></pre> <p>For jPages:</p> <pre><code>callback: function(pages) { var data = { current_page: pages.current, total_pages: pages.count } self.set_local_storage_data(self.data_key, JSON.stringify(data)); if (!self.paging) { self.paging = true; $(self.shop_slider_class).slider("value", pages.current); self.paging = false; } } </code></pre> <p>Please let me know if this works for you.</p></li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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