I get the same result if I use the following more simple method:
var switchlinks = document.getElementsByClassName('switcher');
I have never seen this problem before... I can only think that the
HTML is incorrectly formatted... This is only meant to be a five
minute example to show another developer and the creative team... I've
looked at this for nearly an hour and got no where...
On Jun 21, 4:30 pm, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> On Jun 21, 4:22 pm, Tom Gregory <[EMAIL PROTECTED]> wrote:> I'll bet what
> you're seeing is an implicit toString() implementation
> > by the browser. You're getting elements back, but it's converting
> > them output to hyperlinks when you alert().
>
> I thought that but if a test the value more explicitly in the
> iteration loop by outputting the type of the DOM object I get an
> undefined output or at least a NULL value.
>
> unction setupSwitches(){
> //we define two arrays, containing our switches and divs.
> var switchlinks = $$('a.switcher');
> var stretchdivs = $$('.stretcher');
> alert(switchlinks);
> alert(stretchdivs);
>
> //then we create the effect.
> switchlinks.each(function(s){
> alert(s.type); // This alert has not output at all it is NULL
> s.onClick = function()
> {
> // function actions here
> }
> });
>
> }
> > TAG
>
> > On Jun 21, 2007, at 9:15 AM, [EMAIL PROTECTED] wrote:
>
> > > Hi I have a problem that I have never come across before while using
> > > prototype...
>
> > > I am using this selector $$('a.switch'), and I had expected and array
> > > of DOM objects to be returned e.g.
> > > [object HTMLAElement],[object HTMLAElement],[object HTMLAElement],
> > > [object HTMLAElement]
>
> > > but what I get is and array that contains the href value of the a tags
> > > e.g.
>
> > >http://www.domain.co.uk/page.html#
>
> > > Is this a bug or am I missing something... I have some more long
> > > winded javascript that works but I wanted to use the new CSS selectors
>
> > > here is the code:
>
> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > > "http://
> > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> > > <head>
>
> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> > > <meta name="title" content="Expandable Div" />
> > > <meta name="robots" content="index, follow" />
> > > <meta name="description" content="checkbox" />
> > > <meta name="keywords" content="checkbox" />
> > > <meta name="language" content="en" />
>
> > > <title>Expandable Div</title>
>
> > > <link rel="shortcut icon" href="/favicon.ico" />
>
> > > <script type="text/javascript" src="js/prototype.js"></script>
> > > <script type="text/javascript" src="js/scriptaculous.js"></script>
> > > <link rel="stylesheet" type="text/css" media="screen" href="css/
> > > master.css" />
>
> > > </head>
> > > <body>
> > > <h1>Expandable Div Example</h1>
> > > <div>
> > > <a href="#" id="switch1" class="switch">Click to expand 1</a>
> > > <div id="region1" class="stretcher" style="display: none">
> > > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> > > Nam
> > > vehicula dapibus nibh.
> > > Sed eget nulla. Vestibulum mollis, pede quis iaculis imperdiet,
> > > sapien enim fringilla velit,
> > > sed pulvinar leo risus eget eros. Etiam pede. In hac habitasse
> > > platea dictumst. Nulla facilisi.
> > > Fusce consequat eros sit amet nisl sollicitudin pretium.
> > > Praesent
> > > nulla nulla, posuere quis,
> > > bibendum non, vestibulum sed, risus. Donec mollis hendrerit
> > > libero.
> > > Fusce eleifend lacus non
> > > augue. In venenatis turpis ac diam.</p>
> > > <p>Nam feugiat, metus a ultricies dictum, diam nibh convallis
> > > est,
> > > ut pellentesque ipsum dolor
> > > placerat lorem. Nulla laoreet nulla ut orci. Nunc ut augue.
> > > Vestibulum nec magna. Fusce convallis.
> > > Donec blandit. Morbi lobortis magna et nulla. Aenean varius
> > > lectus
> > > id nisl. Nam vestibulum.
> > > Cras diam dui, auctor eget, mollis nec, volutpat egestas,
> > > mauris.
> > > Integer turpis. Vivamus ut
> > > arcu. Sed libero tortor, dapibus id, blandit at, pulvinar a,
> > > enim.
> > > In gravida eros.
> > > Proin malesuada urna ac massa. Cras vulputate. Ut adipiscing
> > > venenatis arcu.</p>
> > > </div>
> > > </div>
> > > <div>
> > > <a href="#" id="switch2" class="switch">Click to expand 2</a>
> > > <div id="region2" class="stretcher" style="display: none">
> > > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> > > Nam
> > > vehicula dapibus nibh.
> > > Sed eget nulla. Vestibulum mollis, pede quis iaculis imperdiet,
> > > sapien enim fringilla velit,
> > > sed pulvinar leo risus eget eros. Etiam pede. In hac habitasse
> > > platea dictumst. Nulla facilisi.
> > > Fusce consequat eros sit amet nisl sollicitudin pretium.
> > > Praesent
> > > nulla nulla, posuere quis,
> > > bibendum non, vestibulum sed, risus. Donec mollis hendrerit
> > > libero.
> > > Fusce eleifend lacus non
> > > augue. In venenatis turpis ac diam.</p>
> > > <p>Nam feugiat, metus a ultricies dictum, diam nibh convallis
> > > est,
> > > ut pellentesque ipsum dolor
> > > placerat lorem. Nulla laoreet nulla ut orci. Nunc ut augue.
> > > Vestibulum nec magna. Fusce convallis.
> > > Donec blandit. Morbi lobortis magna et nulla. Aenean varius
> > > lectus
> > > id nisl. Nam vestibulum.
> > > Cras diam dui, auctor eget, mollis nec, volutpat egestas,
> > > mauris.
> > > Integer turpis. Vivamus ut
> > > arcu. Sed libero tortor, dapibus id, blandit at, pulvinar a,
> > > enim.
> > > In gravida eros.
> > > Proin malesuada urna ac massa. Cras vulputate. Ut adipiscing
> > > venenatis arcu.</p>
> > > </div>
> > > </div>
> > > <div>
> > > <a href="#" id="switch3" class="switch">Click to expand 3</a>
> > > <div id="region3" class="stretcher" style="display: none">
> > > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> > > Nam
> > > vehicula dapibus nibh.
> > > Sed eget nulla. Vestibulum mollis, pede quis iaculis imperdiet,
> > > sapien enim fringilla velit,
> > > sed pulvinar leo risus eget eros. Etiam pede. In hac habitasse
> > > platea dictumst. Nulla facilisi.
> > > Fusce consequat eros sit amet nisl sollicitudin pretium.
> > > Praesent
> > > nulla nulla, posuere quis,
> > > bibendum non, vestibulum sed, risus. Donec mollis hendrerit
> > > libero.
> > > Fusce eleifend lacus non
> > > augue. In venenatis turpis ac diam.</p>
> > > <p>Nam feugiat, metus a ultricies dictum, diam nibh convallis
> > > est,
> > > ut pellentesque ipsum dolor
> > > placerat lorem. Nulla laoreet nulla ut orci. Nunc ut augue.
> > > Vestibulum nec magna. Fusce convallis.
> > > Donec blandit. Morbi lobortis magna et nulla. Aenean varius
> > > lectus
> > > id nisl. Nam vestibulum.
> > > Cras diam dui, auctor eget, mollis nec, volutpat egestas,
> > > mauris.
> > > Integer turpis. Vivamus ut
> > > arcu. Sed libero tortor, dapibus id, blandit at, pulvinar a,
> > > enim.
> > > In gravida eros.
> > > Proin malesuada urna ac massa. Cras vulputate. Ut adipiscing
> > > venenatis arcu.</p>
> > > </div>
> > > </div>
> > > <script type="text/javascript">
>
> > > function setupSwitches(){
> > > //we define two arrays, containing our switches and divs.
> > > var switchlinks = $$('a.switch');
> > > var stretchdivs = $$('.stretcher');
> > > alert(switchlinks);
> > > alert(stretchdivs);
>
> > > //then we create the effect.
> > > switchlinks.each(function(elem){
> > > elem.onClick = function()
> > > {
> > > // function actions here
> > > }
> > > });
> > > }
>
> > > Event.observe(window, 'load', setupSwitches);
>
> > > </script>
> > > </body>
> > > </html>
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
