CSS/jQuery/html

[JayGeePee]

I cant seem to get this code to work with my table code below -

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
</script>

Table Code-

<table width="780" cellpadding="0" cellspacing="0" border="0">
        <tr style="background-image: url(templates/{TPL_NAME}/images/tr-background.jpg); background-repeat: repeat-x;" align="center" class="table_titles">
          <td width="40%" align="left" height="18" style="padding-left:5px;">{TEMP}</td>
          <td width="6%">{LANG}</td>
          <td width="30%" align="left" style="padding-left:5px;">{TEMP}</td>
          <td width="12%">{LANG}</td>
          <td width="12%">{LANG}</td>
        </tr>
  {LOOP: FEAT_TEMP}
  <tr align="center" class="table_titles">
    <td align="left" style="padding-left:5px;"><a href="{TEMP}">{TEMP}</a></td>
    <td>{TEMP.temp}</td>
    <td align="left" style="padding-left:5px;">{TEMP}</td>
    <td>{TEMP}</td>
    <td>{TEMP}</td>
  </tr>
  <tr>
    <Td colspan="5" background="templates/{TPL_NAME}/images/hline_dot.gif"><img src="templates/{TPL_NAME}/images/dot.gif" width="1" height="1" alt="" border="0"></TD>
  </tr>
  {/LOOP: FEAT.temp}
  <tr>
    <td colspan="5"><a href="temp.php?filter=featured"><img src="templates/{TPL_NAME}/images/button_viewall.gif" width="76" height="16" alt="" border="0" hspace="0" vspace="10"></a></td>
  </tr>
      </table>

Heres css for table colors-

tr.alt td {
background: #ecf6fc;
}

tr.over td {
background: #bcd4ec;
}

Any ideas on this?

[JayGeePee]

This is the site I found the jQuery code @. I got a () error code in IE. I might be placing the code in the wrong place. Not real sure?

[eric.felker]

Have you applied the ".stripeMe" class in your html? The jQuery code is looking for "tr"s specifically within elements of that class--if it doesn't find any, it won't find your trs.

[JayGeePee]

Yeah I figured out adding this to the table makes it work, but it starts from the header.

<table class="stripeMe" width="780" cellpadding="0" cellspacing="0" border="0">
        <tr style="background-image: url(templates/{TPL_NAME}/images/tr-background.jpg); background-repeat: repeat-x;" align="center" class="table_titles">
          <td width="40%" align="left" height="18" style="padding-left:5px;">{TEMP}</td>
          <td width="6%">{LANG}</td>
          <td width="30%" align="left" style="padding-left:5px;">{TEMP}</td>
          <td width="12%">{LANG}</td>
          <td width="12%">{LANG}</td>
        </tr>
  {LOOP: FEAT_TEMP}
  <tr align="center" class="table_titles">
    <td align="left" style="padding-left:5px;"><a href="{TEMP}">{TEMP}</a></td>
    <td>{TEMP.temp}</td>
    <td align="left" style="padding-left:5px;">{TEMP}</td>
    <td>{TEMP}</td>
    <td>{TEMP}</td>
  </tr>
  <tr>
    <Td colspan="5" background="templates/{TPL_NAME}/images/hline_dot.gif"><img src="templates/{TPL_NAME}/images/dot.gif" width="1" height="1" alt="" border="0"></TD>
  </tr>
  {/LOOP: FEAT.temp}
  <tr>
    <td colspan="5"><a href="temp.php?filter=featured"><img src="templates/{TPL_NAME}/images/button_viewall.gif" width="76" height="16" alt="" border="0" hspace="0" vspace="10"></a></td>
  </tr>
      </table>

[eric.felker]

Glad to hear you got it sorted! :-)

[JayGeePee]

I still have a problem with the stripes starting from my header. If you notice I have a repeating background for the tr.

I want to skip that and start at the td

[eric.felker]

I haven't tried this, but I'm thinking you can use .children to look inside your trs and target the tds. Something like:

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").children().mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
</script>

Even more simple might be to cut out the additional function and just target the tds explicitly?

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr td").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
</script>

Again, I didn't try this, but it's the direction I go :-)

[JayGeePee]

children? jQuery isn't my thing... I see what you have done, but I dont know what to do with it.

[eric.felker]

by adding .children(), you direct the target of the .mouseover that follows to the children (and only the immediate children, not grandchildren or deeper) of the element(s) you had targeted thus far. In this way you add the "over" class to tds instead of trs on mouseover.

As I wrote that, it occurred to me that you could simply target the tds at the onset though, by adding "td" to the end of the selector statement (.stripeMe tr td). That, too, would jump to the tds and add the class to them, rather than adding the class to the parent trs.

[JayGeePee]

I've tried both... All its doing is highlighting the first line. The alt function isn't working either. The only thing thats working for some reason is the original code I posted, but it still highlights the tr, which is what I dont want.

[eric.felker]

I'm not a superstar at jQuery either, but may I recommend this link. If I recall, Chris goes over some table, css, and jQuery stuff in this screencast, and even highlighting rows. Like all of his screencasts, it's a really great watch!

[JayGeePee]

I'm not a superstar at jQuery either, but may I recommend this link. If I recall, Chris goes over some table, css, and jQuery stuff in this screencast, and even highlighting rows. Like all of his screencasts, it's a really great watch!

Yeah I'll check that site out. I need to learn jQuery anyway... But I fixed my problem. I split my table up into 3 different tables, now it works. This may not have been the best way to go about things but it works. I checked FF, IE7, Chrome...Seems to work in all of them just fine. Thanks for giving me idea's eric.felker.

Marking Solved!