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. -- Posted via http://www.ruby-forum.com/.
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 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
On 25 May 2006, at 05:57, Michael Trier wrote:> 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 > > 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
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>
--
Posted via http://www.ruby-forum.com/.
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>
--
Posted via http://www.ruby-forum.com/.
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:> 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>Best regards Peter De Berdt