Help - Search - Members - Calendar
Full Version: FF safe collapsible menu?
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
add1cted2f1re
i am using this code for my collapsible menu of avatars (i use the same thing for my aim icons and cursors). it works in IE, but most ppl nowadays are using FF, and i was wondering if there is another code that does the some thing that is FF compatable, b/c it makes everything more convient and organized... PLEASE HELP cry.gif

code below; example page here: http://phoenixf1re.melilyn.com/avatars.php

CODE
<a name=top><?php include('header.php'); ?></a>


    <div class="header">Avatars</div><HR>
        <div class="entry">
<!-- start code provided by createblog.com -->
<style>
<!--
#foldheader{cursor:pointer;cursor:hand; font-weight:bold;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--


var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>


<ul>
   <font color=#BB3706><li id="foldheader">Music</li></font>
   <ul id="foldinglist" style="display:none" style=&{head};>
   <li id="foldheader">Fall Out Boy</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/fob/1.jpg" hspace=1>
    <img src="images/avatars/fob/2.jpg" hspace=1>
    <img src="images/avatars/fob/3.jpg" hspace=1>
    <img src="images/avatars/fob/4.jpg" hspace=1>
    <img src="images/avatars/fob/5.jpg" hspace=1>
    <img src="images/avatars/fob/6.jpg" hspace=1>
    <img src="images/avatars/fob/7.jpg" hspace=1>
    <img src="images/avatars/fob/8.jpg" hspace=1>
    <img src="images/avatars/fob/9.jpg" hspace=1>
    <img src="images/avatars/fob/10.jpg" hspace=1>
    <img src="images/avatars/fob/11.jpg" hspace=1>
    <img src="images/avatars/fob/12.jpg" hspace=1>
    <img src="images/avatars/fob/13.jpg" hspace=1>
    <img src="images/avatars/fob/14.jpg" hspace=1>
</ul>
   <li id="foldheader">Panic! At the Disco</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/patd/1.jpg" hspace=1>
    <img src="images/avatars/patd/2.jpg" hspace=1>
    <img src="images/avatars/patd/3.jpg" hspace=1>
    <img src="images/avatars/patd/4.jpg" hspace=1>
    <img src="images/avatars/patd/5.jpg" hspace=1>
    <img src="images/avatars/patd/6.gif" hspace=1>
    <img src="images/avatars/patd/7.jpg" hspace=1>
    <img src="images/avatars/patd/8.jpg" hspace=1>
    <img src="images/avatars/patd/9.jpg" hspace=1>
    <img src="images/avatars/patd/10.jpg" hspace=1>
    <img src="images/avatars/patd/11.jpg" hspace=1>
    <img src="images/avatars/patd/12.jpg" hspace=1>
    <img src="images/avatars/patd/13.jpg" hspace=1>
    <img src="images/avatars/patd/14.jpg" hspace=1>
    <img src="images/avatars/patd/15.jpg" hspace=1>
    <img src="images/avatars/patd/16.jpg" hspace=1>
    <img src="images/avatars/patd/17.jpg" hspace=1>
    <img src="images/avatars/patd/18.jpg" hspace=1>
    <img src="images/avatars/patd/19.gif" hspace=1>

</ul>
</ul></ul>
<ul>
   <font color=#BB3706><li id="foldheader">Television</li></font>
   <ul id="foldinglist" style="display:none" style=&{head};>
   <li id="foldheader">Sesame Street</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/sesame/krammit.gif" hspace=1>
    <img src="images/avatars/sesame/krammit2.gif" hspace=1>
</ul></ul></ul>

<ul>
   <font color=#BB3706><li id="foldheader">Funny</li></font>
   <ul id="foldinglist" style="display:none" style=&{head};>
   <li id="foldheader">Potter Puppet Pals</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/potter/puppetpalz.gif" hspace=1>
    <img src="images/avatars/potter/nakedtime.gif" hspace=1>
    <img src="images/avatars/potter/bother.gif" hspace=1>
    <img src="images/avatars/potter/avada.gif" hspace=1>
</ul></ul></ul>


<ul>
   <font color=#BB3706><li id="foldheader">Insulting</li></font>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/insults/shutmouth.gif" hspace=1>
    <img src="images/avatars/insults/shutmouth2.gif" hspace=1>    
    <img src="images/avatars/insults/shutup.gif" hspace=1>
    <img src="images/avatars/insults/idiot.gif" hspace=1>
    <img src="images/avatars/insults/idiots.gif" hspace=1>
    <img src="images/avatars/insults/shutup2.gif" hspace=1>
    <img src="images/avatars/insults/no1likes.gif" hspace=1>
    <img src="images/avatars/insults/no1likes2.gif" hspace=1>

</ul>
</ul>

<ul>
   <font color=#BB3706><li id="foldheader">Random</li></font>
   <ul id="foldinglist" style="display:none" style=&{head};>
    <img src="images/avatars/random/illjump.gif" hspace=1>
    <img src="images/avatars/random/drizzle.gif" hspace=1>
</ul>
</ul>
<!-- start code provided by createblog.com -->
<script language="JavaScript1.2">
<!--

function get_cookie(Name) {
//Get cookie routine by Shelley Powers
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    // if cookie exists
    if (offset != -1) {
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1) end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

var foldercontentarray=new Array()
var c=0

if (ns6){
for (i=0;i<document.getElementsByTagName("UL").length;i++){
if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
foldercontentarray[c]=document.getElementsByTagName("UL")[i]
c++
}
}
}

if (get_cookie(window.location.pathname) != ''){
  var openresults=get_cookie(window.location.pathname).split(" ")
  for (i=0; i < openresults.length; i++){
    if (ns6){
    foldercontentarray[openresults[i]].style.display=''
    foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"
    }
    else{
    foldinglist[openresults[i]].style.display=''
    document.all[foldinglist[openresults[i]].sourceIndex -1].style.listStyleImage="url(open.gif)"
    }
  }
}

if (ns6||ie4){
var nodelength=ns6? c-1 : foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}

function checkit(){
  for (i=0; i <= nodelength; i++){
    if ((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
       openones=openones + " " + i
  }
  document.cookie=window.location.pathname+"="+openones
}

if (ns6||ie4)
window.onunload=checkit
//-->
</script>
<!-- end code provided by createblog.com -->


</font>
<?php include('footer.php'); ?>
Parasite1
page wont load for me :/
add1cted2f1re
did u try in FF or IE?
talcumpowder
IE, ain't loading for me either. I personally like this menu, which works fine in FF.
add1cted2f1re
idky its not loading for y'all, it loads just fine on every computer i use

thnx reili, would this work w/ php?
talcumpowder
Piece of crap school computers, it works now. &yah, but you'd end up with the Javascript portion in your header file (at least that's how I used to use it.). So it's shouw up in the head section.
add1cted2f1re
thnx reili
duplicatex0x0x0
Closed:
Another topic started with similar question
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.