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
Solved

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

Posted on 2004-03-25
13
945 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
some methods private some are not 8 217
getting param value 7 57
throw exception 21 58
by zero exception 10 52
Is your phone running out of space to hold pictures?  This article will show you quick tips on how to solve this problem.
Some of the SEO trends we might expect in 2017.
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

840 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