Change a class name in a list

I'm working with stickman's accordion script. and it works
great, but
I'm trying to add some additional class names my list within
the
accordion.

For example:

<div id="vertical_container">
	<h2 class="accordion_toggle">First
Name</h2>
	<h2 class="accordion_toggle">Second
Name</h2>
	<h2 class="accordion_toggle">Third
Name</h2>
</div>

I'd like it to be this:

<div id="vertical_container">
	<h2 class="accordion_toggle name1">First
Name</h2>
	<h2 class="accordion_toggle name2">Second
Name</h2>
	<h2 class="accordion_toggle name3">Third
Name</h2>
</div>


I cold set this manually to include an individual class for
each one,
but I would rather have this done in Javascript.

function Names() {
	 var mylist =
document.getElementById('vertical_container');
	 var h2 = mylist.getElementsByTagName('h2');

	 for (var i = 0; i < h2.length; i++) {
	 	 this.h2.addClassName = 'name' + i;
	}
}

But firebug is telling me, "this.h2 has no
properties"

What would be really great is if I could also change these
classes in
the accordion script too.  Baby steps though.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

h2 seems like an odd tag choice. I'd think a ul/li combo
would be
preferred, but that doesn't matter.

How about this...

$$('#vertical_container h2').each(function(h2, idx)
{h2.addClassName('name'+idx)})

On 12/22/07, chris at zeus <chriszeuscomics.com> wrote:
>
> I'm working with stickman's accordion script. and it
works great, but
> I'm trying to add some additional class names my list
within the
> accordion.
>
> For example:
>
> <div id="vertical_container">
>         <h2
class="accordion_toggle">First Name</h2>
>         <h2
class="accordion_toggle">Second
Name</h2>
>         <h2
class="accordion_toggle">Third Name</h2>
> </div>
>
> I'd like it to be this:
>
> <div id="vertical_container">
>         <h2 class="accordion_toggle
name1">First Name</h2>
>         <h2 class="accordion_toggle
name2">Second Name</h2>
>         <h2 class="accordion_toggle
name3">Third Name</h2>
> </div>
>
>
> I cold set this manually to include an individual class
for each one,
> but I would rather have this done in Javascript.
>
> function Names() {
>          var mylist =
document.getElementById('vertical_container');
>          var h2 = mylist.getElementsByTagName('h2');
>
>          for (var i = 0; i < h2.length; i++) {
>                  this.h2.addClassName = 'name' + i;
>         }
> }
>
> But firebug is telling me, "this.h2 has no
properties"
>
> What would be really great is if I could also change
these classes in
> the accordion script too.  Baby steps though.
> >
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

The almighty double dollar sign.  Genius!  Thank you

On Dec 22, 12:35 pm, "Andrew Kaspick"
<akasp...gmail.com> wrote:
> h2 seems like an odd tag choice. I'd think a ul/li
combo would be
> preferred, but that doesn't matter.
>
> How about this...
>
> $$('#vertical_container h2').each(function(h2, idx)
> {h2.addClassName('name'+idx)})
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

On Dec 23, 4:26 am, chris at zeus <ch...zeuscomics.com> wrote:
> I'm working with stickman's accordion script. and it
works great, but
> I'm trying to add some additional class names my list
within the
> accordion.
>
> For example:
>
> <div id="vertical_container">
>         <h2
class="accordion_toggle">First Name</h2>
>         <h2
class="accordion_toggle">Second
Name</h2>
>         <h2
class="accordion_toggle">Third Name</h2>
> </div>
>
> I'd like it to be this:
>
> <div id="vertical_container">
>         <h2 class="accordion_toggle
name1">First Name</h2>
>         <h2 class="accordion_toggle
name2">Second Name</h2>
>         <h2 class="accordion_toggle
name3">Third Name</h2>
> </div>
>
> I cold set this manually to include an individual class
for each one,
> but I would rather have this done in Javascript.
>
> function Names() {
>          var mylist =
document.getElementById('vertical_container');
>          var h2 = mylist.getElementsByTagName('h2');
>
>          for (var i = 0; i < h2.length; i++) {
>                  this.h2.addClassName = 'name' + i;

Drop "this" (which is completely irrelevant
here):

                   h2.addClassName = 'name' + i;

It is hugely faster than using a class selector and each,
even if it
takes a few more lines of code (which you've already
written).


--
Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

You know I'm trying this, just because it is more familiar
that the
double dollar sign, but nothing is happening.  At least with
"this" in
front, I get errors. 

On Dec 24, 7:01 am, RobG <rg...iinet.net.au> wrote:
> On Dec 23, 4:26 am, chris at zeus <ch...zeuscomics.com> wrote:
>
>
>
> > I'm working with stickman's accordion script. and
it works great, but
> > I'm trying to add some additional class names my
list within the
> > accordion.
>
> > For example:
>
> > <div id="vertical_container">
> >         <h2
class="accordion_toggle">First Name</h2>
> >         <h2
class="accordion_toggle">Second
Name</h2>
> >         <h2
class="accordion_toggle">Third Name</h2>
> > </div>
>
> > I'd like it to be this:
>
> > <div id="vertical_container">
> >         <h2 class="accordion_toggle
name1">First Name</h2>
> >         <h2 class="accordion_toggle
name2">Second Name</h2>
> >         <h2 class="accordion_toggle
name3">Third Name</h2>
> > </div>
>
> > I cold set this manually to include an individual
class for each one,
> > but I would rather have this done in Javascript.
>
> > function Names() {
> >          var mylist =
document.getElementById('vertical_container');
> >          var h2 =
mylist.getElementsByTagName('h2');
>
> >          for (var i = 0; i < h2.length; i++) {
> >                  this.h2.addClassName = 'name' +
i;
>
> Drop "this" (which is completely irrelevant
here):
>
>                    h2.addClassName = 'name' + i;
>
> It is hugely faster than using a class selector and
each, even if it
> takes a few more lines of code (which you've already
written).
>
> --
> Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

On Dec 25, 4:27 pm, chris at zeus <ch...zeuscomics.com> wrote:
> You know I'm trying this, just because it is more
familiar that the
> double dollar sign, but nothing is happening.  At least
with "this" in
> front, I get errors. 

RobG has led you astray! ;)

addClassName is a method and should be invoked as such:

$(h2).addClassName('name' + i);

If you want to use the native getElementsByTagName method,
you need to
wrap the individual nodes in $ or Element.extend before
calling
instance methods. This is unnecessary if you use $$.

Cheers,
Andrew

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

Fair enough.

Here's what I noticed.  Since lists start with 0 and my
sliced images
(Photoshop) start with 1, I changed the code to this:

	h2.addClassName('name' + ++idx)

It works, but I'm curious if I'm just being lazy/hacky.

Thanks for your help, btw.

On Dec 25, 9:50 pm, Andrew Dupont <goo...andrewdupont.net> wrote:
> On Dec 25, 4:27 pm, chris at zeus <ch...zeuscomics.com> wrote:
>
> > You know I'm trying this, just because it is more
familiar that the
> > double dollar sign, but nothing is happening.  At
least with "this" in
> > front, I get errors. 
>
> RobG has led you astray! ;)
>
> addClassName is a method and should be invoked as
such:
>
> $(h2).addClassName('name' + i);
>
> If you want to use the native getElementsByTagName
method, you need to
> wrap the individual nodes in $ or Element.extend before
calling
> instance methods. This is unnecessary if you use $$.
>
> Cheers,
> Andrew
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

I'd change it to

h2.addClassName('name' + (idx + 1));

because some JavaScript minimizers assume whitespace isn't
significant
and would be tripped up by three plus signs in a row.
(Wrapping "+
+idx" in parentheses is another way to solve that
problem.)

Cheers,
Andrew

On Dec 27, 1:28 pm, chris at zeus <ch...zeuscomics.com> wrote:
> Fair enough.
>
> Here's what I noticed.  Since lists start with 0 and my
sliced images
> (Photoshop) start with 1, I changed the code to this:
>
>         h2.addClassName('name' + ++idx)
>
> It works, but I'm curious if I'm just being
lazy/hacky.
>
> Thanks for your help, btw.
>
> On Dec 25, 9:50 pm, Andrew Dupont <goo...andrewdupont.net> wrote:
>
> > On Dec 25, 4:27 pm, chris at zeus <ch...zeuscomics.com> wrote:
>
> > > You know I'm trying this, just because it is
more familiar that the
> > > double dollar sign, but nothing is happening.
 At least with "this" in
> > > front, I get errors. 
>
> > RobG has led you astray! ;)
>
> > addClassName is a method and should be invoked as
such:
>
> > $(h2).addClassName('name' + i);
>
> > If you want to use the native getElementsByTagName
method, you need to
> > wrap the individual nodes in $ or Element.extend
before calling
> > instance methods. This is unnecessary if you use
$$.
>
> > Cheers,
> > Andrew
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---