Page 1 of 1

getElementById()

Posted: Mon Jan 16, 2006 11:56 am
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.

Posted: Mon Jan 16, 2006 1:39 pm
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.

Posted: Mon Jan 16, 2006 2:08 pm
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.

Posted: Mon Jan 16, 2006 4:40 pm
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'.

Posted: Mon Jan 16, 2006 6:34 pm
by Luke
well... I will give it a try. thanks.

Posted: Mon Jan 16, 2006 7:15 pm
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';
}

Posted: Mon Jan 16, 2006 8:04 pm
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>

Posted: Tue Jan 17, 2006 7:26 pm
by Luke
NICE!!

Posted: Tue Jan 24, 2006 7:08 am
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