StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try this:</p> <pre><code>if ($('.innerslide').css("left") == 0) { $('div.backarrow').hide(); } else { $('div.backarrow').show(); } </code></pre> <p><br/></p> <p><strong>Fix for Double-Click Issue:</strong> From what you described in your comment about the issue when the visitor double-clicks, it sounds like the double-click is causing two of the animation events to fire. To keep this from happening, you can either disable the click handler while the animation is running and re-enable it once it is finished, or you can try to write a new thread to continually check the element's position. One of these solutions is not a good idea - I'll let you figure out which one :) - but the other actually has a very simple solution that requires little change to your existing code (and may actually reduce your overhead by a teeny weeny amount):</p> <pre><code>$('.nextcol').on("click.next", function() { $('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack()); $(this).off("click.next"); }); $('.prevcol').on("click.prev", function() { $('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward()); $(this).off("click.prev"); }); </code></pre> <p>Then add this this line to <code>showHideBack()</code> (and a complementary one to <code>showHideForward()</code> if you are using that):</p> <pre><code>$('.nextcol').on("click.next"..... </code></pre> <p>I suggest that you write a function to set each click handler and another to remove each one. This will make your live very easy and the whole solution should reduce overhead by removing unnecessary click handlers while the animation is running. </p> <p>Note: the <code>animation</code> method often calls its callback before the animation finishes. As such, you may wish to use a <code>delay</code> before calling the <code>showHide...</code> method(s).</p> <p><br/></p> <p>Let me know if you have any questions. Good luck! :)</p> <p><br/></p> <p><strong>UPDATE:</strong></p> <p>Here is the <a href="http://jsfiddle.net/fSVuu/17/" rel="nofollow">updated version</a> of the fiddle you gave me with all bugs ironed out. It looks like I misunderstood part of your goal in my original solution, but I straightened it out here. I have also included the updated jQuery, here:</p> <pre><code>var speed = 1000; var back = $("div.backarrow"); var next = $(".nextcol"); var prev = $(".prevcol"); var inner = $(".innerslide"); function clickNext(index) { next.off("click.next"); inner.animate({ 'left': '-=711px' }, speed, function() { back.show(); //this line will only be hit if there is a previous column to show next.delay(speed).on("click.next", function() { clickNext(); }); }); } function clickPrev() { prev.off("click.prev"); inner.animate({ 'left': '+=711px' }, speed, function() { if (inner.css("left") == "0px") { back.delay(speed).hide(); prev.delay(speed).on("click.prev", function() { clickPrev(); }); } else { back.delay(speed).show(); prev.delay(speed).on("click.prev", function() { clickPrev(); }); } }); } next.on("click.next", function() { clickNext(); }); prev.on("click.prev", function() { clickPrev(); }); </code></pre> <p><br/></p> <p>I was going to also include a condition to check if you were viewing the last column, but, as I don't know what your final implementation will be, I didn't know if it would be applicable. As always, let me know if you need help or clarification on any of this. :)</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