Utilizing jquery to dynamically adjust the content on my html page based on the page width. Upon the page being fully loaded (using the
$(document).ready(function({\\there is some code here!}));My objective is to hide the main menu on smaller page widths (less than 835px) and replace it with something else. Page resizing plays a crucial role in achieving this. Below is the code snippet I am using for this purpose:
function deleteMainMenu(){
var width = $(window).width();
if(width <= 835){
$("#main-menu").empty();
$("#main-menu").append('add some html code here');
$("#logo").attr('class', 'col-xs-6');
$("#main-menu").attr('class', 'col-xs-6');
}
else{
$("#logo").attr('class', 'col-sm-2');
$("#main-menu").attr('class', 'col-sm-10');
$("#main-menu").empty();
$("#main-menu:empty").append('reset my old html code');
}
}These functions are invoked with the following code:
$(document).ready(function(){
deleteMainMenu();
});
$( window ).resize(function(){
deleteMainMenu();
});
Although the code works flawlessly when I adjust the page size, if I initially set the page width to less than 835px and then refresh the page, nothing happens!
Upon testing it on my phone, the changes did not take effect immediately. Instead, the functions were executed only after scrolling.
What steps should I take next? Thanks in advance!