Hi I followed a tutorial and managed to get this popout effect on my site using jquery.
When you hover over a brand it pops out with a white square background, when you hover off, it returns to its normal state.
Now each icon links to a different page which is great but the glitch i have is that when you go back (using the browser window buttons) to the original page the icon that was clicked is still popped out. I want when the user returns back to this page for the icon that was pressed in the first instance to return to its normal state. I have only noticed this happening in firefox thus far, in IE its ok.
Here is the code im using:
<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-60px',
marginLeft: '-80px',
top: '50%',
left: '50%',
width: '150px',
height: '118px',
padding: '0'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '70px',
height: '55px',
padding: '0'
}, 400);
return false;
});
$(".thumb li img").click(function(){
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '70px',
height: '55px',
padding: '0'
}, 400);
});
});
</script>
I hope im making sense of what im trying to say! Any advice/suggestions will be greatly appreciated, thanks.