Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20
  1. #16
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Hi again,

    You are spot on in your last post.

    The way the page is setup is:

    Left nav menu is contained in a Div. It is populated by the code you so kindly supplied. The directory structure is as follows:

    Code:
    Holden
             --> Cougar
                          --> SS
             --> Panther
    Ford
             --> Falcon
             --> Panther
             --> Eagle
                          --> SS
             --> Hawk
    etc. etc. I have set the menu path in your code to always be the root directory (instead of the page location, so the upper directories display all the time, like a normal menu. The top level directory will have unique names, however some subdirectories can have the same name, though any with the same name would obviously be in different subfolders. I was thinking that a call from each index.htm page might do the trick, possibly get the location.href and somehow work back from there? though, I can see where that can cause some problems, with the forementioned spaces in the names etc. I like the idea of the parent/child relationship, but don't know how to bind a particular page to that.

    Each directory and subdirectory has an index.htm page and a text file (FileName.txt). The text file contains the actual name to be displayed in the TOC (as some names can be up to 355 characters long! - don't ask). The right pane of the page loads the index.htm of the current directory. I then have a separate function to which a page call passes 2 variables (the parent directory name, and the current name). Not ideal, but it works as I want - see code below. It then displays the contents of that directory as a TOC. Some directories will not have any subdirectories and in that event, the index file will have other content and no TOC would be displayed.

    Code:
    	function createFilePath(a,b){
    		var fso = new ActiveXObject("Scripting.FileSystemObject");
    		var loc = "C:\\\\Start\\" //set the default directory path
    		var dir = fso.GetFolder(loc+a+b) //get the folder path
    
    		// Open text file within folder to access the folder name
    		var FN = dir+'\\Filename.txt' //path to text file
    		var fh = fso.OpenTextFile(FN, 1); // Open the file for reading.
    		var fhtext = fh.ReadAll(); // Read contents of text file
    		fh.close(); // Close text file
    
    		// Count and list subfolders
    		var FBI = dir.SubFolders.Count; // count how many subfolders exist
    		if(FBI > 0){ // if there are subfolders
    			var fb = new Enumerator(dir.SubFolders);
    			var pdoc = "<ul><li>" + fhtext // use name in text file as header
    			pdoc += "<ul>"
    			for (; ! fb.atEnd(); fb.moveNext()){
    				pdoc += "<li class='pb-list'><a href='./" + fb.item().Name + "\\index.htm'>" + fb.item().Name + "</a></li>";
    			}
    			pdoc += "</li></ul>"
    			document.getElementById("bgtab").innerHTML = pdoc;
    		}
    	}
    
    page onload call: 
    <body onload="javascript:createFilePath('FolderA\\','Current folder name');">
    So far, the TOC works well. The nav menu displays correctly and toggles as it should down to 3 levels. Thank you. So just need to get that auto toggle working, so that no matter how I get to a particular page, the menu will open and highlight at least the lowest path to that file.

    I hope I haven't confused you with my ramblings. I have worked with JS for years doing webforms but never had to do a menu before, so this is new to me.

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, this is based off my code from post #13.

    For demo purposes, you just enter in a file name to the input box and hit the TAB key.

    But you can see that all that really matters is that you call the function findAndExpand and pass it a filename to try to find the directory of.

    Code:
    <html>
    <head>
    <style type="text/css">
    ul { list-style: none; }
    ul li span { 
        font-family: courier;
        font-size: medium;
        font-weight: bold;
        padding-right: 10px;
        color: red;
        cursor: hand;
    }
    ul.level1 { margin-left: 0px; }
    ul.level2 { display: none; }
    ul.level3 { display: none; }    
    span.level1, span.level2, span.level3 { }
    </style>
    </head>
    <body>
    Enter a file name:  <input size="100" id="find" onchange="findAndExpand(this.value);" />
    <h3>Folders</h3>
    <div id="folders"></div>
    
    <script type="text/javascript">
    var dir = location.href.replace(/^file:\/+/,"").replace(/\\/g,"/");
    dir = dir.substring( 0, dir.lastIndexOf("/") );
    
    var putit = document.getElementById("folders");
    putit.appendChild( document.createTextNode("current: " + dir) );
    
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    dir = fso.getFolder(dir);
    
    showSubFolders( dir, putit, 1 );
    
    function showSubFolders( fldr, addto, level )
    {
        var subf = fldr.SubFolders;
        if ( subf.Count == 0 ) return;
    
        var ul = document.createElement( "ul" );
        ul.className = "level" + level;
    
    
        var fc = new Enumerator( subf );
        for ( ; ! fc.atEnd(); fc.moveNext() )
        {
            var fl = fc.item();
            var li = document.createElement("li");
    
            var expand = document.createElement("span");
            expand.appendChild( document.createTextNode( level < 3 ? "+" : "-" ) );
            if ( level < 3 ) expand.onclick = expander;
            li.appendChild(expand);
    
            var link = document.createElement("a");
            link.href = "file://" + fl.path + "/index.htm";
            link.innerHTML = fl.name 
            li.appendChild( link );
    
            if ( level < 3 )
            {
                showSubFolders( fl, li, level+1 );
            }
    
            ul.appendChild(li);
        }
        addto.appendChild(ul);
    }
    
    function expander( )
    {
        expandParent( this );
    }
    
    function expandParent( elem )
    {
        var node = elem;
        if ( node.tagName == null ) return null; // assumed to be document
        while ( node.tagName.toUpperCase() != "LI" )
        {
            node = node.parentNode;
            if ( node == null || node.tagName == null ) return null; // no more parents
        }
        var li = node;
        var span = li.getElementsByTagName("span")[0];
        var ul = li.getElementsByTagName("ul")[0];
        if ( span.innerHTML == "+" )
        {
            if ( ul != null ) ul.style.display = "block";
            span.innerHTML = "-";
        } else {
            if ( ul != null ) ul.style.display = "none";
            span.innerHTML = "+";
        }
        return li; // return the element we just expanded
    }
    
    function findAndExpand( fname )
    {
        if ( fname == null || fname.length < 3 ) return;
        var findpath = fname.replace(/\/[^\/]+$/,"").toLowerCase();
        var links = putit.getElementsByTagName("a");
        for ( var i = 0; i < links.length; ++i )
        {
            var link = links[i].href
                       .replace(/^file:\/+/,"")
                       .replace(/\\{1,2}/g,"/")
                       .replace(/\/[^\/]+$/,"").toLowerCase();
            if ( findpath == link )
            {
                var node = links[i];
                while ( node != null )
                {
                    node = expandParent(node.parentNode);
                }
            }
        }
    }         
            
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  3. Users who have thanked Old Pedant for this post:

    longman (05-17-2013)

  4. #18
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Thanks so much for the reply. I see what you're doing there. The example though doesn't work. What is the syntax of the filename required? Does it require just the name or the name + extension? In my case, when I have set the default dir path to root, does it need the directory path to be included as well?

  5. #19
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    OK. I've done some further checking with alerts and it looks like the function is failing at the comparison line. As the filepath that I'm searching for is from local folders, the pathname uses "\" as separators, whereas the pathnames obtained by the function to compare it to use "/". So I've just added a regex to the findpath to swap them out and it works great now. Interestingly I also had to swap out the %20 with a space as it too was preventing a successful comparison.

    I really appreciate all your help, there's no way I could have worked this all out on my own. You're a legend.

  6. #20
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Sorry...because I was typing in the file name to look for by hand, I was just using / throughout. DOH on me.

    And I didn't think to test for folder names with spaces in them because my tree didn't happen to have any.

    So good catches!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •