Results 1 to 17 of 17
  1. #1
    Join Date
    Jul 2004
    Posts
    337

    [help]Highlighting Table Rows Upon Mouse Overs

    I hade this known table rows highliting effect working fine till I added som style to the table cells.. the effect then stopped working.. Please don't comment on wether it's good or not to use this effect so we don't go off topic, thank you.

    Here's the original working code:
    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function hl(row, color) {
    if (typeof(row.style) == 'undefined' || typeof(row.cells) == 'undefined') {
    return false;
    }
    row.style.backgroundColor = color;
    }
    //-->
    </script>
    
    	  <table class="bordergray" align="center" width="580px" cellpadding="2" cellspacing="0">
    		<tr onMouseOver='hl(this, "#FFD700")' onMouseOut='hl(this, "")'>
    		  <td>some text here</td>
    		  <td>some other text here</td>
    		</tr>
    When I add any style to the table cells, the effect stops working.. Any ideas?

    Thanks for time.
    Last edited by WebDesignGold; 06-17-2005 at 11:23 AM.
    My woman left me..
    I've got no website..
    I've got no money..

  2. #2
    Join Date
    May 2005
    Posts
    41
    Have you tried making the cell (<td>) (I assume that's what you'e added the style to when this doesn't work) transparent?
    < !-- Place sig here //-- >

  3. #3
    Join Date
    Jul 2004
    Posts
    337
    Quote Originally Posted by snokrash257
    Have you tried making the cell (<td> ) (I assume that's what you'e added the style to when this doesn't work) transparent?
    When there's no style, which I use for background color among other things, it works. The problem is when I add the style:
    PHP Code:
    .col1
    {
        
    border-top1px solid #FFFFFF;
        
    background-color:    #F6F6F6;
        
    border-bottom1px solid #DDDDDD;
        
    font-size10px;
        
    font-weightbold;

    I need this style in order for the rows to have alternating row colors.
    My woman left me..
    I've got no website..
    I've got no money..

  4. #4
    Join Date
    Aug 2004
    Location
    Tulsa, Oklahoma
    Posts
    168
    What you might do is, instead of it switching out colors, switch out the class name on the mouseover and out. Like have a classname for row, altrow, and highlightedrow.
    Mike Bell
    Image Hosting

  5. #5
    Join Date
    Jul 2004
    Posts
    337
    Quote Originally Posted by Mike Bell
    What you might do is, instead of it switching out colors, switch out the class name on the mouseover and out. Like have a classname for row, altrow, and highlightedrow.
    Hmm.. I don't know if I understood what you mean there.. can you please elaborate on that? Thank you.
    My woman left me..
    I've got no website..
    I've got no money..

  6. #6
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,441
    I'm not sure if it will work on Internet Explorer, but in your stylesheet try:
    Code:
    bordergray tr:hover
    {
    background-color: #fd0;
    }
    That should have the desired effect.

  7. #7
    Join Date
    Dec 2002
    Location
    chica go go
    Posts
    11,858
    I'm not sure if it will work on Internet Explorer, but in your stylesheet try:
    That Doesn't work on IE.


    The attached file will work.
    Attached Files Attached Files

  8. #8
    Join Date
    Jul 2004
    Posts
    337
    No, mikeylove is right, the hover effect dosn't work in IE.
    The attached example (mikeylove's) is similar to what worked for me earlier as I said.. but the problem is when I added a style to every table cell (td). The style is overriding the rows highliting effect that I want. If I add this highliting effect to a table cell (td) it works fine, but I want the whole row highlited at the same time.

    Take a look at my my linked example, it's mikeylove's file that I modified, there you can see the first table where the effect is working, and the second, with styled cells (tds), that doesn't work. Sometimes can someone else easily spot a mistake that you've pulled your hair to solve.. Maybe there is no solution in CSS for this or the whole way of thinking is wrong here.. I'm not good at CSS.

    http://www.webdesigngold.com/rollover.htm

    Thanks to everyone trying to help with this minor problem.
    My woman left me..
    I've got no website..
    I've got no money..

  9. #9
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Well, the style of any single table cell is always going to override the style attributed to the entire row. The <td> always gets preference in the cascade because it is a subset of <tr>. It's a matter of specificity.

    You'll need to alter the style of the <td>, not the <tr> if you want to see results. This means writing out your DOM statement in every single table cell you want affected, which would be a major pain in the posterior, even if you created wrapper functions in your scripts (which would be very wise to do here, and it seems you've done in your original example).

    Can you show the problem live? That would make it much easier to debug...
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  10. #10
    Join Date
    Jul 2004
    Posts
    337
    I was waiting for you Paul
    I did post a link in my previous reply.

    Thanks for helping.
    My woman left me..
    I've got no website..
    I've got no money..

  11. #11
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Originally posted by WebDesignGold.com
    I was waiting for you Paul
    I did post a link in my previous reply.

    Thanks for helping.
    I wasn't able to fully grasp what was taking place until you posted that link.

    I'm talking about the real, live version you're trying to make work. What I was planning on doing was figuring out a way to keep background color styling out of each individual cell so Mikey's answer would work for you.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  12. #12
    Join Date
    Jul 2004
    Posts
    337
    My original file has altered several times.. it's just like the one I linked to.. here it is:

    http://www.webdesigngold.com/rollover_making_me_mad.htm

    I use a java script to achieve the roll over though.
    See the first TD.. it's without style, and it's working.
    My woman left me..
    I've got no website..
    I've got no money..

  13. #13
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Let's take descendent selectors to a whole new level.

    First, take the class="row1" and class="row2" attributes out of the <td>s and place them in the <tr>s instead. Then, make a slight adjustment to your style sheet so that the borders are applied to the cells, but the background colors are for the entire rows.

    Here's the finished product (with a little bonus cleanup ):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    body {
    	color: #000;
    	background-color: #fff;
    	font-size: 12px;
    	margin: 0;
    	padding: 0;
    }
    
    a {
    	color: #1E90FF;
    	text-decoration: none;
    }
    
    a:visited {
    	color: #1E90FF;
    }
    
    a:hover {
    	color: red;
    	text-decoration: none;
    	background: none;
    }
    
    a:active {
    	color: red;
    }
    
    #priceList {
    			width: 600px;
    			font-family: verdana, arial, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			border: 1px solid #ddd;
    			margin:100px auto 0 auto
    }
    
    #priceList .row1 { background-color: #f6f6f6; }
    #priceList .row2 { background-color: #eee; }
    	#pricelist .row1 td, #pricelist .row2 td  {
    			border-top: 1px solid #fff;
    			border-bottom: 1px solid #ddd;
    			border-right: 1px solid #fff;
    	}
    
    
    </style>
    <script type="text/JavaScript">
    function hl(row, color) {
    if (typeof(row.style) == 'undefined' || typeof(row.cells) == 'undefined') {
    return false;
    }
    row.style.backgroundColor = color;
    }
    //-->
    </script>
    </head>
    
    <body>
    <table id="priceList" cellpadding="2" cellspacing="0">
    	<tr class="row1" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon 200 serien, svart &amp; färg</td>
    	  <td>Patronfyllning: <span style="color: red">99:-</span></td>
    	</tr>
    	<tr class="row2" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon 2000 serien, svart &amp; färg</td>
    	  <td>Patronfyllning: <span style="color: red">69:-</span></td>
    	</tr>
    	<tr class="row1" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon BJ 30/50/55/70/80/85, svart &amp; färg</td>
    	  <td>Patronfyllning: <span style="color: red">49:-</span></td>
    	</tr>
    	<tr class="row2" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon 3000/6000 S-400/450/500/520/600 osv.., färg</td>
    	  <td>Patronfyllning: <span style="color: red">99:-</span></td>
    	</tr>
    	<tr class="row1" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon BJC 7000/7100, färg</td>
    	  <td>Patronfyllning: <span style="color: red">149:-</span></td>
    	</tr>
    	<tr class="row2" onmouseover="hl(this,'#FFD700')" onmouseout="hl(this, '')">
    	  <td>Canon BJC 7000/7100, svart</td>
    	  <td>Patronfyllning: <span style="color: red">199:-</span></td>
    	</tr>
    </table>
    </body>
    </html>
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  14. #14
    Join Date
    Jul 2004
    Posts
    337
    I know you always like to be "strict"..
    Nope, it's not working. the borders are not showing in IE (I can't test other browsers for now).
    I've had the same result before.. I actually tried to place background-color style on TRs and it worked just like your example.. the problem is the border style. Rows doesn't take them as you already now.. I'll look at your example more in depth later.. thanks.
    My woman left me..
    I've got no website..
    I've got no money..

  15. #15
    Join Date
    Jul 2004
    Posts
    337
    Edit: (I was trying to edit last post.. too late)
    Wait a minut.. it's working! although a slightly different look then my desired one

    I did a minor change to correct. It was the id "priceList". It was written with lower case.

    http://www.webdesigngold.com/rollover2.htm

    Thank you very much Paul, i'm happy with this now.
    My woman left me..
    I've got no website..
    I've got no money..

  16. #16
    Join Date
    Jul 2004
    Posts
    337
    Oh this is so embarassing.. it didn't work because i missed a second lower case.. now it's working.. brilliant!

    BTH, I found that this:
    #priceList .row1 td, #priceList .row2 td {

    is same as this:
    #priceList .row1 td, .row2 td {

    I just thought you do like cleaning unnecessary code..
    My woman left me..
    I've got no website..
    I've got no money..

  17. #17
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Huh, are they the same? I think the second declaration does not descend from #priceList - it just so happens it works, but the specificity is changed. This might have no ill effect on your site whatsoever, but after you've been developing it, if you find for some readon row2 is not behaving as expected in certain tables, it might be that you have a conflicting rule that references row2, descending from a different table ID. Unlikely though, so don't worry about it

    I'm glad it works for you!
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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