Page reload doesn't reset jQuery / CSS styles

Question

I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.

I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected. NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.

I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?

Here's my jQuery code, in case it's relevant:

    $(document).ready(function(){

    var faqs = $("#FAQ");
    $("#learnmore").click(
        function(){
            $("#home").animate({top:'-=1066px'},600);
            $("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
            $("body").css('overflow-y', 'scroll');

            //$("#home").slideUp();
            console.log("jquery loaded");
            }
        );

});

@Thijs: It doesn't work in Chrome. Click the "learn more" button and scroll the page before you hit reload. You'll see. — emersonthis
– emersonthis, Commented Apr 20, 2012 at 22:56
when it's reset it is only off/up as many pixels as I've scrolled down. Are you using cookies for screen height? I don't know what's causing it but you might be able to work around it by putting a scrollTop: '0px' in the document ready function so that it gets you to the top on load. — K'shin Gendron
– K'shin Gendron, Commented Apr 20, 2012 at 23:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

It happens because it is cached by the browser.

If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like

<link href="style.css?time=168768234928" ..../>

What it does, it makes the browser think it is a new request everytime it loads.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 20, 2012 at 22:46

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

emersonthis Over a year ago

So when the page loads, do I need to generate a random string of numbers for the end of the css link? Something like this: <link href="style.css?time=<?php //generate random number... ?>" ..../>

Starx Over a year ago

kinda like style.css?time=<?php echo time(); ?>

Stanislav Gamaiunov · Accepted Answer · 2012-04-21 09:36:53Z

0

It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page. Okey, the reason is clear.

Now we need solution. Try this:

#more {display:none}

in your css. And then use

$("#more").show().animate(...

in your $("#learnmore").click() function. I hope this will solve the problem.

edited Apr 21, 2012 at 9:36

answered Apr 20, 2012 at 22:57

Stanislav Gamaiunov

3532 silver badges7 bronze badges

Collectives™ on Stack Overflow

Page reload doesn't reset jQuery / CSS styles

2 Answers 2

It happens because it is cached by the browser.

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

It happens because it is cached by the browser.

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related