Having an issue with a tree menu that I want to expand all. I get an
error on the "hasClassName" in IE, but works fine in FF. What am I
doing wrong. newbe to prototype and js.
<div id="tree_menu" >
<ul class="mktree">
<li class="licollapse"><span
class="Downbullet"> </span>Some
Name</span></a>
<ul>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
</ul>
</li>
<li class="licollapse"><span
class="Downbullet"> </span>Some
Name</span></a>
<ul>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
</ul>
</li>
<li class="licollapse"><span
class="Downbullet"> </span>Some
Name</span></a>
<ul>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
<li class="liBullet"><span
class="Downbullet"> </
span>loading...</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
function expand_all(){
var children = document.getElementsByTagName( "li" );
for ( var a = 0; a < children.length; a++ ){
if(children[a].hasClassName("licollapse")){
children[a].removeClassName("licollapse");
children[a].addClassName("liexpand");
}
}
}
--~--~---------~--~----~------------~-------~--~----~
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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
The issue is that getElementsByTagName is not returning extended
Elements in IE - it works fine in FF because all elements are
automatically extended.
There are a number of ways to solve this
One would be to extend the elements that are returned
var children $A(document.getElementsByTagName( "li"
)).map(Element.extend);
for ( var a = 0; a < children.length; a++ ){
if(children[a].hasClassName("licollapse")){
children[a].removeClassName("licollapse");
children[a].addClassName("liexpand");
}
}
}
if going with the first approach I would also look at the docs for the
Enumerable class and start using some of its features to simplify the
code and make its meaning cleaner
$A(document.getElementsByTagName( "li"
)).map(Element.extend).each(function(child)
{
if(child.hasClassName("licollapse")){
child.removeClassName("licollapse");
child.addClassName("liexpand");
}
});
Another approach would be to call the static methods on Element
var children = document.getElementsByTagName( "li" );
for ( var a = 0; a < children.length; a++ ){
if(Element.hasClasName(children[a],"licollapse")){
Element.removeClassName(children[a],"licollapse");
Element.addClassName(children[a],"liexpand");
}
}
}
Hope that helps
Tom
--~--~---------~--~----~------------~-------~--~----~
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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
i think you are missing to extend the dom objects in IE6 $
(children[a]).hasClassName/removeClassName/...
however you could simply do it with CSS and without prototype by
setting just the parent div class to "allexpanded" and then apply to
div#tree_menu.allexpanded ul li.liBullet {
display: block;
}
however your html is so wrong and way off. you just dont do nest an
unordered list inside a list element it just doesnt make any sense.
--~--~---------~--~----~------------~-------~--~----~
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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Great thanks guys, That was fast. --~--~---------~--~----~------------~-------~--~----~ 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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
One more question what does the $A() do? why not just $ or $($))? reading from. http://www.prototypejs.org/learn/extensions On Oct 11, 7:42 am, jgshier <jgsh...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Great thanks guys, That was fast.--~--~---------~--~----~------------~-------~--~----~ 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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
So in reading "http://www.prototypejs.org/learn/extensions" I am trying to understand what your "$A" does. I see in the the docs it talks about $ or even $($)). If I don''t use the enumerable class and try to first example. It works in IE but not FF. At that point do I have to start looking to find out what browser someone is using? Again I am very new to js. Thanks On Oct 10, 9:49 pm, Tom <twalp...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> The issue is that getElementsByTagName is not returning extended > Elements in IE - it works fine in FF because all elements are > automatically extended. > > There are a number of ways to solve this > > One would be to extend the elements that are returned > > var children > $A(document.getElementsByTagName( "li" )).map(Element.extend); > for ( var a = 0; a < children.length; a++ ){ > if(children[a].hasClassName("licollapse")){ > children[a].removeClassName("licollapse"); > children[a].addClassName("liexpand"); > } > } > } > > if going with the first approach I would also look at the docs for the > Enumerable class and start using some of its features to simplify the > code and make its meaning cleaner > > $A(document.getElementsByTagName( "li" )).map(Element.extend).each(function(child) > { > if(child.hasClassName("licollapse")){ > child.removeClassName("licollapse"); > child.addClassName("liexpand"); > } > }); > > Another approach would be to call the static methods on Element > > var children = document.getElementsByTagName( "li" ); > for ( var a = 0; a < children.length; a++ ){ > if(Element.hasClasName(children[a],"licollapse")){ > > Element.removeClassName(children[a],"licollapse"); > Element.addClassName(children[a],"liexpand"); > } > } > } > > Hope that helps > > Tom--~--~---------~--~----~------------~-------~--~----~ 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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The $A converts the nodelist returned by getElementsByTagName to an array so that the enumerable functions can be used with it http://www.prototypejs.org/api/utility/dollar-a. You shouldnt need to start detecting what browser the user is using, you just need to be aware that IE doesnt automatically extend Elements so when using any native DOM functions that return elements you will need to extend them (or call the static members and pass in the element) before calling the prototype library functions. That being said, off the top of my head I dont understand why my first example would work in IE but not FF. Do you have firebug installed in firefox? if so are any errors reported? Tom On Oct 11, 8:11 am, jgshier <jgsh...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> So in reading "http://www.prototypejs.org/learn/extensions" I am > trying to understand what your "$A" does. I see in the the docs it > talks about $ or even $($)). If I don''t use the enumerable class and > try to first example. It works in IE but not FF. At that point do I > have to start looking to find out what browser someone is using? Again > I am very new to js. > > Thanks > > On Oct 10, 9:49 pm, Tom <twalp...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > The issue is that getElementsByTagName is not returning extended > > Elements in IE - it works fine in FF because all elements are > > automatically extended. > > > There are a number of ways to solve this > > > One would be to extend the elements that are returned > > > var children > > $A(document.getElementsByTagName( "li" )).map(Element.extend); > > for ( var a = 0; a < children.length; a++ ){ > > if(children[a].hasClassName("licollapse")){ > > children[a].removeClassName("licollapse"); > > children[a].addClassName("liexpand"); > > } > > } > > } > > > if going with the first approach I would also look at the docs for the > > Enumerable class and start using some of its features to simplify the > > code and make its meaning cleaner > > > $A(document.getElementsByTagName( "li" )).map(Element.extend).each(function(child) > > { > > if(child.hasClassName("licollapse")){ > > child.removeClassName("licollapse"); > > child.addClassName("liexpand"); > > } > > }); > > > Another approach would be to call the static methods on Element > > > var children = document.getElementsByTagName( "li" ); > > for ( var a = 0; a < children.length; a++ ){ > > if(Element.hasClasName(children[a],"licollapse")){ > > > Element.removeClassName(children[a],"licollapse"); > > Element.addClassName(children[a],"liexpand"); > > } > > } > > } > > > Hope that helps > > > Tom--~--~---------~--~----~------------~-------~--~----~ 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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Someone also has a horrible case of class-itis. Purify your markup, allow CSS to cascade its styles naturally. On Oct 11, 12:21 pm, Tom <twalp...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> The $A converts the nodelist returned by getElementsByTagName to an > array so that the enumerable functions can be used with ithttp://www.prototypejs.org/api/utility/dollar-a. You shouldnt need to > start detecting what browser the user is using, you just need to be > aware that IE doesnt automatically extend Elements so when using any > native DOM functions that return elements you will need to extend them > (or call the static members and pass in the element) before calling > the prototype library functions. That being said, off the top of my > head I dont understand why my first example would work in IE but not > FF. Do you have firebug installed in firefox? if so are any errors > reported? > > Tom > > On Oct 11, 8:11 am, jgshier <jgsh...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > So in reading "http://www.prototypejs.org/learn/extensions" I am > > trying to understand what your "$A" does. I see in the the docs it > > talks about $ or even $($)). If I don''t use the enumerable class and > > try to first example. It works in IE but not FF. At that point do I > > have to start looking to find out what browser someone is using? Again > > I am very new to js. > > > Thanks > > > On Oct 10, 9:49 pm, Tom <twalp...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > The issue is that getElementsByTagName is not returning extended > > > Elements in IE - it works fine in FF because all elements are > > > automatically extended. > > > > There are a number of ways to solve this > > > > One would be to extend the elements that are returned > > > > var children > > > $A(document.getElementsByTagName( "li" )).map(Element.extend); > > > for ( var a = 0; a < children.length; a++ ){ > > > if(children[a].hasClassName("licollapse")){ > > > children[a].removeClassName("licollapse"); > > > children[a].addClassName("liexpand"); > > > } > > > } > > > } > > > > if going with the first approach I would also look at the docs for the > > > Enumerable class and start using some of its features to simplify the > > > code and make its meaning cleaner > > > > $A(document.getElementsByTagName( "li" )).map(Element.extend).each(function(child) > > > { > > > if(child.hasClassName("licollapse")){ > > > child.removeClassName("licollapse"); > > > child.addClassName("liexpand"); > > > } > > > }); > > > > Another approach would be to call the static methods on Element > > > > var children = document.getElementsByTagName( "li" ); > > > for ( var a = 0; a < children.length; a++ ){ > > > if(Element.hasClasName(children[a],"licollapse")){ > > > > Element.removeClassName(children[a],"licollapse"); > > > Element.addClassName(children[a],"liexpand"); > > > } > > > } > > > } > > > > Hope that helps > > > > Tom--~--~---------~--~----~------------~-------~--~----~ 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-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---