jQuery - Pop out feature

  • robert475
  • Born
  • Born
  • robert475
  • Posts: 1

Post 3+ Months Ago

Hi I followed a tutorial and managed to get this popout effect on my site using jquery.

impact-products. co . uk / category.asp? cat=Sound

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:
Code: [ Select ]
<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>
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. //Larger thumbnail preview
  4. $("ul.thumb li").hover(function() {
  5.     $(this).css({'z-index' : '10'});
  6.     $(this).find('img').addClass("hover").stop()
  7.         .animate({
  8.             marginTop: '-60px',
  9.             marginLeft: '-80px',
  10.             top: '50%',
  11.             left: '50%',
  12.             width: '150px',
  13.             height: '118px',
  14.             padding: '0'
  15.         }, 200);
  16.     
  17.     } , function() {
  18.     $(this).css({'z-index' : '0'});
  19.     $(this).find('img').removeClass("hover").stop()
  20.         .animate({
  21.             marginTop: '0',
  22.             marginLeft: '0',
  23.             top: '0',
  24.             left: '0',
  25.             width: '70px',
  26.             height: '55px',
  27.             padding: '0'
  28.         }, 400);
  29.         return false;
  30. });
  31. $(".thumb li img").click(function(){
  32.     $(this).css({'z-index' : '0'});
  33.     $(this).find('img').removeClass("hover").stop()
  34.         .animate({
  35.             marginTop: '0',
  36.             marginLeft: '0',
  37.             top: '0',
  38.             left: '0',
  39.             width: '70px',
  40.             height: '55px',
  41.             padding: '0'
  42.         }, 400);
  43. });
  44. });
  45. </script>


I hope im making sense of what im trying to say! Any advice/suggestions will be greatly appreciated, thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • owenconti
  • Born
  • Born
  • owenconti
  • Posts: 1
  • Loc: Calgary, AB

Post 3+ Months Ago

This is probably not the correct response, but you could always have a return false on those links and use window.location = href's value

something like

Code: [ Select ]
$(".thumb li img").click(function(){
  var windowLocation = $(this).parent().attr('href');
  $(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);
  window.location(windowLocation);
  return false;
});
  1. $(".thumb li img").click(function(){
  2.   var windowLocation = $(this).parent().attr('href');
  3.   $(this).css({'z-index' : '0'});
  4.   $(this).find('img').removeClass("hover").stop()
  5.     .animate({
  6.       marginTop: '0',
  7.       marginLeft: '0',
  8.       top: '0',
  9.       left: '0',
  10.       width: '70px',
  11.       height: '55px',
  12.       padding: '0'
  13.     }, 400);
  14.   window.location(windowLocation);
  15.   return false;
  16. });



Something like that. I didn't test it cause I'm at work. Let me know if that works for you.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Right after this line:

Code: [ Select ]
$(document).ready(function(){


and before this line:

Code: [ Select ]
$("ul.thumb li").hover(function() {


I would put something in there to reset all of the states to the default that you want. The ready function will fire as soon as the document is loaded, which most likely when you hit the back button that will fire immediately (since everything is most likely loading from cache). So any code you put where I mentioned could be used to reset everything. Your hover and click function only fire when those events happen, but if you put some code outside those functions it would fire once the browser loads, and only once.

So you could just put this there:

Code: [ Select ]
$('ul.thumb li').each(function(index) {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .css({
        marginTop: '0',
        marginLeft: '0',
        top: '0',
        left: '0',
        width: '70px',
        height: '55px',
        padding: '0'
        });
});
  1. $('ul.thumb li').each(function(index) {
  2.     $(this).css({'z-index' : '0'});
  3.     $(this).find('img').removeClass("hover").stop()
  4.         .css({
  5.         marginTop: '0',
  6.         marginLeft: '0',
  7.         top: '0',
  8.         left: '0',
  9.         width: '70px',
  10.         height: '55px',
  11.         padding: '0'
  12.         });
  13. });


I changed animate to css to get it to happen instantly as well.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Actually on second thought what might work better is using the unload function, making sure you go through each link:

Code: [ Select ]
$(window).unload(function() {
    $('ul.thumb li').each(function(index) {
        $(this).css({'z-index' : '0'});
        $(this).find('img').removeClass("hover").stop()
            .css({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '70px',
            height: '55px',
            padding: '0'
            });
    });
});
  1. $(window).unload(function() {
  2.     $('ul.thumb li').each(function(index) {
  3.         $(this).css({'z-index' : '0'});
  4.         $(this).find('img').removeClass("hover").stop()
  5.             .css({
  6.             marginTop: '0',
  7.             marginLeft: '0',
  8.             top: '0',
  9.             left: '0',
  10.             width: '70px',
  11.             height: '55px',
  12.             padding: '0'
  13.             });
  14.     });
  15. });


So this will fire once the page tries to change, which occurs right after someone clicks on one of those links.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

After further research to why this problem was even happening, its due to the fact that the majority of browsers do not trigger the onload event when you hit the browser's back button, except for IE.

So with that said all you have to do to force the onload event to happen in all browsers is add this piece of jQuery code:

Code: [ Select ]
  $(window).unload(function() {
        //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  });
  1.   $(window).unload(function() {
  2.         //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  3.   });


For those not using jQuery you can also do this with just regular Javascript:

JAVASCRIPT Code: [ Select ]
<script type="text/javascript">
    window.onload = function(){
      //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
};
</script>
  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.       //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  4. };
  5. </script>



While the code doesn't actually really do anything, the browser assumes the page is uncacheable if it has a onunload handler. So when you hit the back button it is forced to reload the page which will again trigger the onload event. I tested it with your HTML code and this small piece of code above seems to also fix your problem.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 144 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.