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 AI Tools Integration
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 Forums Change background color of window when window is resized – MindStick
Ask Question

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md