Solved

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

Posted on 2004-03-25
13
941 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Stuck in Bootstrap WysiHtml Editor 3 37
bean mapper frameworks 5 59
EJB MDB example 4 79
servlet cookie finding by name 1 70
What does UTC stand for?  “Coordinated Universal Time” – Think of this as the true time on Planet Earth that never changes with the exception of minor leap seconds here and there to account for the changes in the planet's rotation.   What does th…
Note: This is the third blog post in a series on email clearinghouses (https://www.xmatters.com/alert-management/blog-email-has-failed-us?utm_campaign=70138000000ydLoAAI&utm_source=exex&utm_medium=article&utm_content=blog-post).   We’ve been talki…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

867 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now