Solved

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

Posted on 2004-03-25
13
946 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
Technology Partners: 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

Suggested Solutions

Title # Comments Views Activity
nested if has else if 13 99
TreeSet comparator example 7 104
jsp login check 12 53
maven not picking latest jar instead picking old jar from .m2 12 46
Building a cohesive image for your brand is vital to making an impression on consumers. When the economy is tough, brands do better than unbranded  products. This can have a huge impact on your long-term profits, as the economy goes up and down.
In order to fulfill our mission of inspiring learning in the technology community, Experts Exchange is launching a Course of the Month program. Premium and Team Account members will have access to one course per month as a part of their membership, …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

749 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