Adrian.I Adrian.I - 4 months ago 17
CSS Question

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

Answer

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