Question

Is it possible that when the page is on css responsive it will refresh the page using javascript or jquery?

example if I have this css code :

@media only screen and (max-width: 826px){
    #divid{
    top:80px;
}
}

I want to refresh the page if the width will equal to 826px.
for now I have these js code:

var descTop = $('#divid').eq(0).css('top');
    if (descTop == "80px"){
           window.location.reload();
    }

but it won’t work, but when I try to manually refresh it, it will infinitely wont stop of reloading.

does my idea possible? if yes then how will I deal with it?

Answer 1

You are refreshing the page based on the size being less that 826 pixels which is always the case once you are below that amount. So the refresh will loop.

You need to look at attaching to the onWinodowResize event:

$(window).resize(function() {
  var descTop = $('#divid').width()
if (descTop < 826){
       window.location.reload();
}
});

Then you need to reload once. But only when the user resizes.

Also you code is comparing two strings not a integer value for the width;