Execute jQuery function after page refresh

Question

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');  
   }
 }) ;
});

yuriy636 · Accepted Answer · 2016-08-07 19:10:06Z

3

$(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.

answered Aug 7, 2016 at 19:10

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

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

Comments

Zdenek Hatak · Accepted Answer · 2016-08-07 19:05:44Z

0

Try trigger the resize event on window after load.

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

answered Aug 7, 2016 at 19:05

Zdenek Hatak

1,14514 silver badges23 bronze badges

2 Comments

Vicente Olivert Riera Over a year ago

Good idea, if you put that code between $(window).on('load', function(){ ... });

Zdenek Hatak Over a year ago

I don't think this is necessary - plnkr.co/edit/8X3LtVxVNnRwp3bzjmAv?p=preview

Vicente Olivert Riera · Accepted Answer · 2016-08-07 19:06:55Z

0

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
});

answered Aug 7, 2016 at 19:06

Vicente Olivert Riera

1,27010 silver badges15 bronze badges

Collectives™ on Stack Overflow

Execute jQuery function after page refresh

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related