NamePros.Com - Javascript Help Needed!

Results from the most recent live auction are here.
16 members in the live chat room. Join Chat!

		NamePros.Com > Design and Development > Programming
Javascript Help Needed!

Thread Tools

06-18-2008, 10:07 AM	· #1
Phaethon Carpe Diem Name: Matt Location: United States - OHIO Trader Rating: (26) Join Date: Apr 2007 Posts: 607 NP$: 226.00 (Donate)	Javascript Help Needed! Hello all. I need a bit of help with some JS code. I don't really know it all that well, just enough to get by. Here's what I need. Basically I want a vertical tree menu that onclick shows sub items and onclick again it hides them. Also I want a little plus button and minus button to toggle when the list shows/hides. I've been attempting to do this from my limited knowledge, but it is not working properly. Here's what I have: In head: Code: <script type="text/javascript"> <!-- window.onload=show; function show(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('category'+i)) {document.getElementById('category'+i).style.displ ay='none';} } if (d) {d.style.display='block';} } //--> </script> In body: Code: <dt onclick="javascript:show('category1');"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/plusbutton.gif" onclick="this.src='<?php bloginfo('template_url'); ?>/images/minusbutton.gif'" border=0 /> Category 1</a></dt> <dd id="category1"> <ul> <li><a href="#">  -Page 1</a></li> <li><a href="#">  -Page 2</a></li> <li><a href="#">  -Page 3</a></li> </ul> </dd> </dl> As you can see, I am not really sure about how to "hide" everything and how to toggle the image. Any help is very appreciated! Please register or log-in into NamePros to hide ads __________________ Free Web Proxy! NamePros

06-18-2008, 11:20 AM

· #2

Bruce_KD

NamePros Member

Trader Rating: (1)

Join Date: Sep 2006

Posts: 78
NP$: 100.00 (Donate)

I usually hide elements with

Code:


document.getElementById('element').style.display = 'none';

To have an element originally hidden, start with

Code:


<div style='display: none;' id='element'>Content</div>

So some sample code:

Code:


<script type='text/javascript'>
function show(obj, elId) {
  var element = document.getElementById(elId);
  if (element.style.display == 'none') {
    obj.innerHTML = "-";
    element.style.display = '';
  }
  else {
    obj.innerHTML = "+";
    element.style.display = 'none';
  }
}
</script>

Code:


<div style='width: 100px; text-align: center; font-size: 18px; clear: both; float: left;' onclick="show(this, 'element1');">-</div>
<div id='element1'>
  [Content1]
</div>

<div style='width: 100px; text-align: center; font-size: 18px; float: left;' onclick="show(this, 'element2');">+</div>
<div id='element2' style='display: none;'>  
  [Content2]
</div>

There are certainly many ways to do this, but this is the way I know the best. You could easily condense the JavaScript a little bit, but I wanted you to be able to understand it.

I tested this on FireFox and it seems to work fine (Minus the style part of the menu). However, it is untested in Internet Explorer (Which is going to be your major problem as far as browser cooperation goes).

Bruce

__________________
Need a CAPTCHA?

www.KingdomsDivided.com

06-18-2008, 01:50 PM	· #3
Phaethon Carpe Diem Name: Matt Location: United States - OHIO Trader Rating: (26) Join Date: Apr 2007 Posts: 607 NP$: 226.00 (Donate)	Thanks for the reply Bruce, I'd like to see another way to do this, as I cannot seem to get this one to work too well. __________________ Free Web Proxy! NamePros

06-18-2008, 07:50 PM

· #4

Bruce_KD

NamePros Member

Trader Rating: (1)

Join Date: Sep 2006

Posts: 78
NP$: 100.00 (Donate)

I modified your original code and got it working just fine.
I threw in some html, head, and body tags. You'll probably want to change them to be valid xhtml or whatnot.

I also had to make the php function, I'm sure yours is much different.

Code:


<?php
function bloginfo($i) {
	echo $i; 
}
?>

<html>
<head>
<script type="text/javascript">

function show(id) {
	var d = document.getElementById(id), img = document.getElementById(id + '_img');
	if (d.style.display == 'none') {
		img.src = '<?php bloginfo('template_url'); ?>/images/minusbutton.gif';
		d.style.display = '';
	}
	else {
		img.src = '<?php bloginfo('template_url'); ?>/images/buttonplus.gif';
		d.style.display = 'none';
	}
}
</script>
</head>
<body>
<dl>
<dt onclick="show('category1');"><img src="<?php bloginfo('template_url'); ?>/images/plusbutton.gif" onclick="this.src='<?php bloginfo('template_url'); ?>/images/minusbutton.gif'" border=0 id='category1_img' /> Category 1</dt>
		<dd id="category1" style='display: none;'>
				<ul>
					<li><a href="#">&nbsp; -Page 1</a></li>
					<li><a href="#">&nbsp; -Page 2</a></li>
					<li><a href="#">&nbsp; -Page 3</a></li>
				</ul>
		</dd>
</dl>
</body>
</html>

If you still need help, either post the link here or PM it to me, and I'll take a look at the direct code.

Bruce

__________________
Need a CAPTCHA?

www.KingdomsDivided.com

06-18-2008, 09:57 PM	· #5
Phaethon Carpe Diem Name: Matt Location: United States - OHIO Trader Rating: (26) Join Date: Apr 2007 Posts: 607 NP$: 226.00 (Donate)	Thank you very much bearruler. This is precisely what I needed! +rep __________________ Free Web Proxy! NamePros


NamePros is a revenue sharing forum.

« cURL help needed! | Passing PHP Variables »

Thread Tools
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

Forum Jump

Site Sponsors

Advertise your business at NamePros

All times are GMT -7. The time now is 07:24 PM.