Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / change background color of window when window is resized
Ask Question

Change background color of window when window is resized

Ethan Karla 361 28 Jul 2021

How to change background color of window when window is resized?

jquery jquery
Updated 27 Nov 2023
Ethan Karla
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Message

1 Answers

Aryan Kumar
Aryan Kumar 27 Nov 2023
Report Abuse

If you want to check the background color of the window when it's resized and do something based on that in jQuery, you can use the $(window).resize() event. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Check Background Color on Window Resize</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffff; /* Set your default background color */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<script>
  $(document).ready(function () {
    // Initial check on document ready
    checkBackgroundColor();

    // Check on window resize
    $(window).resize(function () {
      checkBackgroundColor();
    });

    function checkBackgroundColor() {
      // Get the background color of the body element
      var bgColor = $('body').css('background-color');

      // Display the background color in the console (you can replace this with your logic)
      console.log('Background Color:', bgColor);

      // Example: Change something based on the background color
      if (bgColor === 'rgb(255, 255, 255)') {
        // Change something for white background
        console.log('White background detected.');
      } else {
        // Change something for non-white background
        console.log('Non-white background detected.');
      }
    }
  });
</script>

</body>
</html>

In this example:

  • The initial background color is set using CSS.
  • The $(window).resize() event is used to trigger the checkBackgroundColor function whenever the window is resized.
  • The checkBackgroundColor function gets the background color of the body and logs it to the console. You can replace the console.log statements with your desired logic based on the background color.

Remember to adjust the logic inside the checkBackgroundColor function according to your specific requirements.

advertising