?
Solved

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

Posted on 2004-03-25
13
Medium Priority
?
963 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 500 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Current business processes need to constantly adapt to changing threats. Surely we do not want to be the next victim. We can take an active stance and stay agile. This article shares some tips.
This article is divided into two sections. 1) First describes how you can connect to server / service / device with Username and secure password in powershell. 2) Second part is to use secure credentials and connect to vCenters which are in Link…
The video will let you know the exact process to import OST/PST files to the cloud based Office 365 mailboxes. Using Kernel Import PST to Office 365 tool, one can quickly import numerous OST/PST files to Office 365. Besides this, the tool also comes…
If you are looking for an automated solution for backup single or multiple Office 365 user mailboxes to Outlook data file, then you can use Kernel Office 365 Backup & Restore tool. Go through the video to check out the steps to backup single or mult…

569 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