SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calling any and all tag names within a getElementById

    Hi there,

    I am completely new to Javascript, but am keen to learn it.

    I have some JS code complete with some XHTML that allows the element associated with id="toc" in this case a table, to expand and close on a click of the text, 'hide' or 'show'. The JS has been taken from another site, and my aim is just to play around with it, to help me understand and learn JS.

    Currently, as I understand it, the two lines :-

    Code:
    function toggleToc() {
    	var toc = x=document.getElementById('toc').getElementsByTagName('ul')[0];
    is a kind of document structure which tells the remaining JS to collect and gather the 'ul' tag within id="toc".

    When I was playing around with it the other day, I added another ul into my XHTML, expecting this secondary ul to hide and close just like my first ul - however this doesn't happen. Am I right in suggesting that I need to loop the variable somehow for the JS to effect multiple uls within id="toc"? If so, how would I loop it?

    I also tried adding other elements such as p tags within id="toc" and obviously the JS didn't affect these elements - how would I go about getting JS to affect other elements too? I guessed at this by adding another getElementsByTagName to the variable, but this didn't work - perhaps I formatted it wrong? Am I on the right tracks?

    XHTML -

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>AIRMILES - Welcome to the UK's longest running travel loyalty scheme.</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    
    <script type="text/javascript" src="box.js"></script>
    
    
    </head>
    
    
    <body>
    
    <h1 class="firstHeading">Great test</h1>
    			<h3 id="siteSub">From MDC</h3>
    			<div id="contentSub"></div>
    
    												
    
    				
    <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents - this is a test</h2></div>
    
    
    <ul>
    <li class="toclevel-1">This is a test</li>
    <li class="toclevel-1">This is a test 2</li>
    <li class="toclevel-1">This is a test 3</li>
    <li class="toclevel-1">fjfjfjd</li>
    <li class="toclevel-1">jcklcocldld</li>
    <li class="toclevel-1">kdkfodleld dlse</li>
    <li class="toclevel-1">kdidoeld dlsps;w</li>
    <li class="toclevel-1">idkdieldld slspw;w</li>
    <li class="toclevel-1">jfkfkd sldsldod</li>
    <li class="toclevel-1">foffld d0dloele</li>
    <li class="toclevel-1">pdpd ddo43dps sw</li>
    <li class="toclevel-1">kdld eoeldld eod sl kd dls sow ssld eafe dkd=e eiewfwekf fk fkew dla fleww- fewl0= rekw0-f 324 r3 fd3wdf  kdwqe[]	 cdkwq ekdkdkwo fkfkf  dldoe;e ;dlewpsw;s  s</li>
    <li class="toclevel-1">odld eodls so0ewls s;ls</li>
    <li class="toclevel-1">pss 3pdsla w0q w;ls a</li>
    <li class="toclevel-1">osd sow lds s0wlw  cs</li>
    <li class="toclevel-1">ldl dleld dod</li>
    </ul>
    
    <ul>
    <li class="toclevel-1">odld eodls so0ewls s;ls</li>
    <li class="toclevel-1">pss 3pdsla w0q w;ls a</li>
    <li class="toclevel-1">osd sow lds s0wlw  cs</li>
    <li class="toclevel-1">ldl dleld dod</li>
    </ul>
    
    
    
    </td></tr></table>
    <script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
    
    
    <h1>Hello my name is James</h1>
    <p>My name is James and thgis is woring really well. This is a test to see if my attempt at the getElementsByTagName js function works OK</p>
    
    </body>
    </html>
    JS :-

    Code:
    function showTocToggle() {
    	if (document.createTextNode) {
    		// Uses DOM calls to avoid document.write + XHTML issues
    
    		var linkHolder = document.getElementById('toctitle');
    		if (!linkHolder) {
    			return;
    		}
    
    		var outerSpan = document.createElement('span');
    		outerSpan.className = 'toctoggle';
    
    		var toggleLink = document.createElement('a');
    		toggleLink.id = 'togglelink';
    		toggleLink.className = 'internal';
    		toggleLink.href = 'javascript:toggleToc()';
    		toggleLink.appendChild(document.createTextNode(tocHideText));
    
    		outerSpan.appendChild(document.createTextNode('['));
    		outerSpan.appendChild(toggleLink);
    		outerSpan.appendChild(document.createTextNode(']'));
    
    		linkHolder.appendChild(document.createTextNode(' '));
    		linkHolder.appendChild(outerSpan);
    
    		var cookiePos = document.cookie.indexOf("hidetoc=");
    		if (cookiePos > -1 && document.cookie.charAt(cookiePos + 8) == 1) {
    			toggleToc();
    		}
    	}
    }
    
    function changeText(el, newText) {
    	// Safari work around
    	if (el.innerText) {
    		el.innerText = newText;
    	} else if (el.firstChild && el.firstChild.nodeValue) {
    		el.firstChild.nodeValue = newText;
    	}
    }
    
    function toggleToc() {
    	var toc = x=document.getElementById('toc').getElementsByTagName('ul')[0];
         
    
    
     
                        
    	var toggleLink = document.getElementById('togglelink');
    
    	if (toc && toggleLink && toc.style.display == 'none') {
    		changeText(toggleLink, tocHideText);
    		toc.style.display = 'block';
    		document.cookie = "hidetoc=0";
    	} else {
    		changeText(toggleLink, tocShowText);
    		toc.style.display = 'none';
    		document.cookie = "hidetoc=1";
    	}
    }
    Any help, as alwayys is much appreciated

    Kind Regards

    James

  2. #2
    <?php while(!sleep()){code();} G.Schuster's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    function toggleToc() {
        var toggleLink = document.getElementById('togglelink');
    
        var parentElem = document.getElementById('toc');
        if(parentElem.childNodes && parentElem.childNodes.length) {
            for(i = 0; i < parentElem.childNodes.length; i++) {
                childElem = parentElem.childNodes[i];
                if(toggleLink && childElem.style.display == 'none') {
                    changeText(toggleLink, tocHideText);
                    childElem.style.display = 'block';
                    document.cookie = "hidetoc=0";
                }
                else {
                    changeText(toggleLink, tocShowText);
                    childElem.style.display = 'none';
                    document.cookie = "hidetoc=1";
                }
            }
        }
    }
    Didn't test it, just a quick'n'dirty try 'cause I'm a little bored

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers mate, I'll try it out.

    Could you possibly go through what you changed or added?

    Cheers

    James

  4. #4
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately you're solution doesn't work - it completely gets rid of the id="toc" table. Any other ideas thought would be much appreciated

    Regards

    James


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
  •