Solved

Simple Tree Menu Error...

Posted on 2006-11-14
6
773 Views
Last Modified: 2012-05-05
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!
0
Comment
Question by:meechp123
  • 3
  • 3
6 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 17939768
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
 

Author Comment

by:meechp123
ID: 17939977
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 17947877
 so you made the changes.  Are you saying that the original problem still exists?
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:meechp123
ID: 17950447
I didnt make any changes, what I posted is what I had from the start.
0
 

Author Comment

by:meechp123
ID: 17968112
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 18070053
Nothing comes to mind.  Sorry.  Glad you got the problem resolved though.  Good luck
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now