Modify the background color of one div based on the visibility of another div

Question

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds.

I am curious if it is feasible to adjust the background color of #social-media-feeds depending on which div in the carousel is currently displayed.

For instance, when the Twitter div is showing, I would like the background color of #social-media-feeds to be #00aced. Similarly, when the Facebook div is displayed, the background color should change to #3b5998, and when the LinkedIn div is visible, the background color should become #007bb5.

If this customization is possible, I would greatly appreciate some guidance. Thank you!

javascript jquery html css

Answer 1

Answer №1

This code may not be perfect, but it gets the job done. It's hard to say what your code looks like, so I hope this example can offer some guidance:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
            }
            #social-media-feeds {
                display: inline-block;
                height: 100%;
                width: 100%;
            }
            .post {
                display: none;
            }
            #leftButton {
                position: absolute;
                top: 50%;
                left: 0%;
                height: 30px;
                width: 60px;
                text-align: right;
                background-color: gray;
                cursor: pointer;
            }
            #rightButton {
                position: absolute;
                top: 50%;
                right: 0%;
                height: 30px;
                width: 60px;
                background-color: gray;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="leftButton"><</div>
        <div id="rightButton">></div>
        <div id="social-media-feeds">
            <div id="facebook" class="post">Facebook</div>
            <div id="twitter" class="post">Twitter</div>
            <div id="linkedIn" class="post">LinkedIn</div>
        </div>
        <script>
            var socialMediaFeedsDiv = document.getElementById('social-media-feeds');
            var backgroundColors = ["#3b5998", "#00aced", "#007bb5"];
            var posts = document.getElementsByClassName('post');
            var index = 0;
            posts[index].style.display = 'inline-block';
            socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];    
            var leftButton = document.getElementById('leftButton');
            leftButton.addEventListener('click', function() {
                posts[index].style.display = 'none';
                index--;
                if (index < 0) {
                    index = posts.length - 1;
                }
                posts[index].style.display = 'inline-block';
                socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
            });
            var rightButton = document.getElementById('rightButton');
            rightButton.addEventListener('click', function() {
                posts[index].style.display = 'none';
                index++;
                if (index > (posts.length - 1)) {
                    index = 0;
                }
                posts[index].style.display = 'inline-block';
                socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
            });
        </script>
    </body>
</html>

Answer 2

This code may not be perfect, but it gets the job done. It's hard to say what your code looks like, so I hope this example can offer some guidance:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
            }
            #social-media-feeds {
                display: inline-block;
                height: 100%;
                width: 100%;
            }
            .post {
                display: none;
            }
            #leftButton {
                position: absolute;
                top: 50%;
                left: 0%;
                height: 30px;
                width: 60px;
                text-align: right;
                background-color: gray;
                cursor: pointer;
            }
            #rightButton {
                position: absolute;
                top: 50%;
                right: 0%;
                height: 30px;
                width: 60px;
                background-color: gray;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="leftButton"><</div>
        <div id="rightButton">></div>
        <div id="social-media-feeds">
            <div id="facebook" class="post">Facebook</div>
            <div id="twitter" class="post">Twitter</div>
            <div id="linkedIn" class="post">LinkedIn</div>
        </div>
        <script>
            var socialMediaFeedsDiv = document.getElementById('social-media-feeds');
            var backgroundColors = ["#3b5998", "#00aced", "#007bb5"];
            var posts = document.getElementsByClassName('post');
            var index = 0;
            posts[index].style.display = 'inline-block';
            socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];    
            var leftButton = document.getElementById('leftButton');
            leftButton.addEventListener('click', function() {
                posts[index].style.display = 'none';
                index--;
                if (index < 0) {
                    index = posts.length - 1;
                }
                posts[index].style.display = 'inline-block';
                socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
            });
            var rightButton = document.getElementById('rightButton');
            rightButton.addEventListener('click', function() {
                posts[index].style.display = 'none';
                index++;
                if (index > (posts.length - 1)) {
                    index = 0;
                }
                posts[index].style.display = 'inline-block';
                socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
            });
        </script>
    </body>
</html>

Modify the background color of one div based on the visibility of another div

Answer №1

Similar questions

The problem of JSON data being displayed instead of redirecting is persistent

Animate the sliding of divs using the JavaScript animation function

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Using setTimeout with drag and drop functionality in HTML

Uploading video files using XMLHttpRequest encountered an error on a particular Android device

Achieving functionality with a fixed header

Combining React with a jQuery plugin

The setInterval function will run just one time when triggered by an onclick event

Using asynchronous import statements in Vue allows for more efficient loading of components

Using Vuejs to dynamically render a select dropdown based on the initial selection made in the first dropdown menu

Adding content to a paragraph using Jquery

Can anyone point out where the mistake lies in my if statement code?

Mobile device scrolling glitch

JS Emphasis on Scrolling Div

Having trouble sending values via POST request in Node.js using Express

tips on sending multiple data- id in a modal window

Creating HTML code from a template using different programs

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

Applying CSS transition delays to multiple images

Encountering an issue while attempting to make changes and test a copied GitHub library - npm ERROR! version cannot be located