Question

I’ve recently encountered a problem, and despite coming across similar questions here alreadt, none of the answers provided appear to work for me.

I have a jQuery click function, and an ‘onclick’ function on the same link (it shows a hidden div, and pops up a window – the intention being for both to happen at the same time). At the moment, when the link is clicked, the popup works fine, but it requires a second click for the hidden div to show – the popup showing again on that second click.

I’ve tried a few things, like moving the script to the bottom of the page (didn’t work at all), and also removing the onclick event altogether – but the ‘show’ aspect always seems to require 2 clicks.

Any pointers would be much appreciated! My code is below;

<script language="javascript">
jQuery(document).ready(function() {
$(".show").click(function(){
var left = $(this).next('span').css('left');
if ( left == '3px') {
$(this).next('span').animate({left:'148px'}, 1000);
} else {
$(this).next('span').animate({left:'3px'}, 1000);
}
return false;
});
});
</script>

<script type="text/javascript">
function showPopup(url) {
newwindow=window.open(url,'name','height=190,width=520,top=200,left=300,resizable');
if (window.focus) {this.window.focus()}
}
</script>

<!--- In Page --->
<div class="coupon"><a href="/relevantpage.html" onclick="showPopup(this.href);return(false);"   class="show"></a><span class="code">ABC1</span></div>

Answer 1

It seems to me that it might not have anything to do with the click handler, but that on your first click, left will not equal '3px', but something else (perhaps 'auto'?). But it will be in the same position, so you won’t see the animation. Next time, you will see when it animates to '148px'. It might be cleaner to toggle a class after the animation, and check for that.