CODEWITHSUNDEEP
jquerycssdynamicreloadpage-refresh
Séane
Séane

Reputation: 101

Javascript refresh when browser is resized + How to make it be less painfull

I've got this one template I'm working on in which I have a few divs that are dynamically resized by javascript (they copy the height of other divs):

$('#postThumbnailGhost').height($('.wp-post-image').height());
$('#post').css('min-height', $('.wp-post-image').height());

It's working just fine, until I try to resize the browser. The script is not called again.

So, why not reload the full page if the window is resized?

Ok, then :

$(window).resize(function(){location.reload();});

But, when the page is reloaded, it blinks a lot as a few contents are dynamically generated.

For instance, the two divs I previsouly mentionned. I also have an embeded twitter timeline which refresh itself each time the page is loaded.

So the question is how can I make the reload painless (without any blink).

By the way, my Jquery call is in the footer, same for all my scripts.

/!\ Sometime when I reload the page on my site it seems that Javascript is not working at all, or called too late, resulting on the template being messed up (maybe because it's in the footer?)

++ JSFiddle doesn't have the resize problem with the dynamic div. You can resize the render part without any problem. JSFiddle of the project, without window load script

++ Link of the project live

Séane

Upvotes: 0

Views: 258

Answers (2)

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

Why would you reload the page, why not just call the same code again on resize?

$(window).resize(function(){
    $('#postThumbnailGhost').height($('.wp-post-image').height());
    $('#post').css('min-height', $('.wp-post-image').height());
});

Although, it would probably be smart to put that code into a function, so it wouldn't repeat, and just call the function whenever needed.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074286

There's no need to reload when the window is resized, just resize:

function updateHeights() {
    $('#postThumbnailGhost').height($('.wp-post-image').height());
    $('#post').css('min-height', $('.wp-post-image').height());
}
updateHeights();
$(window).on("resize", updateHeights);

Upvotes: 3

Related Questions