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

Navigating the process of transferring a function to a functional component within React

Utilizing JavaScript to assign class names to dynamically created elements from objects

Newcomers to Visual Studio Code facing a problem with images not displaying

Enable the Chrome extension to interact with the RESTAPI

What could be the reason for Angular to merge the element at index 0 of an array into a subarray instead of doing

Using Material-UI HOC with props传递

Merging the outcomes of a JSON call

Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

magnify within a div with a set width

The Socket IO server fails to broadcast a message to a designated custom room

Unable to set CSS image as background

Removing buttons from a table row dynamically

Dealing with callback errors: error handling is anticipated

The issue with Mongoose populate failing to populate

"Troubleshooting a JSON structure containing a complex array of objects with multiple layers

Utilizing React Native to dynamically generate buttons through a loop

What is the reason behind jQuery appending a closing tag to the end of the text when adding a table dynamically?

When interacting with the iframe in an Ionic3 app, it suddenly crashes

The function generalChannel.send does not exist

SignalR gets stuck on the 'Initiating start request' screen, halting all progress