The application of Jquery media queries does not take effect until the page is refreshed

Question

The application of Jquery media queries does not take effect until the page is refreshed

I've got this code on my page where the background color is working perfectly. However, I'm facing an issue with the li element - it doesn't update unless I refresh the page. For example, when the window size is smaller than 500px in width, the li elements are shown without needing to click anything.

function myFunction() {
  if ($(window).width() < 500) {
    $('body').css('background', 'black');
    $("nav").click(function() {
      $("li").toggle('slow');
    });
  } else {
    $('body').css('background', 'blue');
    $("li").show();
  }
}

jquery css media-queries

Answer 1

Answer №1

Implement your code within a function and execute it on page load and when the window is resized as shown below:


$(window).load(function(){
   //insert your function here
});
$(window).resize(function(){
  //insert your function here
});

Answer 2

Implement your code within a function and execute it on page load and when the window is resized as shown below:


$(window).load(function(){
   //insert your function here
});
$(window).resize(function(){
  //insert your function here
});

Answer 3

Answer №2

Make sure to also activate it on resize events, so when you resize the window, the queries will be triggered

$(window).on("load resize",function(){
  //your code should be placed here
  if ($(window).width() < 500) {
    $('body').css('background', 'black');
    $("nav").click(function() {
      $("li").toggle('slow');
    });
  } else {
    $('body').css('background', 'blue');
    $("li").show();
  }
}

Answer 4

Make sure to also activate it on resize events, so when you resize the window, the queries will be triggered

$(window).on("load resize",function(){
  //your code should be placed here
  if ($(window).width() < 500) {
    $('body').css('background', 'black');
    $("nav").click(function() {
      $("li").toggle('slow');
    });
  } else {
    $('body').css('background', 'blue');
    $("li").show();
  }
}

Answer 5

Answer №3

$("nav").click(function() {
  $("li").toggle('slow');
});

function myFunction() {
  if ($(window).width() < 500) {
    $('body').css('background-color', 'black');
  } else {
    $('body').css('background-color', 'blue');
    $("li").show();
  }
}

It is recommended to use background-color instead of just background
Consider placing the click event outside the function for better organization.
If myFunction is intended to be triggered on either a resize or load event, make sure it is properly implemented.

Answer 6

$("nav").click(function() {
  $("li").toggle('slow');
});

function myFunction() {
  if ($(window).width() < 500) {
    $('body').css('background-color', 'black');
  } else {
    $('body').css('background-color', 'blue');
    $("li").show();
  }
}

It is recommended to use background-color instead of just background
Consider placing the click event outside the function for better organization.
If myFunction is intended to be triggered on either a resize or load event, make sure it is properly implemented.

The application of Jquery media queries does not take effect until the page is refreshed

Answer №1

Answer №2

Answer №3

Similar questions

The ASP.NET MVC framework does not allow the passing of ajax data objects to controllers

Creating a diverse layout by dynamically adding divs without achieving uniformity in the grid

Customize the color of router-link text in your Vue.js app

Adjusting the width of a product slider based on window size changes using CSS media queries

What is the best way to add new content to the top of existing content within a DIV using jquery?

Displaying a carousel of cards with a stacking effect using CSS and React

I am endeavoring to send out multiple data requests using a function, ensuring that the code execution occurs only once all the results have been received

What are the advantages of going the extra mile to ensure cross-browser compatibility?

Having trouble with my PHP/AJAX code - the Ajax request to PHP isn't functioning correctly, causing the rows not

Utilize the text input to occupy the remaining space within a row, flanked by two other elements

Can minification of JS be achieved in a Jekyll environment?

"Creating a dynamic dropdown menu and sub-menu in PHP using MySQLi with unique slug values

Use AJAX to send a form submission along with an anchor tag

Using jQuery to retrieve the text content of child elements

Stacking elements in perfect alignment

Timer Does Not Appear to be Counting Down

apply a border-radius to the top right corner only without affecting the other sides or background

What is the best way to proceed with script execution once ajax has completed, without relying on synchronous calls or embedding content?

Analyzing neglected CSS in intricate websites

The grid feature in the Bones theme is malfunctioning and causing issues