Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight background color for text when page loads

    Hi,

    As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off.

    But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now.

    I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    
    var btn = function () {
            var active = null, bcolor = '#84DFC1';
            if (this.attachEvent) this.attachEvent('onunload', function () {
                active = null;
            });
            return function (element) {
                if ((active != element) && element.style) {
                    if (active) active.style.backgroundColor = '';
                    element.style.backgroundColor = bcolor;
                    active = element;
                }
            };
        }();
    </script>
    </head>
    
    <body>
    <div onclick="btn(this);">ONE </div>
    
    <div onclick="btn(this);">TWO </div>
    
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    seems like a very complicated way of doing a very simple thing, but anyway...

    can you give the divs IDs?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    
    var btn = function () {
            var active = null, bcolor = '#84DFC1';
            if (this.attachEvent) this.attachEvent('onunload', function () {
                active = null;
            });
            return function (element) {
                if ((active != element) && element.style) {
                    if (active) active.style.backgroundColor = '';
                    element.style.backgroundColor = bcolor;
                    active = element;
                }
            };
        }();
    </script>
    </head>
    
    <body onload="btn(document.getElementById('one'))">
    <div id="one" onclick="btn(this);">ONE </div>
    
    <div id="two" onclick="btn(this);">TWO </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I have IDs on the divs

    Code:
    <div id="one" onclick="btn(this);">ONE </div><div id="two" onclick="btn(this);">TWO </div>
    If you know of a better way of doing this by all means please give me a better way.

    Although it is a little more complicated than what I've explained. Images display when the text buttons are clicked on. Since there's JS involved in displaying the images when the text is clicked on, I decided to use JS to color the button background. But can't figure out a way to color the background when the page loads.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    how about this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    
    function btn (thisdiv){
    thatdiv=thisdiv=="one"?"two":"one";
    document.getElementById(thisdiv).style.backgroundColor="#84DFC1"
    document.getElementById(thatdiv).style.backgroundColor="#FFFFFF"
    }
    </script>
    </head>
    <body >
    <div style="background-color:#84DFC1" id="one" onclick="btn(this.id);">ONE </div>
    <div id="two" onclick="btn(this.id);">TWO </div>
    </body>
    </html>
    Last edited by xelawho; 01-08-2012 at 01:36 PM.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't use onload in the body. I thought I typed that in the first post but must of accidentally deleted it. I wish I could use <body onload> then this would of been solved long ago. : (

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    have a look at my second suggestion, in the edited post above ^

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's good. Since you changed it a lot compared to the way it was before, I have to say it is better but it will actually be 4 buttons. I guess I can use id="two" for 3 buttons and id="one" for the onload button.

    I just noticed I have a class for rollovers and for the background color and with your code the rollovers don't work.


    Code:
    <style type="text/css">
    .tbtn {width:120px; height:50px; background-color:#333333}
    .tbtn:hover {width:120px; height:50px; background-color:#ff0000}
    </style>
    
    <script language="javascript" type="text/javascript">
    function btn (thisdiv){
    if(thisdiv=="one"){
    thatdiv="two"
        } else if (thisdiv=="two"){
    thatdiv="one"
        }
    document.getElementById(thisdiv).style.backgroundColor="#cae450"
    
    }
    </script>
    
    <div class="tbtn" id="one" style="background-color:#ff0000" onclick="btn(this.id);">ONE </div>
    
    <div class="tbtn" id="two" onclick="btn(this.id);">TWO </div>
    Last edited by PatMon; 01-08-2012 at 07:49 AM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by PatMon View Post
    it will actually be 4 buttons. I guess I can use id="two" for 3 buttons and id="one" for the onload button.

    I just noticed I have a class for rollovers and for the background color and with your code the rollovers don't work.
    slooooowly the information comes out.

    so, one starts red, the other three start black, when you roll over them they turn red and when you click on one it turns green and the others are red?

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forget it! I figured it out. Changed the code once again. I can't stand JS.

    yyyyyyyy

    yyyyyyyy
    Last edited by PatMon; 01-08-2012 at 09:13 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •