SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple cell rollovers with CSS and Javascript

    I have been trying to produce a multiple table cell rollover but having a hard time getting the 'th' to change the bgcolor of the 'td' (cell) below it, and visa versa.

    I know I need to implement a Javascript to help contol the mouseovers most likely by IDs and Class. Any ideas on how to best implement this would be greatly appreciated.

    -- sorry for the long post --

    <style type="text/css">
    #sampleTable {
    border:1px #FFFFFF;
    margin:0px;
    border-spacing:2px;
    }

    /*styles table header*/
    #sampleTable, th{
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-decoration:none;
    color:#FFFFFF;
    padding:2px 2px 2px 2px;
    margin:0px;
    cursor:hand;
    }

    th.activeHeader, A.activeHeader:link, A.activeHeader:visited, A.activeHeader:hover {
    display:block;
    background:#003366;
    }

    th.inactiveHeader, A.inactiveHeader:link, A.inactiveHeader:visited, A.inactiveHeader:hover {
    display:block;
    background: #006699;
    }

    #sampleTable, td {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#000000;
    text-decoration:none;
    text-align:left;
    padding:5px 0px 5px 0px;
    margin:0px;
    cursor:hand;
    }

    td.activeCell, A.activeCell:link, A.activeCell:visited, A.activeCell:hover {
    display:block;
    background: #99CCFF;
    }

    td.inactiveCell, A.inactiveCell:link, A.inactiveCell:visited, A.inactiveCell:hover {
    display:block;
    background: #FFFFFF;
    }

    #sampleTable, ul, li {
    padding:3px 4px 3px 4px;
    margin:0px;

    }

    div.title {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-decoration:none;
    color:#000000;

    }

    #sampleTable, .footer {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-decoration:none;
    color:#000000;
    text-align:center;
    }

    .style1 {
    color: #006600;
    font-weight: bold;
    }
    .style4 {color: #993300}
    </style>

    <div class="title">Table header + cell rollovers</div>

    <table id="sampleTable" border="0" cellspacing="2" cellpadding="0">
    <thead>
    <tr>
    <th scope="col" id="" class="activeHeader">Column 1</th>
    <th scope="col" id="" class="inactiveHeader">Column 2</th>
    <th scope="col" id="" class="inactiveHeader">Column 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td id="" class="activeCell">
    <ul>
    <li><a href="#">Data 1.1 </a></li>
    <li><a href="#">Data 1.2 </a></li>
    <li><a href="#">Data 1.3 </a></li>
    </ul>
    </td>
    <td id="" class="inactiveCell">
    <ul>
    <li><a href="#">Data 2.1 </a></li>
    <li><a href="#">Data 2.2 </a></li>
    <li><a href="#">Data 2.3 </a></li>
    </ul>
    </td>
    <td id="" class="inactiveCell">
    <ul>
    <li><a href="#">Data 3.1</a> </li>
    <li><a href="#">Data 3.2</a> </li>
    <li><a href="#">Data 3.3</a> </li>
    </ul>
    </td>
    </tr>
    </tbody>
    <tfoot>
    <td class="footer">this column is <br />
    <span class="style1">active</span></td>
    <td class="footer">this column is<br />
    <span class="style4">inactive</span></td>
    <td class="footer">this column is<br />
    <span class="style4">inactive</span></td>
    </tfoot>
    </table>

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    not sure I understood what you are trying to do

    I'm not sure I understood what you are trying to do. So I made some assumptions. If you load the text starting with the <!DOCTYPE line into a browser you could tell me if it's what you wanted.

    When a user passes a mouse over the table row, the first cell (class="activeCell") in that row changes color.
    ==============================================

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Table Row Rollovers</title>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"></meta>
    
    <style type="text/css">
    #sampleTable {
    	margin: 1em;
    	width: 400px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-size: medium;
    	border-right: 3px solid #665;
    	border-top: 1px solid #ccb;
    	border-bottom: 3px solid #ccb;
    	border-collapse: collapse;	
    }
    
    th {
    	margin: 0px;
    	padding: 0.2em 0.5em;
    	font-size: 1.2em;
    	color:#eec;
    	background: #69c;
    	border-bottom: 2px solid #ccb;
    	border-left: 1px solid #332;
    }
    
    th.activeHeader {background:#069; }
    
    td {
    	margin: 0;  
    	padding: 4px;
    	background: #9cf;
    	border-left: 1px solid #332;
    	border-bottom: 1px solid #ccb;
    }
    
    td.activeCell {background: #69c; }
    
    </style>
    
    
    <script type="text/javascript">
    window.onload = rolloverRows;
    
    function rolloverRows() {
    	var theTable = document.getElementById("sampleTable");
    	var theRows = theTable.getElementsByTagName("tr");
    
    	for (var rowCounter = 0; rowCounter < theRows.length; rowCounter++ ) {
    
    		theRows[rowCounter].onmouseover = function() {
    			dataCells = this.getElementsByTagName("td");
    			for (var i = 0; i < dataCells.length; i++ ) {
    				if (dataCells[i].className == "activeCell") {
    					dataCells[i].style.backgroundColor = "#069";
    				}				// if (dataCells[i]...
    			}				// for...
    		}				// theRows[rowCounter].onmouseover = function()
    
    		theRows[rowCounter].onmouseout = function() {
    			dataCells = this.getElementsByTagName("td");
    			for (var i = 0; i < dataCells.length; i++ ) {
    				if (dataCells[i].className == "activeCell") {
    					dataCells[i].style.backgroundColor = "#69c";
    				}				// if (dataCells[i]...
    			}				// for...
    		}				// theRows[rowCounter].onmouseover = function()
    	}				// for (var rowCounter = 0;...
    
    }				// function rolloverRows()
    </script>
    </head>
    
    <body>
    
    <h1>Table Header and Cell Rollovers</h1>
    
    <table id="sampleTable">
    <thead>
    <tr>
    <th class="activeHeader">Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    </tr>
    </thead>
    
    <tbody>
    
    <tr>
      <td class="activeCell"><a href="#">Data 1.1</a></td>
      <td><a href="#">Data 1.2</a></td>
      <td><a href="#">Data 1.3</a></td>
    </tr>
    
    <tr>
      <td class="activeCell"><a href="#">Data 2.1</a></td>
      <td><a href="#">Data 2.2</a></td>
      <td><a href="#">Data 2.3</a></td>
    </tr>
    
    <tr>
      <td class="activeCell"><a href="#">Data 3.1</a></td>
      <td><a href="#">Data 3.2</a></td>
      <td><a href="#">Data 3.3</a></td>
    </tr>
    
    <tr>
      <td class="activeCell">this column is <br />
      <span class="style1">active</span></td>
      <td>this column is<br />
      <span class="style4">inactive</span></td>
      <td>this column is<br />
      <span class="style4">inactive</span></td>
    </tr>
    
    </tbody>
    </table>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks hasdrubal, I really appreciate your time.

    Close... let me see if I can clarify. Imagine a page with column 1 as the active column. No rollover happens for this column. However...

    When the user rolls over column 2 or column 3 then the background changes colors. For example...

    If you rollover the header "column 2" the background would change to a "dark blue" but is would also change the color for the cell just below column 2 to "light blue".

    And, if you were to rollover the cell just below column 2 that cell would change to ""light blue"" but it would also change the color of the header "column 2" to "dark blue".

    So what you get is a rollover on a header that will not only change the color of that header but it will also change the color of the cell below it. The same is true for the cell below the header changing the color of the header above it.

    Did that clarify things a bit more?

  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good one Jeffp. I can't figure it out. Highlighting a column rather than a row.

    I wonder if anyone else here will give it a try


Bookmarks

Posting Permissions

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