6 Replies Latest reply: May 6, 2012 10:07 AM by sudarshan.t RSS

    Help: Changing the Font Colour of Text in a Table Using Button

    Reece92 Community Member

      Hello everyone,

       

      I am designing a website for a college project in Dreamweaver CS3. I am currently trying to implement accessibility for users, by creating a background/font colour changer. By making the table transparent, I am now able to make the whole background colour change. However, I am struggling to change the font colour.

       

      To see what I mean, here is the website so far: http://itsupport.comlu.com/index.html

       

      At the top left, you'll notice buttons. This is the colour changer.

       

      The problem of course, is that the text is unreadable when I change to say, a white background.

       

      The following is my code for the buttons:

       

      <!--Colour Changer-->

      <form>

      <input type="button"

      value="White" style="Background: white;"

      onClick="document.body.style.backgroundColor = '#FFFFFF';Table1.fgColor='#000000';">


      <input type="button"

      value="Green" style="Background: green;"

      onClick="document.body.style.backgroundColor = '#008000';document.fgColor='#FFFF00';">


      <input type="button"

      value="Blue" style="Background: blue;"

      onClick="document.body.style.backgroundColor = '#0000CC';document.fgColor='#FFFFFF';">


      <input type="button"

      value="Red" style="Background: red;"

      onClick="document.body.style.backgroundColor = '#FF0000';document.fgColor='#FFFF00';">

      </form>

       

      The table is named "Table1". I am guessing that I have to refer to this in some way, but I have no idea how. You can see in the White button code I have tried "Table1.fgColor" as well as some similar variations.

       

      I know many of you will just say "don't use tables". Yeah, I learned that the hard way. Unfortunately I don't have long to complete this project so I do not wish to recreate the entire website using div tags.

       

      Thanks in advance!

        • 1. Re: Help: Changing the Font Colour of Text in a Table Using Button
          Reece92 Community Member

          I also forgot to mention that I will be changing the background colours when this issue is solved to more pastille-like colours that are easy on the eyes. If anyone can give me additional info on accessible background/font combinations (in terms of colour blindness, dyslexia, poor eyesight, etc.) that would be greatly appreciated.

          • 2. Re: Help: Changing the Font Colour of Text in a Table Using Button
            sudarshan.t MVP

            I'd highly recommend that you check out Jar Two's Wheel Color Picker and let users customize end-to-end. This is a jQuery plugin and is fully cross-compatible unlike the form buttons to change colors. Visit this page: http://www.jar2.net/projects/jquery-wheelcolorpicker

            • 3. Re: Help: Changing the Font Colour of Text in a Table Using Button
              sudarshan.t MVP

              If you're looking at choosing the right set of colors, try out http://kuler.adobe.com - a brilliant place to start for color combinations/ swatches.

              • 4. Re: Help: Changing the Font Colour of Text in a Table Using Button
                osgood_ MVP

                You most likely need to do this with a css style switcher. Here's one that uses jquery.

                 

                http://www.cssnewbie.com/example/stylesheet-switcher/

                • 5. Re: Help: Changing the Font Colour of Text in a Table Using Button
                  Reece92 Community Member

                  Thank you very much to both of you for your help.

                   

                  @osgood_, I have first attemtped your stylesheet switcher, I should have made this clear before but I am very new, bad and illiterate with coding. So this may seem incredibly stupid but I am stuck at a certain point in the tutorial: under the heading "The jQuery".

                   

                  I am not sure where to put this code, as it is not used in the HTML example. Is the jQuery a seperate file? The reason I ask is because I see at the top of the exmaple's code: "<script type="text/javascript" language="javascript" src="../../js/jquery/jquery.cookie.js"></script>". I currently have no ".js" files in my directory.

                   

                  If you'd find it easier, here is my code so far:

                   

                  <!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=utf-8" />

                  <!-- TemplateBeginEditable name="doctitle" -->

                  <title>Reece's IT Support</title>

                  <!-- TemplateEndEditable -->

                   

                   

                  <link rel="stylesheet" type="text/css" href="style1.css" />

                  <script type="text/javascript" language="javascript" src="../../js/jquery/jquery.js"></script>

                  <script type="text/javascript" language="javascript" src="../../js/jquery/jquery.cookie.js"></script>

                  <script>

                                      if($.cookie("css")) {

                                                $("link").attr("href",$.cookie("css"));

                                      }

                            $(document).ready(function() {

                                      $("#nav li a").click(function() {

                                                $("link").attr("href",$(this).attr('rel'));

                                                $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});

                                                return false;

                                      });

                            });

                  </script>

                   

                   

                  <script type="text/javascript">

                  function Up()

                  {

                  window.location.hash="Down";

                  }

                  </script>

                   

                   

                  <style type="text/css">

                  <!--

                  body {

                            background-color: #0000CC;

                  }

                  body,td,th {

                            color: #FFFFFF;

                            padding-bottom: 4px;

                            padding-left: 4px;

                            padding-right: 4px;

                            padding-top: 4px;

                  }

                   

                   

                  #anchor-tag{

                            color: #fff;

                  }

                   

                   

                  #anchor-tag:hover{

                            color: #fff;

                  }

                   

                   

                  #anchor-tag:active{

                            color:#fff;

                  }

                  -->

                  </style>

                   

                   

                  <style type="text/css">

                  ul.MenuBarVertical

                  {

                            margin: 0 auto ;

                            width: 8em;

                  }

                  a:link {

                            color: #FBFBFD;

                  }

                  a:hover {

                            color: #FFFF00;

                  }

                  a:visited {

                            color: #00FF00;

                  }

                   

                   

                  a:active {

                            color: #FFFF00;

                  }

                  .style19 {font-size: larger}

                   

                   

                  table{margin:0 auto;}

                  </style>

                  <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

                  <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                  <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

                  <style type="text/css">

                  ul.MenuBarVertical

                  {

                            margin: 0 auto;

                            width: 8em;

                   

                  }

                  .style22 {

                            font-size: xx-large

                  }

                  .style23 {font-family: Arial, Helvetica, sans-serif}

                  .style24 {

                            font-size: 75px;

                            font-family: Arial, Helvetica, sans-serif;

                  }

                  </style>

                   

                   

                  <style type="text/css">

                    @import url("csscolourtest.css" );

                  </style>

                   

                   

                   

                   

                  <SCRIPT LANGUAGE="JavaScript">

                   

                   

                  <noscript> your browser does not support JavaScript!</noscript>

                   

                   

                  </SCRIPT>

                   

                   

                   

                   

                  <style type="text/css">

                    @import url("csscolourtest.css" );

                  </style>

                   

                   

                   

                   

                  <SCRIPT LANGUAGE="JavaScript">

                   

                   

                  <noscript> your browser does not support JavaScript!</noscript>

                   

                   

                  </SCRIPT>

                   

                   

                  </head>

                   

                   

                  <body>

                   

                   

                  <!--Colour Changer-->

                  <form>

                  <input type="button"

                  value="White" style="Background: white;"

                  onClick="document.body.style.backgroundColor = '#FFFFFF';document.fgColor='#FF0000';">

                   

                  <input type="button"

                  value="Green" style="Background: green;"

                  onClick="document.body.style.backgroundColor = '#008000';document.fgColor='#FFFF00';">

                   

                  <input type="button"

                  value="Blue" style="Background: blue;"

                  onClick="document.body.style.backgroundColor = '#0000CC';document.fgColor='#FFFFFF';">

                   

                  <input type="button"

                  value="Red" style="Background: red;"

                  onClick="document.body.style.backgroundColor = '#FF0000';document.fgColor='#FFFF00';">

                   

                   

                  </form>

                  <!--End Colour Changer-->

                   

                   

                                      <ul id="nav">

                                                <li><a href="#" rel="style1.css">White</a></li>

                                                <li><a href="#" rel="style2.css">Red</a></li>

                                                <li><a href="#" rel="style3.css">Green</a></li>

                                      </ul>

                   

                   

                  <table width="718" height="681" border="0" cellpadding="0" cellspacing="0" bordercolor="#F0F0F0" bgcolor="transparent" name="Table1" id="Table1">

                    <tr>

                      <td height="74" colspan="2"><p align="center" class="style24">Reece's IT Support</p>

                        <p align="center" class="style19">This is NOT a real website, this is a college project.</p>

                        </td>

                    </tr>

                   

                    <tr>

                      <td width="177" height="510" valign="top" ><ul class="MenuBarVertical style22 style23" bgcolor="transparent" id="MenuBar1">

                        <li><a href="../index.html">Home</a> </li>

                        <li><a href="../enterprise.html">Enterprise Support</a></li>

                        <li><a href="../smallcompany.html">Small Company Support</a> </li>

                        <li><a href="../homesupport.html">Home Support</a></li>

                        <li>

                          <div align="left"><a href="../faq.html">FAQ</a></div>

                        </li>

                        <li><a href="../about.html">About Us</a></li>

                        <li><a href="../contactus.html">Contact Us</a></li>

                        <li><a href="../feedback.html">Feedback</a></li>

                      </ul>    </td>

                      <td width="541" valign="top"><div><!-- TemplateBeginEditable name="EditRegion3" --><!-- TemplateEndEditable --></div></td>

                    </tr>

                    <tr>

                      <td height="23" colspan="2"><div align="center"></div></td>

                    </tr>

                  </table>

                   

                   

                   

                   

                  <script type="text/javascript">

                  <!--

                  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

                  //-->

                  </script>

                  <form>

                    <h1> </h1>

                  </form>

                   

                   

                  </body>

                  </html>

                  • 6. Re: Help: Changing the Font Colour of Text in a Table Using Button
                    sudarshan.t MVP

                    You could download the .js files from the example site you referred to. Or, you could use a CDN hosted service and link your page to the .js files from there.

                     

                    You could link jquery.js from Google -  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

                     

                    Code will be within your <head></head> tags as follows:

                     

                    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

                    You could also download these .js files locally and link them on your own server.

                     

                    This is a jQuery CDN repository: http://code.jquery.com/

                    You could also use other CDN's - http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery