Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 12
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 3666 times and has 11 replies Next Thread
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Creating hover effects in tables

IE 7 will support the hover pseudo class on other elements aside from the anchor tag. So adding td:hover {background: #??????} to the CSS will work on all browsers except IE 6 and previous. Problem is too many people use IE for that alone to be a viable option. Adding the following will make it work without js on a decent browser and with js on IE 6 and less

CSS

td, .jsout {background: #???;}
td:hover, .jshover {background: #???;}

Javascript

function changeBG(){
var bg = document.getElementsByTagName("td");
for (i = 0, j = bg.length; i < j; i++) {
bg.onmouseover=function() {
this.className="jshover";
}
bg.onmouseout=function() {
this.className="jsout";
}
}
}
window.onload=function(){
changeBG();
}



The above quote is from Billyboy's post in this thread. I didn't want to hijack that one with my troubleshooting, so I'm starting a new one. wink

I'm sure I've done something wrong, but the hover is not working in IE for me on this page. Oh, and ignore the hideous looking divs above the table. I'm not sure what I'm doing with that info yet. YUCK, though! LOL

[Jun 19, 2006 2:04:32 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

td, .jsout {background: #???;}
td:hover, .jshover {background: #???;}


I have another question about this. I want the hover effects to only apply to these particular pages and not to my other tables. To do so, I would create a class, correct? How would that look exactly? I understand that for the td I would say td.classname but I don't know how to do it with the .jsout and td:hover, and .jshover .
[Jun 19, 2006 7:22:00 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

I'm sorry Susie, you aren't the one that's done something wrong, it was me. I know I checked that code to see if it worked but I must have mucked with it before posting. I can't get it to work now either. Anyway I did find the original again and I swear it works this time.

To target just the one table I added in getElementById. Change myTable what suits you and give your table a matching id. I also changed td to tr since you want to affect the whole row and not just one cell.

function changeBG(){
var bg = document.getElementById("myTable").getElementsByTagName("tr");
for (i = 0, j = bg.length; i < j; i++) {
bg[ i ].onmouseover=function() {
this.className="jshover";
}
bg[ i ].onmouseout=function() {
this.className="jsout";
}
}
}
window.onload=function(){
changeBG();
}
Edit: Ha! Wasn't me after all. There's part of the code that gets stripped out everytime I try to post it, thats why it isn't working! Remove the spaces here[ i ]
----------------------------------------
Quiquid latine dictum sit altum viditur
----------------------------------------
[Edit 4 times, last edit by billyboy at Jun 20, 2006 5:57:12 AM]
[Jun 19, 2006 8:28:17 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

Thanks, Bill. I'm still having trouble with it, so I'm going to study this code some more and see if I can figure out my mistake. blushing
[Jun 20, 2006 6:23:31 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

The javascript looks okay but in your CSS you have an extra period after the tr: tr. , .jsout {background: #feffee;} Take that out and see if it works.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Jun 20, 2006 7:05:11 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

It still isn't working. sad I think it doesn't like me. hehe
[Jun 20, 2006 7:15:16 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

The period after the tr is still there.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Jun 20, 2006 7:28:16 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

It is? I thought I got it. Here's what I have:

tr, .jsout {background: #feffee;}

Should the period before jsout be gone too?
[Jun 20, 2006 7:48:04 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

Hmm guess I was viewing an old version of the page, cleared my cache and its gone. Nope leave the period for .jsout, thats a class. I missed something the first time I looked at the javascript, this <style type="text/javascript"> should be <script type="text/javascript">
----------------------------------------
Quiquid latine dictum sit altum viditur
----------------------------------------
[Edit 1 times, last edit by billyboy at Jun 20, 2006 8:00:36 AM]
[Jun 20, 2006 8:00:14 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Creating hover effects in tables

And there's my mistake. blushing Oh my gosh, I feel so foolish. Thanks for taking your time to help me figure this out, Bill. I owe you. (I owe a lot of people here...how will I ever repay? LOL)

biggrin
[Jun 20, 2006 8:06:23 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread