getElementById()

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

getElementById()

Post by Luke »

OK, say I have a list setup like this...

Code: Select all

<ul class="bulleted">
	     <li class="smallmargin">Intel Celeron 2.66GHz Processor</li>
	     <li class="smallmargin" id="hidden">533 MHz Front-side Bus</li>
         <li class="smallmargin">512MB DDR 400 RAM</li>
         <li class="smallmargin">80GB SATA Hard Drive</li>
		 <li class="smallmargin">17" CRT monitor</li>
		 <li class="smallmargin">High Speed CD Burner</li>
		 <li class="smallmargin" id="hidden">107 Key Keyboard</li>
		 <li class="smallmargin" id="hidden">Optical 3-Button Scroll Mouse Combo</li>
		 <li class="smallmargin" id="hidden">Six Total USB 2.0 Ports (4 Rear, 2 Front)</li>
		 <li class="smallmargin" id="hidden">3.5" Floppy Drive</li>
		 <li class="smallmargin">SiS Onboard 3D Video/Graphics Adapter</li>
		 <li class="smallmargin" id="hidden">6 Channel 32 Bit Digital Sound</li>
		 <li class="smallmargin" id="hidden">56k v.92 Fax Modem</li>
		 <li class="smallmargin">10/100 LAN Port</li>
		 <li class="smallmargin">Creative Stereo Speakers</li>
		 <li class="smallmargin">Windows XP Home</li>
		 <li class="smallmargin">1 year carry-in warranty </li>
		</ul>
And I want the <li> tags with the "hidden" id to be hidden when the page loads, but show up if the user clicks a certain button... I thought I could accomplish this with something like this...

Code: Select all

function hideAttribs(){
	document.getElementById("hidden").style.visibility = "hidden";
	document.getElementById("hidden").style.height = "auto";
}
But it only hides the first instance of id "hidden"
Anybody know how I can accomplish this?

PS... Sorry for being snippy the other day to those who were trying to help.... BAD DAY. Thanks in advance.
RobertPaul
Forum Contributor
Posts: 122
Joined: Sun Sep 18, 2005 8:54 pm
Location: OCNY

Post by RobertPaul »

ID's have to be unique to the document ... i.e. you can only use them once. Unfortunately I can't offer much help but that since JS is kinda my weak point.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

yea.. thanks though. I know their supposed to be used for one element... but I just don't know how to accomplish this... even using different ids for each li element doesn't work, because it just makes them disappear... it doesn't adjust the list height or anything. I don't know how I'm going to do this honestly.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

why not just set the style of the element to 'display:none', then if the button you want to show them is clicked change the property to 'block' or 'inline'.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

well... I will give it a try. thanks.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

ID's have to be unique yes but since you've done that you can probably work with it. I'm not sure the DOM will accept it though.

Code: Select all

var liTags = document.getElementsByTagName('li'); //All <li> tags in document
for (var x in liTags)
{
    if (liTags[x].id == 'hidden') liTags[x].style.visibility = 'hidden';
}
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Here is your solution.
Explanation:
ids cannot be used. since an id refers to an element so you can hide or display one element even when several elements have the same id
getElementsByName() is a good choice but unfortunately names are assigned only to input elements
we can assign class for every html element. we use class for distinction.
we can retrieve all li elements using getElementsByTagName("LI").
Rest you should be ablet to understand.

Code: Select all

<body onload = "hideLi();">
   <ul class="bulleted"> 
        <li class="smallmargin">Intel Celeron 2.66GHz Processor</li> 
        <li class="smallmargin" >533 MHz Front-side Bus</li> 
         <li class="hidden">512MB DDR 400 RAM</li> 
         <li class="hidden">80GB SATA Hard Drive</li> 
       <li class="smallmargin">17" CRT monitor</li> 
       <li class="smallmargin">High Speed CD Burner</li> 
       <li class="hidden">107 Key Keyboard</li> 
   </ul>

	<input type = 'button' value = 'Show Lis' onclick = 'showLi()' />
<script type = 'text/javascript'>
	function hideLi(){
		var liReturn = document.getElementsByTagName("LI");
		var i = 0;
		for (i = 0; i < liReturn.length; i++){
			if (liReturn[i].className == "hidden"){
				liReturn[i].style.display = "none";
			}	
		}
	
	}

	function showLi(){
		var liReturn = document.getElementsByTagName("LI");
		var i = 0;
		alert (liReturn.length);

		for (i = 0; i < liReturn.length; i++){
			
			if (liReturn[i].className == "hidden"){
				alert (liReturn[i].style.display);
				liReturn[i].style.display = "block";
			}	
		}		
	}
</script>
</body>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

NICE!!
User avatar
ed209
Forum Contributor
Posts: 153
Joined: Thu May 12, 2005 5:06 am
Location: UK

Post by ed209 »

I see you already have a solution but I thought I'd throw my 2 cents into the mix. I can't claim to be responsible for writing this...also can't remember where I found it!

Code: Select all

<script type="text/javascript" language="javascript">
// this function gets all the editing blocks and hides them
	function hideBlocks (className) {
	  var all = document.all ? document.all :
		document.getElementsByTagName('*');
	  var elements = new Array();
	  for (var e = 0; e < all.length; e++)
		if (all[e].className == className)
			all[e].className="hide";
	  return elements;
	}
// this function gets all the editing blocks and displays them
	function shoeBlocks (className) {
	  var all = document.all ? document.all :
		document.getElementsByTagName('*');
	  var elements = new Array();
	  for (var e = 0; e < all.length; e++)
		if (all[e].className == className)
			all[e].className="edit_block";
	  return elements;
	}
</script>

then for the html:

Code: Select all

<div class="edit_block">
this should hide
</div>
<div class="another">
This won't hide
</div>


And to trigger the action:

Code: Select all

<a href="#" onclick="hideBlocks('edit_block');">Hide</a>
<a href="#" onclick="shoeBlocks('hide');">Show</a>
All you need then are 2 classes for the CSS. These are the ones that I use:

Code: Select all

.edit_block{
/* what ever you want it so look like while visible */
}

.hide{
/* this hides the tag + its content */
	visibility:hidden;
	width:1px;
	height:1px;
}

ed
Post Reply