How to change the background color of a DIV to a function using the "IF" condition button

Question

My question may be a bit vague, but here's what I have right now. Here is the fiddle I made

I need the More button to change the background color to orange each time the orange background button is pressed , and only if the Advanced div is still at the bottom of the screen (the “MORE” button is the slide show when it is pressed)

And some piece of code:

<script>

$(document).ready(function(){
 $('.chatbox').hide();
    $('#btn-chat').click(function() {
        $("#blk-collaboration .chatbox").slideToggle("slow",function(){
        $("#blk-collaboration #toggle").css("background","transparent");
    });
      $(this)//this is a button DOM element. wrapping in jQuery object.
      .toggleClass('wide'); // removing wide class so button became smaller.
    });
});

function changeColor(color) {
document.getElementById("circle").style.backgroundColor = color;
}

document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 



</script>

Here are the buttons ...

<input id="online" type="button" value="Online" />
<input id="offline" type="button" value="Offline" />
<input id="upcoming" type="button" value="Orange Background" />

I tried to figure it out, but the color is button still changing more, even if it is already inserted ...

Answer 1

$().ready

   $('input#upcoming').on('click', function(){

            $('a#toggle').css({'background':'#f4b066'});
             $('#btn-chat').css({'background':'#f4b066'});
        })

http://jsfiddle.net/vo0d9ubj/5/

Answer 2

, changeColor:

function changeOrange(color) {
 if ($('#btn-chat').hasClass('wide'))
     document.getElementById("btn-chat").style.backgroundColor = color;
}

, , ?

Answer 3

Check the condition $("#blk-collaboration .chatbox").is(':visible')whether the Advanced switches or not. Here I use a variable tempBottomto check for more div

Try this piece of query

var tempBottom=true;

function changeColor(color) {
    document.getElementById("circle").style.backgroundColor = color;
    }
function changeOrange(color) {
    if(tempBottom==true){
    $('.wide').css("background-color", "#f4b066");
    }
}
    document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
    document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
    document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 

        $(document).ready(function(){
     $('.chatbox').hide();
        $('#btn-chat').click(function() {
            $("#blk-collaboration .chatbox").slideToggle("slow",function(){
            $("#blk-collaboration #toggle").css("background","transparent");
                if( $("#blk-collaboration .chatbox").is(':visible')){
                    tempBottom=false;}else
                    { tempBottom=true;
                    }
        });
          $(this)//this is a button DOM element. wrapping in jQuery object.
          .toggleClass('wide'); // removing wide class so button became smaller.
        });
    });

Demo

Answer 4

In your case, here's how to do it ...

$("#upcoming").on("click", function(){  

    // check if 'More' button position is in between 100px from the bottom
   if( ($("#toggle").offset().top >= ($(window).scrollTop() + $(window).height() - 100))) {

      // change the color        
      $("center").css("background", "#eebe57");

   }    

}); 

FIDDLE (Scroll down the Javascript section!)