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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple problem involving colours

    Hi! first post here, so bear with me please
    Here is a clickable box which changes color and sends a hidden value upon submit.
    My problem is that I need to change the background-colors "green" and "red" to hex values like #f30 and #cf0, but it messes up the behavior of the box. I seem to have run out of ideas!

    Any help would be much appreciated.

    Here's the code :



    <html>
    <head>
    <title>testing</title>
    <script type="text/javascript">
    function toggleColor(obj,chkID,val)
    {
    var chk = document.getElementById(chkID);

    if (obj.style.backgroundColor == "red")
    {
    obj.style.backgroundColor = "green";
    chk.value = "";
    }
    else
    {
    obj.style.backgroundColor = "red";
    chk.value = "RED";
    }
    }
    </script>
    </head>
    <body>

    <div style="background-color:green; width: 50px; height: 50px;" onclick="toggleColor(this,'hdnCheckValue1')"></div>

    <form method="post" action="<?php echo $PHP_SELF;?>">
    <input type="hidden" id="hdnCheckValue1" name="hdnCheckValue1" value="GREEN"/>
    <input type="submit" name="submit" value="OK" />
    </form>

    <? echo $_POST['hdnCheckValue1']; ?>

    </body>
    </html>


  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Code:
    <head>
    <title>testing</title>
    <script type="text/javascript">
    function toggleColor(obj,chkID,val)
    {
      var chk = document.getElementById(chkID);
    
      if (obj.style.backgroundColor == "#ff0000")
      {
        obj.style.backgroundColor = "#00ff00";
        chk.value = "";
      }
      else
      {
        obj.style.backgroundColor = "#ff0000";
        chk.value = "RED";
      }
    }
    </script>
    </head>

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    excuse me butting in but IE returns HEX most others RBG

    to best to have a toggle property rather than the color value

    Code:
    <head>
    <title>testing</title>
    <script type="text/javascript">
    function toggleColor(obj,chkID,val)
    {
      var chk = document.getElementById(chkID);
    
      if (!obj.set)
      {
        obj.style.backgroundColor = "#00ff00";
        chk.value = "";
         obj.set=true;
      }
      else
      {
        obj.style.backgroundColor = "#ff0000";
        chk.value = "RED";
        obj.set=false;
      }
    }
    </script>
    </head>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    oh interesting, the value gets translated when it's applied. I had no idea.

    Well, there you go!

  • #5
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!
    I'm still having some trouble though.
    - Here is the original script in action: test 1
    - And here it is with your suggestions: test 2
    It seems that it still doesn't want to behave
    Do you have other suggestions?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    tis because of the submit refreshes the page

    Code:
    <html>
    <head>
    <title>testing</title>
    <script type="text/javascript">
    function toggleColor(obj,chkID,val)
    {
    var chk = document.getElementById(chkID);
    
    if (!obj.set)
      {
        obj.style.backgroundColor = "#00ff00"; //green
        chk.value = "";
        obj.set=true;
      }
      else
      {
        obj.style.backgroundColor = "#ff0000"; //red
        chk.value = "RED";
        obj.set=false;
      }
    }
    </script>
    </head>
    <body>
    
    <div style="background-color:#ff0000; width: 50px; height: 50px;" onclick="toggleColor(this,'hdnCheckValue1')"></div>
    
    <form method="post" action="/testing/06/test2.php">
    	<input type="hidden" id="hdnCheckValue1" name="hdnCheckValue1" value="GREEN"/>		
    	<input type="submit" name="submit" value="OK" />
    </form>
    
    GREEN
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers!

    OK I figured it out that way: colours are called via CSS


    <style type="text/css">
    .red {background-color:#ff0000;}
    .green {background-color:#00ff00;}
    </style>

    <script type="text/javascript">
    function toggleColor(obj,chkID,val)
    {
    var chk = document.getElementById(chkID);

    if (obj.className == "red")
    {
    obj.className = "green";
    chk.value = "";
    obj.set=true;
    }
    else
    {
    obj.className = "red";
    chk.value = "RED";
    obj.set=false;
    }
    }


  •  

    Posting Permissions

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