Forum: Ruby on Rails CSS Effects? (javascript?)

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Brian C. (Guest)
on 2006-05-25 05:34
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 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.
Michael T. (Guest)
on 2006-05-25 07:59
(Received via mailing list)
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/Ele...

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
Peter De Berdt (Guest)
on 2006-05-26 16:17
(Received via mailing list)
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/Ele...
>
> 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 <tr> with class 'selected', you click on a
different row, then the first <tr> 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 <tr>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
Dave C. (Guest)
on 2006-05-26 22:28
Have no idea if this will work, didn't test it.
But, something like this could work w/ prototype 1.5.


<table id="myTable">
<tr>
<td>stuff</td>
</tr>
<tr>
<td>more stuff</td>
</tr>
</table>

<script type="text/javascript">
<!--

function assignClickEvents() {

var count = 0;

$$('#myTable td').each(function(e) {
    e.title = 'Click to learn more...';
    e.onclick = function() { clearRows(); this.className = 'selected'; }
} );

}

function clearRows() {
$$('#myTable tr').each(Element.className = '';);
}

assignClickEvents();


//-->
</script>
Dave C. (Guest)
on 2006-05-26 22:37
ok. that didnt work. but this does:

ok. that didn't work. :-)
 but this does:



<table id="myTable">
<tr>
<td>stuff</td>
</tr>
<tr>
<td>more stuff</td>
</tr>
</table>


<script type="text/javascript">
<!--

function assignClickEvents() {
$$('#myTable tr').each(function(e) {
    e.title = 'Click to learn more...';
    e.onclick = function() { clearRows(); e.className = 'selected'; }
} );

}

function clearRows() {
$$('#myTable tr').each(function(e) {e.className = '';});
}

assignClickEvents();


//-->
</script>
Peter De Berdt (Guest)
on 2006-05-27 00:44
(Received via mailing list)
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:

> </tr>
> $$('#myTable tr').each(function(e) {
> assignClickEvents();
>
>
> //-->
> </script>



Best regards

Peter De Berdt
This topic is locked and can not be replied to.