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.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hot do I use multiple ids with getElementById?

    I want to be able to use 'wrapper' more than once on the same page.
    Any suggestions? Code below:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    // Copyright 2007 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
    // TJK_togglePanels() Version 1.0 report bugs or errors to thierry@tjkdesign.com
    function TJK_toggleTheDIVs(objEvent,objInput){
    var iKeyCode;// source for the following snippet: http://juicystudio.com/article/ecmascriptmenu.php
    if (objEvent && objEvent.type == 'keypress'){if (objEvent.keyCode)iKeyCode = objEvent.keyCode;else if (objEvent.which) iKeyCode = objEvent.which;if(iKeyCode != 13 && iKeyCode != 32){return true;}}
    var zH2=document.getElementById("Wrapper").getElementsByTagName('h2'); 
    var zDIV=document.getElementById("Wrapper").getElementsByTagName('div');
    		for (i=0; i <zDIV.length ; i++){
    			zH2[i].className="H2plus"; // quick and dirty: we reset them all
    			zDIV[i].className="hideDIV";			
    		}
        objInput.nextSibling.className='showDIV';
        objInput.className='H2minus'; 
    }
    function TJK_togglePanels(){
    JS = "";
    if (!document.getElementById || JS =="off") return; 
    var zH2=document.getElementById("Wrapper").getElementsByTagName('h2'); 
    var zDIV=document.getElementById("Wrapper").getElementsByTagName('div');
    	    for(var i=0;i<zH2.length;i++){
    			zH2[i].onclick=function(event){return TJK_toggleTheDIVs(event,this)};	
    			zH2[i].onkeypress=function(event){return TJK_toggleTheDIVs(event,this)};			
        		zH2[i].tabIndex="0";
    		    zH2[i].title='Show/Hide the answer';
    		    zDIV[i].className='hideDIV';
    		    zH2[i].className='H2plus';
    	    }
    		    zH2[0].className='H2minus';		
    }
    window.onload=function(){
    TJK_togglePanels();
    }
    </script>
    <style type="text/css">
    body {width:55em;font-size:100.01%;color:#333;font-family:Arial, Helvetica, sans-serif;margin:12px auto;background:#fff}
    h2 {font-size:1em}
    #Wrapper a {padding:0 5px;background:#ffc;color:#555;text-decoration:none}
    
    /* Wrapper */
    /* BETTER for tabbed panels based on headings and divs */
    #Wrapper {position:relative;height:180px;width:180px;;overflow:visible}
    #Wrapper h2 {height:1.85em;line-height:1.85em;margin:0;font-size:.7em;zoom:1;margin-right:2px;cursor:pointer;font-weight:bold;text-decoration:none;float:left;padding:0 7px;background:#9DD9F7}
    #Wrapper h2:hover {background:#C7EAFB}
    /* selected */
    #Wrapper h2.H2minus {background:#C7EAFB;position:relative;z-index:10}
    #Wrapper .showDIV,#Wrapper div#first {top:1.35em;font-size:1em;margin:0;width:180px;height:180px;background:#C7EAFB}
    #Wrapper div,#Wrapper .hideDIV {position:absolute;top:-9999px;left:0}
    /*\*//*/
    #Wrapper {width:60em}
    #Wrapper div.showDIV,#Wrapper div#first {display:block}
    #Wrapper div,#Wrapper div.hideDIV {top:0;display:none}
    #Wrapper .showDIV,#Wrapper div#first {top:1.3em}
    /**/
    </style>
    
    </head>
    
    <body>
    
    <div id="Wrapper">
    <h2>1</h2><div id="first"><img src="images/blue.gif" /></div>
    <h2>2</h2><div><img src="images/red.gif" /></div>
    <h2>3</h2><div><img src="images/yellow.gif" /></div>
    <h2>4</h2><div><img src="images/green.gif" /></div>
    
    </div>
    
    </body>
    </html>
    Last edited by ashcroft77; 03-18-2009 at 01:09 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please edit your post and add [CODE][/CODE] tags around your code. Could you elaborate your question a little more?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Like abduraooft, I am not clear what the question is.

    You may not have two divs with the same id, but Javascript is case sensitive and Wrapper is not the same as wrapper.

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I meant to refer to 'wrapper' as 'Wrapper', so sorry for the confusion.

    To re-iterate a bit clearer, I want to use mulitiple ids on the page using the functions 'TJK_toggleTheDIVs' and 'TJK_togglePanels'.

    How do I edit the JavaScript to be able to achieve this?

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    IDs are meant for one element on a page only, you better use class Name instead.

    Use this script, which would get all elements with a class name of Wrapper and apply that tab effect:
    Code:
    <script type="text/javascript">
    // Copyright 2007 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
    // TJK_togglePanels() Version 1.0 report bugs or errors to thierry@tjkdesign.com
    // Modified by rangana @ codingforums.com
    	// * Reference element via class name instead of ID
    function TJK_toggleTheDIVs(objEvent,objInput) {
    	var iKeyCode;// source for the following snippet: http://juicystudio.com/article/ecmascriptmenu.php
    	if (objEvent && objEvent.type == 'keypress') {
    		if (objEvent.keyCode)
    			iKeyCode = objEvent.keyCode;
    		else if (objEvent.which) 
    			iKeyCode = objEvent.which;	
    		if(iKeyCode != 13 && iKeyCode != 32)
    			return true;
    	}
    	var el = document.getElementsByClassName('Wrapper');
    	for (var c = 0; c < el.length; c++) {
    		var zH2 = el[c].getElementsByTagName('h2');
    		var zDIV=el[c].getElementsByTagName('div');
    		for (i=0; i <zDIV.length ; i++) {
    			zH2[i].className="H2plus"; // quick and dirty: we reset them all
    			zDIV[i].className="hideDIV";			
    		}
    		objInput.nextSibling.className='showDIV';
    		objInput.className='H2minus'; 
    	}
    }
    function TJK_togglePanels() {
    	JS = "";
    	if (!document.getElementById || JS =="off") 
    		return;
    	var el = document.getElementsByClassName('Wrapper');
    	for (var c = 0; c < el.length; c++) {
    		var zH2 = el[c].getElementsByTagName('h2');
    		var zDIV=el[c].getElementsByTagName('div');
    		for(var i=0;i<zH2.length;i++) {
    			zH2[i].onclick=function(event){return TJK_toggleTheDIVs(event,this)};	
    			zH2[i].onkeypress=function(event){return TJK_toggleTheDIVs(event,this)};			
    			zH2[i].tabIndex="0";
    			zH2[i].title='Show/Hide the answer';
    			zDIV[i].className='hideDIV';
    			zH2[i].className='H2plus';
    		}
    		zH2[0].className='H2minus';		
    	}
    }
    
    // Script taken from this thread: http://codingforums.com/showthread.php?t=154727
    if(!document.getElementsByClassName) {
    	document.getElementsByClassName = function (cn) {  // the speed king by ~11%
    		var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
    		var allT =document.getElementsByTagName("*"), allCN = [],i = 0, ac="", a;
    		for (mx=allT.length;i<mx;i=i+2){
    			a = allT[i]; ac=a.className;
    		  if ( ac && ac.indexOf(cn) !==-1) {
    			if(ac===cn){ allCN[allCN.length] = a; continue;   }
    			rx.test(ac) ? (allCN[allCN.length] = a) : 0;
    			  }
    
    				a = allT[i+1]; if(!a){  break ;}
    				ac=a.className;
    			  if ( ac && ac.indexOf(cn) !==-1) {
    				if(ac===cn){ allCN[allCN.length] = a; continue;   }
    				rx.test(ac) ? (allCN[allCN.length] = a) : 0;
    			  }
    
    
    			}
    
    			return allCN;
    	}
    }
    window.onload=TJK_togglePanels;
    </script>
    Don't forget to change your CSS. Since you're using class name already, change # to .

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Tags for this Thread

    Posting Permissions

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