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

    How can I allow users to change background and font color?

    I'm trying to create a page where a user can choose which background/font color theme they would like (I'm using the four Harry Potter houses). So far, I have four radio buttons, and I've gotten the background colors to work. However, I'm having trouble with the font colors. I tried adding 'document.fgColor' under the if statements, but that ends up making all four options the same font color, rather than different colors.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
    <title>Shopping Cart</title>
    <link rel="stylesheet" type="text/css" href="shoppingcart.css">
    
    <script language="JavaScript">
    nowcolor="800517";
    expiredate= new Date;
    expiredate.setMonth(expiredate.getMonth() + 6);
    
    if (document.cookie != "") {
       nowcolor=cookieVal("mycolor"); 
    } /* end if cookie */
    
    
    function setCookie() {
      document.bgColor="#" + nowcolor;
      document.cookie="mycolor=" + nowcolor + ";expires="  +  expiredate.toGMTString();
    } /* end function setCookie  */
    
    function cookieVal(cookieName) {
       thisCookie = document.cookie.split("; ");
       for (i=0; i<thisCookie.length; i++ ) {
          if (cookieName == thisCookie[i].split("=") [0] )
                 return thisCookie[i].split("=") [1]
          } /* end for i */
          
        return null  /* i.e., the cookie was not found! */
    }   /*end of function cookieVal */
    
    </script>	
    </head>
    
    <body>
    <div id=header>
    <center><img src="harry_potter.jpg" width=658 height=100></center>
    </div>
    
    <div id=menu>
    <ul>
    <li>
    <a href="assign5.php">Personal Info</a>
    <HR size="1" width="150" color="black">
    </li>
    <li>
    <a href="assignments.html">Product Choice</a>
    <HR size="1" width="150" color="black">
    </li>
    <li>
    <a href="http://cs.nyu.edu/courses/spring13/CSCI-UA.0061-001/index.html">Confirmation</a>
    <HR size="1" width="150" color="black">
    </li>
    <li>
    <a href="lesmiserables.html">Order</a>
    <HR size="1" width="150" color="black">
    </li>
    <li>
    <a href="tangled.html">Reset Order Info</a>
    <HR size="1" width="150" color="black">
    </li>
    </ul>
    
    <br><br>
    
    <script language="JavaScript">
    document.bgColor="#" + nowcolor;
     
    document.write("<p><p><table border='0' width='150' fgcolor='#000000' bgcolor='#ffffff'> <tr> <td>Choose your house!</td></tr>");
      
    document.write("<tr><td> <input type='radio' name='colorType' value='800517' onClick='nowcolor=this.value; setCookie()' spanid='color1'");
      if (nowcolor=="800517") {
     	 //document.fgColor='#FCCE15';
      	 document.write(" CHECKED "); }
      document.write("> Gryffindor</td> </tr> ");
      
    document.write("<tr><td> <input type='radio' name='colorType' value='003300' onClick='nowcolor=this.value; setCookie()'");
      if (nowcolor=="003300") {
         //document.fgColor='#AAA98C';
         document.write(" CHECKED "); }
      document.write("> Slytherin</td> </tr> ");
      
    document.write("<tr><td> <input type='radio' name='colorType' value='182071' onClick='nowcolor=this.value; setCookie()'");
      if (nowcolor=="182071") {
      	 //document.fgColor='#98594A";
         document.write(" CHECKED "); }
      document.write("> Ravenclaw</td> </tr> ");
      
    document.write("<tr><td> <input type='radio' name='colorType' value='E9AC2D' onClick='nowcolor=this.value; setCookie()'");
      if (nowcolor=="E9AC2D") {
         //document.fgColor='#000000";
         document.write(" CHECKED "); }
      document.write("> Hufflepuff</td> </tr> ");
      
      document.write ("</table>");
    </script>
    </div>
    
    <div id=content>
    <form>
    Name: <input type="text" name="name"><br><br>
    Email: <input type="text" name="email"> @nyu.edu <br><br>
    Address: <input type="text" name="street"><br><br>
    City: <input type="text" name="city"><br><br>
    State: <input type="text" name="state"> 
    Zip Code: <input type="text" name="zipcode"><br><br>
    Country: <input type="text" name="country"><br><br>
    <input type="submit" name="submit" value="Submit Your Info">
    </form>
    </div>
    
    
    
    </body>
    </html>
    Any help would be great! Thanks

  • #2
    New Coder
    Join Date
    Apr 2013
    Posts
    38
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Thumbs up

    I think it would be great if we could change the tabs background color and the
    font color to enhance contrast (or at least the background color of the tab's
    label), letting the users to choose different colors for both active and
    inactive tabs.
    We offer Website Development with 5 years expertise in Joomla Development and ecommerce development.

  • #3
    Regular Coder
    Join Date
    May 2012
    Location
    USA
    Posts
    102
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Below is a sample of how you could do this: http://dynamicdrive.com/dynamicindex...etswitcher.htm


  •  

    Posting Permissions

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