Why would Arial be placed before Helvetica when using font-family in CSS?

Toggle & Aggregate with CSS and JavaScript

I am tyring to simulate an application on the Web. I am trying to aggregate table cell values when the user clicks on a cell into a single form field (which will be hidden). I can get close but I don't know how to unset the table cell color or how to keep repetitions of the same day out of my field (if the user clicks a table cell more than once - the table cells should toggle). I have a simple table of days of the week. What I would like it to do are the following: a) hover over text changes text color and weight (using CSS) b) click on table cell text: 1. changes the table cell text to the highlight color (not weight) 2. sets a field on the form to be the cell's text 3. OK to click one, multiple, all table cells and their values will aggregate in the form field (separated by carriage returns): Mon Tues 4. If a field is clicked, and is clicked again: a) the table text reverts to default b) the value is removed from the form field Code follows: <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0> <TR> <TD class="date" WIDTH=34>Mon</TD> <TD class="date" WIDTH=34>Tue</TD> <TD class="date" WIDTH=34>Wed</TD> </TR> <TR> <TD class="date">Thu</TD> <TD class="date">Fri<</TD> <TD class="date">Sat</TD> </TR> <TR> <TD class="date">Sun/TD> <TD> </TD> <TD> </TD> </TR> </TABLE> I have tried using this with onClick in the table cells but using the A properties I can't toggle the cell formatting ( defualt = gray, first click = blue, second click = gray, etc.) <style rel="stylesheet" type="text/css"> .date {border: inset 0.01em; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white); float: left; text-align: center; } .date A:link { font-family:verdana, arial, helvetica; font-size:xx-small; text-decoration: none; color: gray; } .date A:visited { font-family:verdana, arial, helvetica; text-decoration: none; font-size:xx-small; color: blue; } .date A:hover { text-decoration: none; font-weight: bold; color: blue; } </style> I am open to any solution that works with CSS and JS. I have spent some time looking on the Web, so I am looking for working code not links. Thank you.
Answer:

Hi nosneb, Here is some code that, as far as I can tell, does what you want. However: I have only been able to test it with the Mozilla browser. If there is any problem using it with Internet Explorer, let me know and I will adapt it tomorrow when I have access to a Windows machine. Here is the stylesheet. Put it in a file "index.css". === table { border: 1px solid black; text-align: center; } td { border: 1px solid black; } td.date { color: gray; } td.hovering { color: black; font-weight: bold; } td.selected { color: red; } td.hoveringselected { color: red; font-weight: bold; } === Here is the HTML file. Put it in a file "index.html". === <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Toggle & Aggregate Demo</title> <link rel="stylesheet" type="text/css" href="index.css" title="standard"> <script type="text/javascript"> // Associative array to record which days are currently selected var days = new Object(); // Return the current table cell in a browser-independent way function cell(d) { if (document.getElementById) return document.getElementById(d); else return document.all[d]; } // Highlight the text when the mouse hovers over it function entered(d) { if (days[d]) cell(d).className = 'hoveringselected'; else cell(d).className = 'hovering'; } // Unhighlight the text when the mouse moves away function exited(d) { if (days[d]) cell(d).className = 'selected'; else cell(d).className = 'date'; } // Update things when the user clicks on some day function clicked(d) { // Toggle this day's entry in the associative array days[d] = !days[d]; // Set the color to show whether the day is selected if (days[d]) cell(d).className = 'hoveringselected'; else cell(d).className = 'hovering'; // Update the field that shows the cell's text document.forms['report'].elements['current'].value = d; // Update the multi-line list of selected days var selected = document.forms['report'].elements['selected']; selected.value = ''; if (days['Mon']) selected.value += 'Monday\n'; if (days['Tue']) selected.value += 'Tuesday\n'; if (days['Wed']) selected.value += 'Wednesday\n'; if (days['Thu']) selected.value += 'Thursday\n'; if (days['Fri']) selected.value += 'Friday\n'; if (days['Sat']) selected.value += 'Saturday\n'; if (days['Sun']) selected.value += 'Sunday\n'; } </script> </head> <body> <h1>Toggle & Aggregate Demo</h1> <h2>Click on the day names:</h2> <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0> <TR> <TD class="date" id="Mon" WIDTH=34 onmouseover="entered('Mon');" onmouseout="exited('Mon');" onmousedown="clicked('Mon');" > Mon</TD> <TD class="date" id="Tue" WIDTH=34 onmouseover="entered('Tue');" onmouseout="exited('Tue');" onmousedown="clicked('Tue');" > Tue</TD> <TD class="date" id="Wed" WIDTH=34 onmouseover="entered('Wed');" onmouseout="exited('Wed');" onmousedown="clicked('Wed');" > Wed</TD> </TR> <TR> <TD class="date" id="Thu" onmouseover="entered('Thu');" onmouseout="exited('Thu');" onmousedown="clicked('Thu');" > Thu</TD> <TD class="date" id="Fri" onmouseover="entered('Fri');" onmouseout="exited('Fri');" onmousedown="clicked('Fri');" > Fri</TD> <TD class="date" id="Sat" onmouseover="entered('Sat');" onmouseout="exited('Sat');" onmousedown="clicked('Sat');" > Sat</TD> </TR> <TR> <TD class="date" id="Sun" onmouseover="entered('Sun');" onmouseout="exited('Sun');" onmousedown="clicked('Sun');" > Sun</TD> <TD> </TD> <TD> </TD> </TR> </TABLE> <form name="report"> <h2>Most recently clicked:</h2> <input name="current"> <h2>Days currently selected:</h2> <textarea name="selected" rows=7 cols=10></textarea> </form> </body> </html> === Please let me know if this meets your needs, or if there are any problems (in which case I will work on it further). Google search strategy: css reference ://www.google.com/search?q=css+reference javascript reference ://www.google.com/search?q=javascript+reference Regards, eiffel-ga

nosneb-ga at Google Answers Visit the source

Was this solution helpful to you?

Related Q & A:

When should an Aggregate Root contain another AR (and when should it not?Best solution by Programmers
How can I toggle caps lock when the caps lock key is remapped?Best solution by Super User
Why is Javascript called Javascript, if it has nothing to do with Java?Best solution by Stack Overflow
How to efficiently aggregate several collections into one collection?Best solution by Stack Overflow
How could I aggregate among multiple collections at once with loop?Best solution by stackoverflow.com

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.