i1zivkovic i1zivkovic - 2 months ago 11
CSS Question

Missing slide out div after backing to the page

I made 'animated' slide out menu with social media icons that I added to the page which I made by followin the tutorial from Udemy. It slides out on mouseenter() and slides back on mouseeleave(). I used animate() function.

Problem is when I click on any of the icons that lead me to another website and when I click back on my browser or my mouse buttom, my page loads but the menu is missing. I have to reload the page for menu to show up again. Is there any way to fix it so it shows automatically without reloading the page?

Thanks a lot.

Page loaded:
enter image description here

Menu open on mouseenter():
enter image description here

Wole menu missing after backing from facebook or any other:
enter image description here



$(document).ready(function() {
$('#follow').mouseenter(function() {
$(this).animate({
left: "+=49px"
}, 50);
});
$('#follow').mouseleave(function() {
$(this).animate({
left: "-=49px"
}, 50);
});
$('#follow').click(function() {
$(this).animate({
left: "-=49px"
}, 0);
});

});

#follow {
position : fixed;
left : -50px;
width : 70px;
float : left;
border-radius : 0px;
border-top-right-radius : 15px;
border-bottom-right-radius : 15px;
background-color : #353535;
}

#follow #follow_id {
padding-top : 15px;
list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="final-example">

<div id="follow">
<ul id="follow_id">
<li class=""><a href="https://www.facebook.com/"><img src="img/facebook-logo-button.png" alt="facebook"/></a></li>
<li class=""><a href="https://twitter.com/?lang=en"><img src="img/twitter-logo-button.png" alt="twitter"/></a></li>
<li class=""><a href="https://www.instagram.com/"><img src="img/instagram-logo.png" alt="instagram"/></a></li>
</ul>

</div>





The snippet looks bad beacuse the pictures are missing and the alt is showing which I gotta fix, but the problem is when I click lets say facebook icon, it loads me facebook site, then if I press back button on my browser it gets me back to my page but that entire sliding menu is missing, it doesn't even load at all on my page. I have to click reload on my broswer for that menu to show up at all and only then I can use it.

Answer

I have used your code in demo and it is working fine. I haven't seen any issue.

Please check this one.

https://output.jsbin.com/muluyu/1

If this dosen't work for you then it will be a browser related issue. Different browsers load the page differently when using the back button. Sometimes they cache the page and sometimes they reload the page. I believe still others only partially reload the page.

So for mozilla firefox back button won't refresh the page most of the time. because of that the #follow is going left -90px and so on adding -49 everytime. So add this line.

$('#follow').css('left', '-50px');

After document.ready(function () { ..

Final JS

$(document).ready(function() {
    $('#follow').css('left', '-50px');
    $('#follow').mouseenter(function() {
        $(this).animate({
            left: "+=49px"
        }, 50);
    });
    $('#follow').mouseleave(function() {
        $(this).animate({
            left: "-=49px"
        }, 50);
    });
    $('#follow').click(function() {
        $(this).animate({
            left: "-=49px"
        }, 0);
    });

});

It will work for sure.

Demo : https://output.jsbin.com/muluyu/2