CODEWITHSUNDEEP
javascriptjquerycss
Adrian.I
Adrian.I

Reputation: 180

Execute jQuery function after page refresh

I did a function where I checked if the window has been resized and an element is visible in order to change some classes and add a little bit of css .The problem is if I refresh the page the changes are reverted . Here is a snippet of my code :

$(document).ready(function() {

 $(window).resize(function() {
   if(isMenuVisible() == true){
     $('#my-nav').removeClass('navbar-fixed-bottom');
     $('#my-nav').addClass('navbar-fixed-top');
     $('body').css('padding-top', '50px');
      } else{
      $('#my-nav').removeClass('navbar-fixed-top');
      $('#my-nav').addClass('navbar-fixed-bottom');
      $('body').css('padding-top', '0');  
   }
 }) ;
});

Upvotes: 0

Views: 19110

Answers (3)

yuriy636
yuriy636

Reputation: 11661

$(document).ready(function() {  
  
 function resizeChanges(){
    if(isMenuVisible() == true){
       $('#my-nav').removeClass('navbar-fixed-bottom');
       $('#my-nav').addClass('navbar-fixed-top');
       $('body').css('padding-top', '50px');
     }else{
       $('#my-nav').removeClass('navbar-fixed-top');
       $('#my-nav').addClass('navbar-fixed-bottom');
       $('body').css('padding-top', '0');  
     }   
 }
 
 $(window).resize(resizeChanges);
 
 resizeChanges();
});

This way you define a separate function to make your changes, you add the event listener to trigger it but also you call that function itself after the load/refresh.

Upvotes: 3

Vicente Olivert Riera
Vicente Olivert Riera

Reputation: 1220

If the user refreshes the page, all changes in the client side will be lost. However, you can detect when the user refreshes the page and save the values in the server side. And then, when the page is loaded again, restore those values.

$(window).on('beforeunload', function(){
    // save the values to server side
});

$(window).on('load', function(){
    // restore values
});

Upvotes: 0

Zdenek Hatak
Zdenek Hatak

Reputation: 1145

Try trigger the resize event on window after load.

$(window).trigger('resize');

Upvotes: 0

Related Questions