jQuery - Change background color of body using conditional statement

Question

I have some divs and by default only one is visible and all others are hidden. Every div has a different background color. Based on some buttons when are clicked , different divs are displayed.

I need to check which div is displayed and based on that I want to change the body background NOT on button click event.

I have some other buttons next/prev that move into divs, and if I change color on button click when I use those buttons the color stay the same for all divs!! For that i want to make an independent function that will check when divs are changed?

I have a jQuery code, which when a div i displayed the condition is true $('#divID').css('display') == 'block' is true the background color should be changed but it's not working!.

jsfiddle: DEMO My HTML code:

<body>
<br/><br/><br/>
<div id="ad1" style="display:block;" > Div content 1</div><br/>
<div id="ad2" style="display:none;"  > Div content 2</div><br/>
<div id="ad3" style="display:none;"  > Div content 3</div><br/>
<div id="ad4" style="display:none;"  > Div content 4</div><br/>
<br/><br/><br/>
<button id='button1'> click 1</button>
<button id='button2'> click 2</button>
<button id='button3'> click 3</button>
<button id='button4'> click 4</button>
</body>

and jquery code:

$(document).ready(function () {  
    if($('#ad1').css('display') == 'block'){
        $("body").css('background-color', '#ebb614');
    } 
    if($('#ad2').css('display') == 'block'){
        $("body").css('background-color', '#acb7a8');
    } 
    if($('#ad3').css('display') == 'block'){
        $("body").css('background-color', '#4f795b');
    } 
    if($('#ad4').css('display') == 'block'){
        $("body").css('background-color', '#7f7a6e');
    } 

    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
    });
});

Hint: $('#left-info1').is(':visible') is a more traditional way of determining if that element is visible — Jamiec
– Jamiec, Commented Oct 9, 2015 at 12:50
Check this. If this is what you need then I'll add my answer? — Deepak Biswal
– Deepak Biswal, Commented Oct 9, 2015 at 12:54
you are not changing background on click event? Which is missing? — Deepak Biswal
– Deepak Biswal, Commented Oct 9, 2015 at 12:54
@GuilhermeFerreira i edited my question, that mistake i did only on jsfiddle! — user5308956
– user5308956, Commented Oct 9, 2015 at 13:13

Jayesh Goyani · Accepted Answer · 2015-10-09 13:13:37Z

Please try with the below code snippet or demo.

Method 1:

<body> 
<br />
<br />
<div id="ad1" style="display: block;">Div content 1</div>
<br />
<div id="ad2" style="display: none;">Div content 2</div>
<br />
<div id="ad3" style="display: none;">Div content 3</div>
<br />
<div id="ad4" style="display: none;">Div content 4</div>
<br />
<br />
<br />
<br />
<button id='button1'>click 1</button>
<button id='button2'>click 2</button>
<button id='button3'>click 3</button>
<button id='button4'>click 4</button>

<script>

    $(document).ready(function () {


        $('#button1').on('click', function () {
            $('#ad1').show();
            $('#ad2 ,#ad3 , #ad4').hide();
            test(1);
        });
        $('#button2').on('click', function () {
            $('#ad2').show();
            $('#ad1 ,#ad3 , #ad4').hide();
            test(2);
        });
        $('#button3').on('click', function () {
            $('#ad3').show();
            $('#ad2 ,#ad1 , #ad4').hide();
            test(3);
        });
        $('#button4').on('click', function () {
            $('#ad4').show();
            $('#ad2 ,#ad3 , #ad1').hide();
            test(4);
        });
    });

    function test(id) {

        if (id == 1) {
            $("body").css('background-color', '#ebb614');
        }
        if (id == 2) {
            $("body").css('background-color', '#acb7a8');
        }
        if (id == 3) {
            $("body").css('background-color', '#4f795b');
        }
        if (id == 4) {
            $("body").css('background-color', '#7f7a6e');
        }
    }

</script>
<style>
    body {
        height: 5000px;
        background-color: #4e795b;
        margin: 0px;
        padding: 0px;
    }
</style>
</body>

Method 2:

<body>
    <div id="ad1" style="display: block;">Div content 1</div>
    <br />
    <div id="ad2" style="display: none;">Div content 2</div>
    <br />
    <div id="ad3" style="display: none;">Div content 3</div>
    <br />
    <div id="ad4" style="display: none;">Div content 4</div>
    <br />
    <br />
    <br />
    <br />
    <button id='button1'>click 1</button>
    <button id='button2'>click 2</button>
    <button id='button3'>click 3</button>
    <button id='button4'>click 4</button>

    <script>

        $(document).ready(function () {


            $('#button1').on('click', function () {
                $('#ad1').show();
                $('#ad2 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button2').on('click', function () {
                $('#ad2').show();
                $('#ad1 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button3').on('click', function () {
                $('#ad3').show();
                $('#ad2 ,#ad1 , #ad4').hide();
                test();
            });
            $('#button4').on('click', function () {
                $('#ad4').show();
                $('#ad2 ,#ad3 , #ad1').hide();
                test();
            });
        });

        function test(id) {
            if ($('#ad1').css('display') == 'block') {
                $("body").css('background-color', '#ebb614');
            }
            if ($('#ad2').css('display') == 'block') {
                $("body").css('background-color', '#acb7a8');
            }
            if ($('#ad3').css('display') == 'block') {
                $("body").css('background-color', '#4f795b');
            }
            if ($('#ad4').css('display') == 'block') {
                $("body").css('background-color', '#7f7a6e');
            }
        }

    </script>
    <style>
        body {
            height: 5000px;
            background-color: #4e795b;
            margin: 0px;
            padding: 0px;
        }
    </style>
</body>

Below issue is exists in your given code: 1. you have implemented background color change logic in document.ready() but you have to recall this logic on every click event to change the background color. 2. you have added ID tag twice in your DIV.

This is not correct what I guess. In provided HTML there are 2 id properties which is not correct first. And then you are strictly hiding some element so why to check visible again. It will work but not perfect.
1+ I think adding some explanation will be nice and result in more upvotes.
@DeepakBiswal I have some other buttons next/prev that move into divs, and if I change color on button click when I use those buttons the color stay the same for all divs!! For that i want to make an independent function that will check when divs are changed?

Gaurav Sachan · Accepted Answer · 2015-10-09 12:59:59Z

You need to update background color on every button click because if condition will only check on document ready.

 $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
         $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });

here is the fiddle

epascarello · Accepted Answer · 2015-10-09 13:27:34Z

0

"For that i want to make an independent function that will check when divs are changed?" You answered your question right there.

You answered your question right there. Put it in a function. Call it when they click and when the page loads.

In your code, you only set the background color on load. You need to run the check every time you change the visibility of the tabs. So put that code inside of a method and trigger it when the button is clicked or just put the line that sets the BG color in the click methods.

OR

You can simplify the code by using data attributes and simple selectors to select the other elements. No need for huge if else blocks with repeated code.

$("button[data-id]").on("click", function(){
  var btnClicked = $(this).addClass("active");  //The button that was clicked
  btnClicked.siblings(".active").removeClass("active");
  $("body").css("background-color", btnClicked.data("color"));  //read the data attribute and set color
  $(".data.active").removeClass("active");  //remove the class from element that was already selected
  $(btnClicked.data("id")).addClass("active");  //add the active class so content shows up
});
$("#button1").click();  //Activate the first tab

$("button.page").on("click", function(){  
  var dir = $(this).data("dir"),
      btnTabs = $("button[data-id]"),
      activeBtn = btnTabs.filter(".active"),
      nextBtn;
  if (dir=="1") {
      nextBtn = activeBtn.next();
      if (nextBtn.length===0) {
        nextBtn = btnTabs.first();
      }
  } else {
      nextBtn = activeBtn.prev();
      if (nextBtn.length===0) {
        nextBtn = btnTabs.last();
      }    
  }
  nextBtn.click();  
});

.data { display :none; }
.data.active { display : block; }

button.active { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad1" class="data" id="left-info1"> Div content 1</div><br/>
<div id="ad2" class="data" id="left-info2"> Div content 2</div><br/>
<div id="ad3" class="data" id="left-info3"> Div content 3</div><br/>
<div id="ad4" class="data" id="left-info4"> Div content 4</div><br/>
<br/><br/><br/>
<div>
    <button id='button1' data-id="#ad1" data-color="#ebb614"> click 1</button>
    <button id='button2' data-id="#ad2" data-color="#acb7a8"> click 2</button>
    <button id='button3' data-id="#ad3" data-color="#4f795b"> click 3</button>
    <button id='button4' data-id="#ad4" data-color="#7f7a6e "> click 4</button>
</div>
<hr/>
<button class="next page" data-dir="-1">Prev</button>
<button class="next page" data-dir="1">Next</button>

edited Oct 9, 2015 at 13:27

answered Oct 9, 2015 at 13:05

epascarello

208k20 gold badges206 silver badges246 bronze badges

4 Comments

user5308956 Over a year ago

I have some other buttons next/prev that move into divs, and if I change color on button click when I use those buttons the color stay the same for all divs!! For that I want to make an independent function that will check when divs are changed?!

epascarello Over a year ago

So add in the functionality...Find the "next" button and click it.

epascarello Over a year ago

Added next/prev logic just to show you it is possible.

user5308956 Over a year ago

that's great! Thanks :)

Igor Ivancha · Accepted Answer · 2016-02-08 11:56:54Z

So I'm using a class to handle then buttons and also the divs instead. Also using attributes to have the backgorund colors and they are defined inside each div that have background-changer class. It's a simple solution and also uses on single event to handle all this.

UPDATE:

Added the Next/Prev Feature once saw you requested it on the other answer. Keeping the simple code.
No using single event. Now its also using document.ready to start application

jsfiddle-link

<div id="ad1" class="background-changer active" data-background-color="#f00"  > Div content 1</div><br/>
<div id="ad2" class="background-changer" data-background-color="#0f0" > Div content 2</div><br/>
<div id="ad3" class="background-changer" data-background-color="#00f" > Div content 3</div><br/>
<div id="ad4" class="background-changer" data-background-color="#444" > Div content 4</div><br/>

<button id='button1' class="show-div-button" data-div-id="ad1"> click 1</button>
<button id='button2' class="show-div-button" data-div-id="ad2"> click 2</button>
<button id='button3' class="show-div-button" data-div-id="ad3"> click 3</button>
<button id='button4' class="show-div-button" data-div-id="ad4"> click 4</button>

<button class='show-div-button prev' data-div-id="">Prev</button>
<button class='show-div-button next' data-div-id="">Next</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
    activateDiv($(".background-changer.active").attr("id"));
})
$(document).on("click",".show-div-button",function(){
    activateDiv(this.getAttribute("data-div-id"));
})
function activateDiv(id){
    $bgchangerarray = $(".background-changer");
    id = id =='' ? $bgchangerarray[0].id : id; 
    var $bgchanger = $("#"+id);
    $bgchangerarray.hide().removeClass("active");
    $bgchanger.show().addClass("active");;
    var count = $bgchangerarray.size()-1, 
        index = $bgchanger.index('.background-changer'), 
        next = index==count ? 0 : index+1,
        prev = index==0 ? count : index-1;
    $(".show-div-button.prev").attr("data-div-id",$bgchangerarray[prev].id)
    $(".show-div-button.next").attr("data-div-id",$bgchangerarray[next].id)
    $("body").css("background-color",$bgchanger.attr("data-background-color")); 
}   
</script>

I added the prev/next feature since i saw you requested in the other answer. yet keeping it simple | SAP Run Simple!

Deepak Biswal · Accepted Answer · 2015-10-09 12:55:38Z

Here is a demo.

Try this code:

$(document).ready(function () {  
    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });
});

PROBLEM: In your code you are not changing the background on button click event. You just simply checking it in first load.

Collectives™ on Stack Overflow

jQuery - Change background color of body using conditional statement

5 Answers 5

3 Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related