Solved

Alternating Row Color and Color Change on Mouse Over - Struts Layout

Posted on 2004-03-25
13
948 Views
Last Modified: 2008-02-07
I was wondering if there is anyway to implement both alternating color rows and an onmouseover row color change when using the Struts Layout collection tag. I can do one or the other ( using the styleClass/styleClass2 for the alternating row colors), but when I combine both the mouseover does not work. Any Ideas?
0
Comment
Question by:bob865
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 14

Expert Comment

by:kennethxu
ID: 10681714
how did you do in mouseover. you can switch the stylesheet. e.g.
styleClassOdd, sytleClassEven, styleClassOddOver, styleClassEvenOver.
mouse over switch to xxxOverclass, mouse out, switch back.
0
 

Author Comment

by:bob865
ID: 10681854
That would work in a normal situation but with the Struts-Layout collection tag when you implement alternating row colors using the styleClass / styleClass2 attributes it renders the html like so:
<tr><th class="ROW1">First Name</th><th class="ROW1">Last Name</th><th class="ROW1">Address</th><th class="ROW1">City</th></tr><tr onclick="top.location='http://www.google.ca'" onmouseover="top.location='http://www.google.ca'" style="cursor:hand;">
    <td class="ROW2">New</td>
    <td class="ROW2">Subject</td>
    <td class="ROW2">136 Georgian way</td>
    <td class="ROW2">Sherwood Park</td>
</tr><tr onclick="top.location='http://www.google.ca'" onmouseover="top.location='http://www.google.ca'" style="cursor:hand;">
    <td class="ROW1">Another</td>
    <td class="ROW1">Subject</td>
    <td class="ROW1">176 Halliday Drive</td>
    <td class="ROW1">Edmonton</td>
</tr></table></td></tr></table>
</td></tr>

As you can see the class is applied to the individual <td> not the the <tr> tag, So I wondering if there was anyway to apply a style to a row even though there was individual styles on the columns.
0
 
LVL 14

Expert Comment

by:kennethxu
ID: 10681929
for each tr, find all child td and loop through it.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:kennethxu
ID: 10681984
var child = tag.firstChild;
while (child != null) {
    child.className = ...;
    child = child.nextSibling;
}
0
 

Author Comment

by:bob865
ID: 10682024
<layout:collection name="subjects"
 styleClass="ROW1"
styleClass2="ROW2"
onRowMouseOver="top.location='http://www.google.ca'"
onRowClick="top.location='http://www.google.ca'">
<layout:collectionItem title="First Name" property="subject_first_name"/>
<layout:collectionItem title="Last Name" property="subject_last_name"/>
<layout:collectionItem title="Address" property="subject_address"/>
<layout:collectionItem title="City" property="subject_city"/>
</layout:collection>

how would I go about doing that given that this is the code I'm using?

also ignore the onRowMouseOver and Click values they were just inplemented for testing.

bob865
 
0
 
LVL 14

Expert Comment

by:kennethxu
ID: 10682163
onRowMouseOver="myRollOver(this)" onRowMouseOut ="myRollOut(this)"

function myRollOver( tag ) {
  var child = tag.firstChild;
  while (child != null) {
    child.className = ...;
    child = child.nextSibling;
  }
}

....
0
 

Author Comment

by:bob865
ID: 10682259
That works great except the alternating row colours are reset after the mouse over. How do I deal with that?

Bob865
0
 
LVL 14

Expert Comment

by:kennethxu
ID: 10682280
you need onRowMouseOut to set it back!
0
 

Author Comment

by:bob865
ID: 10682311
No, No,  we are doing that, but onRowMouseOut how do we tell the function what the orignal style is?  Because there are two possible styles depending on the row.  Maybe i am not making any sense sorry.
0
 
LVL 14

Expert Comment

by:kennethxu
ID: 10682354
as I said in the beginning, you need 2 rollover classes.

child.className = (child.className == 'ROW1') ? 'XROW1' : 'XROW2'

do similar when rollout!
0
 
LVL 14

Accepted Solution

by:
kennethxu earned 125 total points
ID: 10682370
you can give same style to XROW1 and XROW2, but you need two classes.
0
 

Author Comment

by:bob865
ID: 10682656
thank you for your help
0
 
LVL 14

Expert Comment

by:kennethxu
ID: 10682685
my pleasure!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For anyone that has accidentally used newSID with Server 2008 R2 (like I did) and hasn't been able to get the server running again because you were unlucky (as I was) and had no backups - I was able to get things working by doing a Registry Hive rec…
This article will help to fix the below error for MS Exchange server 2010 I. Out Of office not working II. Certificate error "name on the security certificate is invalid or does not match the name of the site" III. Make Internal URLs and External…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question