Hi,
I have a nested unordered list that I'm using as a side nav for
categories that have a tree structure, and I've successfully gotten
Effect.toggle("slide"... to work in FF, Safari, Chrome, but it's not
working in IE (6|7) and I can't see why.
Clicking on one of the categories that has children should open up the
div containing its children and close other open divs. On IE only the
initially displayed elements display.
Here's an excerpt of the ul:
<div id="catNav" style="height: 100%; margin-left: -15px;">
<div id="parent_id0">
<ul>
<li id="cat_id11" class="hasChildren"><a href="/venue/cat_id/11/
Restaurants" class="" style="" id="cat11">Restaurants</a><div
id="parent_id11" style="display: none;">
<ul>
<li id="cat_id60" class="hasChildren"><a href="/venue/cat_id/60/
Western" class="" style="" id="cat60">Western</a><div id="parent_id60"
style="display: none;">
<ul>
<li id="cat_id37" class="noChildren"><a href="/venue/cat_id/37/
American" class="" style="" id="cat37">American</a></li>
<li id="cat_id39" class="noChildren"><a href="/venue/cat_id/39/
Italian" class="" style="" id="cat39">Italian</a></li>
<li id="cat_id41" class="noChildren"><a href="/venue/cat_id/41/
Meditarranean" class="" style="" id="cat41">Meditarranean</a></li>
<li id="cat_id42" class="noChildren"><a href="/venue/cat_id/42/
French" class="" style="" id="cat42">French</a></li>
<li id="cat_id59" class="noChildren"><a href="/venue/cat_id/59/Irish"
class="" style="" id="cat59">Irish</a></li>
<li id="cat_id61" class="noChildren"><a href="/venue/cat_id/61/Steak"
class="" style="" id="cat61">Steak</a></li>
<li id="cat_id65" class="noChildren"><a href="/venue/cat_id/65/
Mexican" class="" style="" id="cat65">Mexican</a></li>
<li id="cat_id68" class="noChildren"><a href="/venue/cat_id/68/
Belgian" class="" style="" id="cat68">Belgian</a></li>
<li id="cat_id69" class="noChildren"><a href="/venue/cat_id/69/
German" class="" style="" id="cat69">German</a></li>
<li id="cat_id70" class="noChildren"><a href="/venue/cat_id/70/Czech"
class="" style="" id="cat70">Czech</a></li>
<li id="cat_id71" class="noChildren"><a href="/venue/cat_id/71/
Russian" class="" style="" id="cat71">Russian</a></li>
<li id="cat_id72" class="noChildren"><a href="/venue/cat_id/72/
Brazilian" class="" style="" id="cat72">Brazilian</a></li>
<li id="cat_id75" class="noChildren"><a href="/venue/cat_id/75/
Ukrainian" class="" style="" id="cat75">Ukrainian</a></li>
<li id="cat_id116" class="noChildren"><a href="/venue/cat_id/116/
Uzbek" class="" style="" id="cat116">Uzbek</a></li>
<li id="cat_id125" class="noChildren"><a href="/venue/cat_id/125/
Spanish" class="" style="" id="cat125">Spanish</a></li>
<li id="cat_id160" class="noChildren"><a href="/venue/cat_id/160/
Lebanese" class="" style="" id="cat160">Lebanese</a></li>
</ul>
</div></li>
<li id="cat_id64" class="hasChildren"><a href="/venue/cat_id/64/
Asian" class="" style="" id="cat64">Asian</a><div id="parent_id64"
style="display: none;">
<ul>
<li id="cat_id38" class="noChildren"><a href="/venue/cat_id/38/
Chinese" class="" style="" id="cat38">Chinese</a></li>
<li id="cat_id40" class="noChildren"><a href="/venue/cat_id/40/
Japanese" class="" style="" id="cat40">Japanese</a></li>
<li id="cat_id43" class="noChildren"><a href="/venue/cat_id/43/Thai"
class="" style="" id="cat43">Thai</a></li>
<li id="cat_id44" class="noChildren"><a href="/venue/cat_id/44/Middle-
Eastern" class="" style="" id="cat44">Middle Eastern</a></li>
<li id="cat_id45" class="hasChildren"><a href="/venue/cat_id/45/
Vietnamese" class="" style="" id="cat45">Vietnamese</a><div
id="parent_id45" style="display: none;">
<ul>
<li id="cat_id50" class="noChildren"><a href="/venue/cat_id/50/Dog"
class="" style="" id="cat50">Dog</a></li>
<li id="cat_id51" class="noChildren"><a href="/venue/cat_id/51/Cat"
class="" style="" id="cat51">Cat</a></li>
<li id="cat_id52" class="noChildren"><a href="/venue/cat_id/52/
Barbequeue" class="" style="" id="cat52">Barbequeue</a></li>
<li id="cat_id53" class="noChildren"><a href="/venue/cat_id/53/Pho"
class="" style="" id="cat53">Phở</a></li>
<li id="cat_id54" class="noChildren"><a href="/venue/cat_id/54/Pho-
Xao" class="" style="" id="cat54">Phở Xào</a></li>
<li id="cat_id55" class="noChildren"><a href="/venue/cat_id/55/Bun-
Cha" class="" style="" id="cat55">Bún Chả</a></li>
<li id="cat_id56" class="noChildren"><a href="/venue/cat_id/56/Bun-
Ca" class="" style="" id="cat56">Bún Cá</a></li>
<li id="cat_id57" class="noChildren"><a href="/venue/cat_id/57/Lau"
class="" style="" id="cat57">Lẩu</a></li>
<li id="cat_id58" class="noChildren"><a href="/venue/cat_id/58/Banh-
Cuon" class="" style="" id="cat58">Bánh Cuốn</a></li>
<li id="cat_id62" class="noChildren"><a href="/venue/cat_id/62/Luon"
class="" style="" id="cat62">Lươn</a></li>
<li id="cat_id63" class="noChildren"><a href="/venue/cat_id/63/Hue"
class="" style="" id="cat63">Huế</a></li>
<li id="cat_id73" class="noChildren"><a href="/venue/cat_id/73/Com-
Binh-Dan" class="" style="" id="cat73">Cơm Bình Dân</a></li>
<li id="cat_id74" class="noChildren"><a href="/venue/cat_id/74/Bun-
Oc" class="" style="" id="cat74">Bún Ốc</a></li>
</ul>
</div></li>
<li id="cat_id46" class="noChildren"><a href="/venue/cat_id/46/
Indian" class="" style="" id="cat46">Indian</a></li>
<li id="cat_id47" class="noChildren"><a href="/venue/cat_id/47/
Korean" class="" style="" id="cat47">Korean</a></li>
<li id="cat_id48" class="noChildren"><a href="/venue/cat_id/48/
Malaysian" class="" style="" id="cat48">Malaysian</a></li>
<li id="cat_id49" class="noChildren"><a href="/venue/cat_id/49/
Indonesian" class="" style="" id="cat49">Indonesian</a></li>
<li id="cat_id66" class="noChildren"><a href="/venue/cat_id/66/Halal"
class="" style="" id="cat66">Halal</a></li>
<li id="cat_id67" class="noChildren"><a href="/venue/cat_id/67/
Pakistani" class="" style="" id="cat67">Pakistani</a></li>
<li id="cat_id76" class="noChildren"><a href="/venue/cat_id/76/
Mongolian" class="" style="" id="cat76">Mongolian</a></li>
<li id="cat_id93" class="noChildren"><a href="/venue/cat_id/93/
Seafood" class="" style="" id="cat93">Seafood</a></li>
</ul>
</div></li>
<li id="cat_id159" class="noChildren"><a href="/venue/cat_id/159/
Vegetarian" class="" style="" id="cat159">Vegetarian</a></li>
</ul>
</div></li>
<li id="cat_id1" class="noChildren"><a href="/venue/cat_id/1/Bars"
class="" style="" id="cat1">Bars</a></li>
...
and here's the chunk of javascript I'm using:
<script type="text/javascript">
Event.observe($('catNav'),"click",function(event){
/* Get the element from where event is generated*/
var elt = $(Event.element(event)).parentNode;
/*Be sure that it under our unordered list*/
if (elt && elt.descendantOf($('catNav')) && elt.nodeName=='LI'){
//alert(elt.inspect());
/*Stop the bubling of the event */
Event.stop(event);
/* Get the child elements of the already expanded menu,
which is not parent of currently selected menu or a
child of it */
var its=$$('.selected_item').findAll(function(e){
return !elt.descendantOf(e) && !e.descendantOf(elt) &&
e!=elt
});
/*Add this special tracking class name*/
elt.addClassName("selected_item");
catRegExp = /cat_id(\d+)/;
catMatch = catRegExp.exec(elt.id);
var thisCategory = catMatch[0];
/*Hide them all*/
its.each(function(e){e.select("ul").invoke('hide')});
/*remove the tracker class off them them all*/
its.invoke("removeClassName","selected_item");
/*Collect the DIV i.e child menu container and display them*/
var ul=elt.childElements().find(function(e){return
e.nodeName=='DIV';});
if (ul) {
//alert("id: " + ul.id);
//ul.setStyle({"display":"block"});
Effect.toggle(ul.id, "slide", {duration: 0.2});
//ul.setStyle({"display":"block"});
}
updateSearchResults({"category": catMatch[1]});
}
});
</script>
If anyone has insights as to why this is not working in IE, I would be
very grateful.
TIA,
Tom
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
