StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need to prevent the default action from occurring when you click the <code><a></code>. Just modify the first line of code to read:</p> <p><code>$('a.photography').click(function(e) {</code></p> <p>Note the <code>e</code> inside <code>function(e)</code>.</p> <p>Then, within that function, put <code>e.preventDefault();</code>. This can go anywhere inside the click handler function.</p> <p><strong>Edit --</strong> In response to the comment on my answer: I'm not 100% sure why you're getting this problem, but I do see one place where your code has an issue:</p> <pre><code>$('#contentCanvas_A').fadeOut().hide(); </code></pre> <p>When you do this, the <code>hide()</code> method is run immediately after the <code>fadeOut()</code> method is called, as opposed to <em>waiting</em> for the <code>fadeOut</code> method to finish. All of jQuery's animation methods allow you to pass in a "callback" function that will be executed once the animation method finishes. For example:</p> <pre><code>$('#contentCanvas_A').fadeOut(250, function(){ alert('fadeOut finished!'); }); </code></pre> <p>If you do this, you'll see the element fade out and once it is totally gone, you'll get the alert. As an aside, there is no need to call <code>hide()</code> here because <code>fadeOut()</code> actually does this for you at the very end.</p> <p>The main piece of your code that should be put inside this callback function (where the alert is) is the final line:</p> <pre><code> $('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow"); </code></pre> <p>And once you put it inside that callback function, you may find that you no longer need the <code>delay()</code> method call because the whole line will already wait for the initial <code>fadeOut</code> to finish before getting executed.</p> <p>Anyway, I'm not sure if this gives you enough info to fully solve your problem. If not, it would be much easier at this point if you'd put your code into <a href="http://jsfiddle.net" rel="nofollow">jsFiddle</a> so that I can play around with it.</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