SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to load folder tree page quickly

    Hi - I have got this great script from the JS anthology Figure 15.13 - folder tree menu. Basically a user clicks on a section link and all the subpages are shown for that section. It is ideal for an interactive sitemap on the homepage.

    However, the problem is that when the home page first loads all the links are shown and it takes about 20 seconds for the menu to close up so that only the links to section pages are shown.

    Any ideas for how to make only the section pages appear immediately onload?



    Thanks
    Steven

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you don't want that. Purely because if the user does not have javascript enabled then all they will see is the sections and not the branches.

    Although it seems odd that it takes that long, it could be a coding fault.

    Fancy showing us the code and the html that is causing the issue?


  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,745
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this is good advice or not, but here's how I'd do it...

    I'd apply a style to all the list items, display:none; , except for the ones I'd like to show immediately.

    I'd include some css in a <noscript> tag over-writing the display:none; rule, though...

    example...

    HTML Code:
    <style type="text/css">
    	p{display:none;}
    </style>
    
    <noscript>
    <style type="text/css">
    	p{display:block;}
    </style>
    </noscript>
    
    <p>If you can read this, javaScript is disabled...</p>
    ...so that the 2% of users who have javaScript disabled would see the whole list.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have two styles, shown and hidden and then set all of them to hidden.

    Then using javascript set the ones you want to show straight away to shown and if on the off chance that the user has javascript disabled you can use the noscript to change the hidden style to that of the shown.


  5. #5
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi here is the code - I only want to show top level or section pages at first. However at the moment onload I am showing the subpages for the last list item. Thanks for your help

    Code:
    // JavaScript Document
    
    function treeMenu(navid, indexpage)
    {
    	if (typeof document.getElementById == 'undefined') { return; }
    
    	var rollover = new Image;
    	rollover.src = 'down-red.gif';
    	rollover = new Image;
    	rollover.src = 'minus.gif';
    
    	var tree = document.getElementById(navid);
    	if (tree)
    	{
    		var items = tree.getElementsByTagName('li');
    		for (var i = 0; i < items.length; i++)
    		{
    			treeTrigger(tree, items[i], navid);
    		}
    
    		if (navigator.vendor == 'Apple Computer, Inc.'
    				|| typeof window.opera != 'undefined')
    		{
    			displayReset(tree);
    		}
    
    		findHere(tree, navid, indexpage);
    	}
    }
    
    var isreset = false;
    
    function displayReset(tree)
    {
    	var menus = tree.getElementsByTagName('ul');
    	for (var i = 0; i < menus.length; i++)
    	{
    		if (menus[i].style.position != 'absolute')
    		{
    			menus[i].style.display = 'none';
    		}
    		menus[i].style.position = 'absolute';
    	}
    	isreset = true;
    }
    
    function treeTrigger(tree, li, navid)
    {
    	var a = li.getElementsByTagName('a')[0];
    	var menu = li.getElementsByTagName('ul').length > 0
    		? li.getElementsByTagName('ul')[0] : null;
    
    	if (menu)
    	{
    		li.className += (li.className == '' ? '' : ' ') + 'hasmenu';
    	}
    
    	li.onclick = function(e)
    	{
    		var target = e ? e.target : window.event.srcElement;
    		while (target.nodeName.toUpperCase() != 'LI')
    		{
    			target = target.parentNode;
    		}
    		if (target == this && isreset)
    		{
    			if (menu)
    			{
    				if (menu.style.display == 'none')
    				{
    					clearSiblingBranches(this);
    					menu.style.display = 'block';
    					a.className += (a.className=='' ? '' : ' ') + 'rollover';
    				}
    				else
    				{
    					menu.style.display = 'none';
    					a.className = a.className.replace(/ ?rollover/g, '');
    				}
    				return false;
    			}
    			else
    			{
    				return true;
    			}
    		}
    	};
    
    	attachEventListener(a, 'keyup', function(e)
    	{
    		if (!isreset && e.keyCode == 9)
    		{
    			displayReset(tree);
    		}
    	}, false);
    
    	var moves = 0;
    	attachEventListener(a, 'mousemove', function()
    	{
    		if (!isreset)
    		{
    			moves++;
    			if (moves > 2) { displayReset(tree); }
    		}
    	}, false);
    }
    
    function clearSiblingBranches(trigger)
    {
    	var menus = trigger.parentNode.getElementsByTagName('ul');
    	for (var i = 0; i < menus.length; i++)
    	{
    		menus[i].style.display = 'none';
    
    		var a = menus[i].parentNode.getElementsByTagName('a')[0];
    		if (a)
    		{
    			a.className = a.className.replace(/ ?rollover/g, '');
    		}
    	}
    }
    
    function findHere(tree, navid, indexpage)
    {
    	var page = document.location.href;
    	page = page.replace(indexpage, '').replace(/,/g,'%2C');
    
    	var links = tree.getElementsByTagName('a');
    	var matches = [];
    	for (var i = 0; i < links.length; i++)
    	{
    		var href = links[i].href;
    		if (href && !/[a-z]+\:\/\//.test(href))
    		{
    			matches = [];
    			break;
    		}
    
    		href = href.replace(indexpage, '').replace(/,/g,'%2C');
    		if (href != '' && page.indexOf(href) != -1)
    		{
    			matches[matches.length] = links[i];
    		}
    	}
    	if (matches.length < 1) { return; }
    
    	var probabilities = [];
    	for (i = 0; i < matches.length; i++)
    	{
    		href = matches[i].href;
    		probabilities[i] = [0, href];
    
    		for (var j = 0; j < href.length; j++)
    		{
    			if (href.charAt(j) == page.charAt(j))
    			{
    				probabilities[i][0]++;
    			}
    		}
    	}
    
    	probabilities.sort(compare);
    	href = probabilities[0][1];
    
    	for (i = 0; i < links.length; i++)
    	{
    		if (links[i].href == href)
    		{
    			youAreHere(links[i], href, navid);
    			break;
    		}
    	}
    }
    
    function compare(a, b)
    {
    	return b[0] - a[0];
    }
    
    function youAreHere(link, href, navid)
    {
    	link.className += (link.className == '' ? '' : ' ') + 'rollover';
    
    	var li = link.parentNode;
    	var menu = li.getElementsByTagName('ul').length > 0
    		? li.getElementsByTagName('ul')[0] : null;
    
    	if (menu)
    	{
    		menu.style.display = 'block';
    		menu.style.position = 'absolute';
    	}
    
    	var text = (link.getAttribute('title') && link.title != '')
    		? link.title : link.firstChild.nodeValue;
    
    	link.title = text + (link.href == href
    		? ' [you are here]' : ' [you\'re in this section]');
    
    	if (li.parentNode.id != navid)
    	{
    		link = li.parentNode.parentNode.getElementsByTagName('a')[0];
    		youAreHere(link, href, navid);
    	}
    }
    
    function attachEventListener(target, eventType, functionRef, capture)
    {
    	if (typeof target.addEventListener != 'undefined')
    	{
    		target.addEventListener(eventType, functionRef, capture);
    	}
    	else if (typeof target.attachEvent != 'undefined')
    	{
    		target.attachEvent('on' + eventType, functionRef);
    	}
    	else
    	{
    		eventType = 'on' + eventType;
    
    		if (typeof target[eventType] == 'function')
    		{
    			var oldListener = target[eventType];
    
    			target[eventType] = function()
    			{
    				oldListener();
    
    				return functionRef();
    			}
    		}
    		else
    		{
    			target[eventType] = functionRef;
    		}
    	}
    	
    	return true;
    }
    
    function addLoadListener(fn)
    {
    	if (typeof window.addEventListener != 'undefined')
    	{
    		window.addEventListener('load', fn, false);
    	}
    	else if (typeof document.addEventListener != 'undefined')
    	{
    		document.addEventListener('load', fn, false);
    	}
    	else if (typeof window.attachEvent != 'undefined')
    	{
    		window.attachEvent('onload', fn);
    	}
    	else
    	{
    		var oldfn = window.onload;
    		if (typeof window.onload != 'function')
    		{
    			window.onload = fn;
    		}
    		else
    		{
    			window.onload = function()
    			{
    				oldfn();
    				fn();
    			};
    		}
    	}
    }
    
    addLoadListener(function() { treeMenu('navigation', 'index.php'); });

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,745
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    The whole tree is being shown because it takes a few moments for the javaScript to load.


    My idea is to use css to hide the list items immediately, so that they wouldn't be shown at all until the script loads...

    HTML Code:
    <style type="text/css">
    li{display:none;}
    </style>
    Then as I said, add the <noscript> tags for the benefit of those with javaScript script disabled
    HTML Code:
    <noscript>
    <style type="text/css">
    	li{display:block;}
    </style>
    </noscript>

    Makes sense??

  7. #7
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,745
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Then of course as gRoberts was saying...

    you could have a class like...

    Code:
    .Shown{display:block;}
    ...to apply to the list items that you want to be shown from the get go...
    Code:
    <li class="Shown">Something...</li>

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'll have a look at this tonight when I get the chance.


  9. #9
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The option

    style type="text/css">
    li{display:block;}
    </style>

    is pefect! thanks for your help.


Bookmarks

Posting Permissions

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