Simple Tree Menu Error...

I posted this question on
http://www.dynamicdrive.com/forums/showthread.php?t=14831

But, it seems as though this is dead forum.

I was wondering if someone could help me out with this question....I'm not sure if it's a CSS issue or a JS issue.

1) Script Title:
Simple Tree Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem:

For some reason, when expanding a parent list, the open.gif image will display on my index page. But, on sub pages within sub directories, the image doesn't display....

Closed.gif displays, but, open.gif doesn't. The arrows displays as well.

I am pointing to the correct style sheet for all the other images display....

I'm guessing it's an issue within the .css file.

This is the CSS
------------------------------

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(../images/list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(../images/closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}


This is the Javascript that I had to edit
-------------------------------------------------
var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="../images/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="../images/open.gif" //set image path to "open" folder image


This is the original link to this script: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm


Thanks for anyone that can help out!




Please help!

Thanks!
meechp123Asked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
 so you made the changes.  Are you saying that the original problem still exists?
0
 
HonorGodSoftware EngineerCommented:
hm.  I don't know what you did, I was able to get the following to work:
-------------------------------------------------------------------------------------- SimpleTree.html
<html>
<head>
<title> Simple Tree Menu </title>
<!--
From: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
  -->

<script type='text/javascript' src='simpletreemenu.js'>

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<link rel='stylesheet' type='text/css' href='simpletree.css' />
</head>
<body>

<h4>Simple Tree Menu #1 (persist enabled):</h4>

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contract')">Contract All</a>

<ul id="treemenu1" class="treeview">
<li>Item 1</li>
<li>Item 2</li>

<li>Folder 1
      <ul>
      <li>Sub Item 1.1</li>
      <li>Sub Item 1.2</li>
      </ul>
</li>
<li>Item 3</li>

<li>Folder 2
      <ul>
      <li>Sub Item 2.1</li>
      <li>Folder 2.1
            <ul>
            <li>Sub Item 2.1.1</li>
            <li>Sub Item 2.1.2</li>
            </ul>
      </li>
</ul>
</li>

<li>Item 4</li>
</ul>

<h4>Simple Tree Menu #2 (Folder 1.1 open by default):</h4>

<a href="javascript:ddtreemenu.flatten('treemenu2', 'expand')">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu2', 'contract')">Contract All</a>

<ul id="treemenu2" class="treeview">
<li>Item 1</li>

<li>Folder 1
      <ul>
      <li>Sub Item 1.1</li>
      <li>Folder 1.1
            <ul rel="open">
            <li>Sub Item 1.1.1</li>
            <li>Sub Item 1.1.2</li>
            <li>Folder 1.1.1
                  <ul>
                  <li>Sub item 1.1.1.1</li>
                  <li>Sub item 1.1.1.2</li>
                  <li>Sub item 1.1.1.3</li>
                  <li>Sub item 1.1.1.4</li>
                  </ul>
            </li>
            </ul>
      </li>
    </ul>
</li>

<li>Item 2</li>
</ul>

<script type="text/javascript">
  ddtreemenu.flatten('treemenu1', 'contract');
  ddtreemenu.createTree("treemenu1", true);
  ddtreemenu.createTree("treemenu2", false);
</script>

</body>
</html>
--------------------------------------------------------------------------------------  simpletree.css
.treeview ul {               /* CSS for Simple Tree Menu */
  margin  : 0;
  padding : 0;
}

.treeview li {               /* Style for LI elements in general (excludes an LI that contains sub lists) */
  background      : white url(list.gif) no-repeat left center;
  list-style-type : none;
  padding-left    : 22px;
  margin-bottom   : 3px;
}

.treeview li.submenu {       /* Style for LI that contains sub lists (other ULs). */
  background : white url(closed.gif) no-repeat left 1px;
}


.treeview li.submenu ul {    /* Style for ULs that are children of LIs (submenu) */
  display : none;            /*Hide them by default. Don't delete. */
}
-------------------------------------------------------------------------------------- simpletree.js
var persisteduls = new Object();
var ddtreemenu   = new Object();

ddtreemenu.closefolder = 'images/closed.gif'; // set image path to 'closed' folder image
ddtreemenu.openfolder  = 'images/open.gif';   // set image path to 'open' folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.openURL     = 'url(' + ddtreemenu.openfolder + ')';
ddtreemenu.closeURL    = 'url(' + ddtreemenu.closefolder + ')';

ddtreemenu.createTree = function( treeid, enablepersist, persistdays ) {
  var ultags = document.getElementById( treeid ).getElementsByTagName( 'ul' );
  if ( typeof( persisteduls[ treeid ] ) == 'undefined' ) {
    // See ddtreemenu.rememberstate for what we expect to be contained in the cookie
    persisteduls[ treeid ] = ( enablepersist && this.getCookie( treeid ) != '' ) ? this.getCookie( treeid ).split( ',' ) : '';
  }
  for ( var i = 0; i < ultags.length; i++ ) {
    this.buildSubTree( treeid, ultags[ i ], i );
  }
  // if enable persist feature
  if ( enablepersist ){
    var durationdays = ( typeof( persistdays ) == 'undefined' ) ? 1 : parseInt( persistdays );
    //save opened UL indexes on body unload
    this.dotask( window, function(){ ddtreemenu.rememberstate( treeid, durationdays ) }, 'unload' );
  }
}

ddtreemenu.buildSubTree = function( treeid, ulelement, index ) {
  var parent = ulelement.parentNode;
  parent.className = 'submenu';
  // if cookie exists ( persisteduls[ treeid ] is an array versus '' string )
  if ( typeof( persisteduls[ treeid ] ) == 'object' ) {
    if ( this.searcharray( persisteduls[ treeid ], index ) ) {
      ulelement.setAttribute( 'rel', 'open' );
      ulelement.style.display = 'block';
      parent.style.backgroundImage = this.openURL;
    } else {
      ulelement.setAttribute( 'rel', 'closed' );
    }
    //end cookie persist code
  } else {
    //if no cookie and UL has NO rel attribute explicted added by user
    var rel = ulelement.getAttribute( 'rel' );
    if ( rel == null || rel == false ) {
      ulelement.setAttribute( 'rel', 'closed' );
      //else if no cookie and this UL has an explicit rel value of 'open'
    } else if ( rel == 'open' ) {
      //expand this UL plus all parent ULs (so the innermost UL is revealed!)
      this.openUp( treeid, ulelement );
    }
  }
  parent.onclick = function( e ) {
    var submenu = parent.getElementsByTagName( 'ul' )[ 0 ];
    if ( submenu.getAttribute( 'rel' ) == 'closed' ) {
      submenu.style.display = 'block';
      submenu.setAttribute( 'rel', 'open' );
      parent.style.backgroundImage = ddtreemenu.openURL;
    } else if ( submenu.getAttribute( 'rel' ) == 'open' ) {
      submenu.style.display = 'none';
      submenu.setAttribute( 'rel', 'closed' );
      parent.style.backgroundImage = ddtreemenu.closeURL;
    }
    ddtreemenu.preventpropagate( e );
  }
  ulelement.onclick = function( e ) {
    ddtreemenu.preventpropagate( e );
  }
}

//expand a UL element and all of its parent ULs
ddtreemenu.openUp = function( treeid, ulelement ) {
  var root    = document.getElementById( treeid );
  var current = ulelement;
  var parent  = current.parentNode;
  current.style.display = 'block';
  parent.style.backgroundImage = this.openURL;
  while ( current != root ) {
    //if parent node is a UL, expand it too
    if ( current.tagName == 'UL' ) {
      current.style.display = 'block';
      current.setAttribute( 'rel', 'open' );
      parent.style.backgroundImage = this.openURL;
    }
    current = parent;
    parent  = current.parentNode;
  }
}

//expand or contract all UL elements
ddtreemenu.flatten = function( treeid, action ) {
  var ultags = document.getElementById( treeid ).getElementsByTagName( 'ul' );
  var expanding = action == 'expand';
  for ( var i = 0; i < ultags.length; i++ ) {
    ultags[ i ].style.display = expanding ? 'block' : 'none';
    var relvalue = expanding ? 'open' : 'closed';
    ultags[ i ].setAttribute( 'rel', relvalue );
    ultags[ i ].parentNode.style.backgroundImage = expanding ? this.openURL : this.closeURL;
  }
}

//store index of opened ULs relative to other ULs in Tree into cookie
ddtreemenu.rememberstate = function( treeid, durationdays ) {
  var ultags  = document.getElementById( treeid ).getElementsByTagName( 'ul' );
  var openuls = [];
  for ( var i = 0; i < ultags.length; i++ ) {
    if ( ultags[ i ].getAttribute( 'rel' ) == 'open' )
    // save the index of the opened UL (relative to the entire list of ULs) as an array element
    openuls[ openuls.length ] = i;
  }
  //if there are no opened ULs to save/persist
  if ( openuls.length == 0 ) {
    //set array value to string to simply indicate all ULs should persist with state being closed
    openuls[ 0 ] = 'none open';
  }
  //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
  this.setCookie( treeid, openuls.join( ',' ), durationdays );
}

////A few utility functions below//////////////////////

//get cookie value
ddtreemenu.getCookie = function( Name ) {
  //construct RE to search for target name/value pair
  var re = new RegExp( Name + '=[^;]+', 'i' );
  //if cookie found
  if ( document.cookie.match( re ) ) {
    return document.cookie.match( re )[ 0 ].split( '=' )[ 1 ] //return its value
  }
  return '';
}

//set cookie value
ddtreemenu.setCookie = function( name, value, days ) {
  var expireDate = new Date();
  //set 'expstring' to either future or past date, to set or delete cookie, respectively
  var expstring = expireDate.setDate( expireDate.getDate() + parseInt( days ) );
  document.cookie = name + '=' + value + '; expires=' + expireDate.toGMTString() + '; path=/';
}

//searches an array for the entered value.  If found, delete value from array
ddtreemenu.searcharray = function( thearray, value ) {
  var isfound = false;
  for ( var i = 0; i < thearray.length; i++ ) {
    if ( thearray[ i ] == value ) {
      isfound = true;
      thearray.shift(); //delete element[0] from array
// From the original comment 'delete this element from array for efficiency sake' it should be:
//    thearray.splice( i, 1 );
// However, since the array is passed by value, any modifications are lost.
      break;
    }
  }
  return isfound;
}

//prevent action from bubbling upwards
ddtreemenu.preventpropagate = function( e ) {
  if ( typeof( e ) != 'undefined' ) {
    e.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

//assign a function to execute to an event handler (e.g., onunload)
ddtreemenu.dotask = function( target, functionref, tasktype ) {
  var tasktype = ( window.addEventListener ) ? tasktype : 'on' + tasktype;
  if ( target.addEventListener ) {
    target.addEventListener( tasktype, functionref, false );
  } else if ( target.attachEvent ) {
    target.attachEvent( tasktype, functionref );
  }
}
0
 
meechp123Author Commented:
I changed the path from:

In Simpletree.js
-------------------------------------------------
var persisteduls = new Object();
var ddtreemenu   = new Object();

ddtreemenu.closefolder = 'images/closed.gif'; // set image path to 'closed' folder image
ddtreemenu.openfolder  = 'images/open.gif';   // set image path to 'open' folder image


To
------------------------------------------
ddtreemenu.closefolder="../images/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="../images/open.gif" //set image path to "open" folder image



and witin the CSS FROM:
--------------------------------------
.treeview ul {               /* CSS for Simple Tree Menu */
  margin  : 0;
  padding : 0;
}

.treeview li {               /* Style for LI elements in general (excludes an LI that contains sub lists) */
  background      : white url(list.gif) no-repeat left center;
  list-style-type : none;
  padding-left    : 22px;
  margin-bottom   : 3px;
}

.treeview li.submenu {       /* Style for LI that contains sub lists (other ULs). */
  background : white url(closed.gif) no-repeat left 1px;
}


.treeview li.submenu ul {    /* Style for ULs that are children of LIs (submenu) */
  display : none;            /*Hide them by default. Don't delete. */
}


TO:
--------------------------------

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(../images/list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(../images/closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
meechp123Author Commented:
I didnt make any changes, what I posted is what I had from the start.
0
 
meechp123Author Commented:
For some reason, copying the image folder into the sub directory works....

This solves my issue, but, I still do not understand why two of the images show up and the other doesnt.....
0
 
HonorGodSoftware EngineerCommented:
Nothing comes to mind.  Sorry.  Glad you got the problem resolved though.  Good luck
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.