# CSS Effects? (javascript?)

**URL:** <https://www.ruby-forum.com/t/css-effects-javascript/61569>\
**Category:** Rails\
**Created:** [May 25, 2006, 3:34am UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569 "2006-05-25T03:34:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 25, 2006, 3:34am UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/1 "2006-05-25T03:34:42Z")

</div>

Is there a way to assign a CSS style to an element I am not currently  
interacting with? For instance, if I have two TD elements of a table. I  
click on one of them, and I want to have a style change in the other  
element. Is this possible?

I’m guessing [script.aculo.us](http://script.aculo.us) might be able to help me… but  
considering how nothing on their site is loading for me right now I have  
no way of looking through their WIKI.

---

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 25, 2006, 5:59am UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/2 "2006-05-25T05:59:23Z")

</div>

Let’s assume the text will be hyperlinked. Yes, you’ll probably want  
to use scriptaculous or something similar. The hyperlinked text in  
the td will be using a link\_to\_remote method call. You’ll need to id  
each of your id’s or use some other method of identifying them. In  
the link\_to\_remote, pass in some information to the controller that  
will let you know which one you clicked on. Alternatively call a  
separate method for each link\_to\_remote.

In the call to your controller you’re going to want to use render  
:update do |page| block or use an RJS for rendering. I would just do  
it inline since the changes are minor. For the actual change, look  
into using prototypes Element.addClassName method.  
[http://wiki.script.aculo.us/scriptaculous/show/Element.addClassName](http://wiki.script.aculo.us/scriptaculous/show/Element.addClassName)

Alternatively, if you just want to simplify, just review the  
referenced prototype page and use it inline like they are doing it.  
The example there is exactly what you want.

Michael

---

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 26, 2006, 2:17pm UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/3 "2006-05-26T14:17:46Z")

</div>

On 25 May 2006, at 05:57, Michael T. wrote:

> it inline since the changes are minor. For the actual change, look  
> into using prototypes Element.addClassName method.  
> [http://wiki.script.aculo.us/scriptaculous/show/Element.addClassName](http://wiki.script.aculo.us/scriptaculous/show/Element.addClassName)
> 
> Alternatively, if you just want to simplify, just review the  
> referenced prototype page and use it inline like they are doing it.  
> The example there is exactly what you want.

I’m broadening the original question somewhat: what would be the most  
effective way to implement selection in alternating rows tables?

So basically, you have one with class ‘selected’, you click on a  
different row, then the first gets his empty or ‘odd’ class back  
(depending on what color the row should have as it’s alternating) and  
the clicked row gets the ‘selected’ class.

Currently, I’m storing the selected row id in a session, looping  
through all s of the table just to change 2 rows seems very  
ineffective to me.

Anyone have a better and cleaner idea on how to do this? (as a test,  
use a table with about 500 rows in it, for performance comparison)

Best regards

Peter De Berdt

---

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 26, 2006, 8:28pm UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/4 "2006-05-26T20:28:47Z")

</div>

Have no idea if this will work, didn’t test it.  
But, something like this could work w/ prototype 1.5.

| stuff |
| more stuff |

---

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 26, 2006, 8:37pm UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/5 "2006-05-26T20:37:53Z")

</div>

ok. that didnt work. but this does:

ok. that didn’t work. 🙂  
but this does:

| stuff |
| more stuff |

---

<div class="post-metadata">

**Author:** ![stickstone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/6f9a4e/32.png) [@stickstone](https://www.ruby-forum.com/u/stickstone)\
**Post date:** [May 26, 2006, 10:44pm UTC](https://www.ruby-forum.com/t/css-effects-javascript/61569/6 "2006-05-26T22:44:51Z")

</div>

Now the big question is: how performant is it with a huge number of  
rows. One of these days, I’m going to test it.

On 26 May 2006, at 20:37, David C. wrote:

> $$('#myTable tr').each(function(e) { assignClickEvents();
> 
> //–\>

Best regards

Peter De Berdt