13 Replies - 946 Views - Last Post: 13 September 2008 - 10:31 PM

#1 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

click menu

Posted 30 August 2008 - 07:53 PM

I've been searching for hours and I can't find a satisfactory way of doing this.

I have a bar (containing text, like a little preview). When the user clicks the bar I want a box of text to appear bellow the bar. And if the bar is clicked again I want the text to disappear again

I plan on stacking a large number of these bars on top of each other. The idea being that the user can skim the list of bars and click on something interesting to see the full text.

My current best option is to have the javascript edit my css sheet to hide and unhide certain areas, but this is really messy...

I'm not sure if this is a javascript or css problem, but probably javascript because of "onclick".

thanks
-Andora

Is This A Good Question/Topic? 0
  • +

Replies To: click menu

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 30 August 2008 - 08:13 PM

You will have to use Javascript adnd CSS together for something like this.

If you post your code I could help out.
Was This Post Helpful? 0
  • +
  • -

#3 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 30 August 2008 - 09:16 PM

I really didn't get very far:

This only shows the relevant areas:
<style type="text/css">
p#hide{
display: none;
}
</style>
<script type="text/javascript">
function view(){
document.getElementById("hide").style.display="inline";
}
</script>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300" onclick= "java script:view()">
		text <p id="hide">rest of text</p>
	</td>
	</tr>
</table>
The problem is that I have to create a separate id for every bar, and I can't seem to make it disappear when clicked again (I couldn't get document.getElementById("hide").style.display to work in an "if").

I might be able to get it to work but it would take a massive amount of junk code. I was hoping that there is another more elegant way.

P.S. The painful colors are just for de-bugging purposes.

EDIT: After a great deal of searching I have found something similar to what I am after:
http://s9.zetaboards...opic/7027795/1/
The "spoiler: click to toggle" bar (towards the bottom) is similar to what I am after.

This post has been edited by Andora: 30 August 2008 - 10:38 PM

Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 30 August 2008 - 10:56 PM

Here is a nicely working version of your thing that allows toggling and multiple rows with hidden information.

Simply give any and all <p> tags the class name of "desc" and they will have a toggle when their parent node (in this case the table column) is clicked.

The toggle works both ways and everything.

<style type="text/css">
p#hide{
display: none;
}
</style>
<script type="text/javascript">
function init(){
  var ps = document.getElementsByTagName("p");
  for(var i=0; i<ps.length; i++){
	if(ps[i].className == 'desc'){
	  ps[i].parentNode.obj = ps[i];
	  ps[i].parentNode.onclick = function(){
		if(this.obj.style.display == "inline"){
		  this.obj.style.display = "none";
		}
		else{
		  this.obj.style.display = "inline";
		}
	  }
	}
  }
}
</script>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		text <p id="hide" class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		text <p id="hide" class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		text <p id="hide" class="desc">rest of text</p>
	</td>
	</tr>
</table>
<script>
init();
</script>


NOTE - This script only allows for hidden toggle thing per row/parent node, if there are multiple only 1 will actually work.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#5 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 31 August 2008 - 12:33 AM

Awesome! However now I am having difficulties making the layout the way I want... <_<

I plan on putting "text" into a div which will work as the bar.

so it would be:
<div>text</div><p id="hide" class="desc">rest of text</p>


So how can I switch the onclick event to a div inside the table rather than the table itself? Or better yet can you explain how it is placed so I can alter it in the future?

Also, I feel like having an id and a class is a little odd... Is there a good way to combine the two or is that a bad idea?

P.S. Is there a good site to learn all these crazy javascript variables/functions? I've read some tutorials but there was no mention of "getElementsByTagName"...
Was This Post Helpful? 0
  • +
  • -

#6 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 31 August 2008 - 08:56 AM

w3schools.org has pretty much everything about javascript if you look long enough.

Yes, you can definately get the things placed inside of a div, or span or whatever, but only 1 will work per span/div/whatever so they have to be spread out.

Here is what I have swapped the code to:

<style type="text/css">
p.desc{
display: none;
}
</style>
<script type="text/javascript">
function init(){
  var ps = document.getElementsByTagName("p");
  for(var i=0; i<ps.length; i++){
	if(ps[i].className == 'desc'){
	  ps[i].parentNode.obj = ps[i];
	  ps[i].parentNode.onclick = function(){
		if(this.obj.style.display == "inline"){
		  this.obj.style.display = "none";
		}
		else{
		  this.obj.style.display = "inline";
		}
	  }
	}
  }
}
</script>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text <p class="desc">rest of text</p></div>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text <p class="desc">rest of text</p></div>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text <p class="desc">rest of text</p></div>
	</td>
	</tr>
</table>
<script>
init();
</script>


Notice that all I changed was adding the divs, getting rid of the ids, and changing the stylesheet to work with the class name "desc".

the way this code works is it goes through and finds all the tags that have the class name "desc" then it adds an onclick event for their parent node (in this case the divs, it used to be the tds) so that clicking will toggle if it is visible or not.

The reason for changing it away from getElementById was that ids only allow for 1 per page if you are wanting it to work with javascript, but you can easily find multiple tags with a class name by getting all of a certain tag and then filtering through them.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#7 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 31 August 2008 - 10:51 AM

Ok, soooo close. I meant that the div isn't the parent:
<div>text</div><p class="desc">rest of text</p>

Was This Post Helpful? 0
  • +
  • -

#8 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 31 August 2008 - 12:38 PM

Assuming that the DIV will always be the first html tag that you use in a table column this should work:

<style type="text/css">
p.desc{
display: none;
}
</style>
<script type="text/javascript">
function init(){
  var ps = document.getElementsByTagName("p");
  for(var i=0; i<ps.length; i++){
	if(ps[i].className == 'desc'){
	  ps[i].parentNode.firstChild.obj = ps[i];
	  ps[i].parentNode.firstChild.onclick = function(){
		if(this.obj.style.display == "inline"){
		  this.obj.style.display = "none";
		}
		else{
		  this.obj.style.display = "inline";
		}
	  }
	}
  }
}
</script>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>
</table>
<script>
init();
</script>

Was This Post Helpful? 0
  • +
  • -

#9 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 31 August 2008 - 01:49 PM

I don't think that worked...

Now it is completely unresponsive. :(
Was This Post Helpful? 0
  • +
  • -

#10 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 31 August 2008 - 04:13 PM

Hm... what browser are you using? Worked in IE 6... will test in IE 7 and get back to you.

-- Works in IE 7 too... not sure what the issue is...
Was This Post Helpful? 0
  • +
  • -

#11 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 31 August 2008 - 04:19 PM

It does work in IE. But it doesn't work with FireFox, Opera, Safari, or Netscape.

It appears to only work with IE...
Was This Post Helpful? 0
  • +
  • -

#12 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: click menu

Posted 31 August 2008 - 06:35 PM

It appears that FF doesn't support firstChild.

Here is one that works (it attempts to use childNodes[1] (which doesn't work in IE) and then it attempts firstChild (which doesn't work in anything other than IE) so with any luck it will work for you). It works in IE 6, IE 7, and Mozilla something or other.

<style type="text/css">
p.desc{
display: none;
}
</style>
<script type="text/javascript">
function init(){
  var ps = document.getElementsByTagName("p");
  for(var i=0; i<ps.length; i++){
	if(ps[i].className == 'desc'){
	  ps[i].parentNode.childNodes[1].obj = ps[i];
	  ps[i].parentNode.childNodes[1].onclick = function(){
		if(this.obj.style.display == "inline"){
		  this.obj.style.display = "none";
		}
		else{
		  this.obj.style.display = "inline";
		}
	  }

	  ps[i].parentNode.firstChild.obj = ps[i];
	  ps[i].parentNode.firstChild.onclick = function(){
		if(this.obj.style.display == "inline"){
		  this.obj.style.display = "none";
		}
		else{
		  this.obj.style.display = "inline";
		}
	  }

	}
  }
}
</script>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>

	<tr>
	<td bgcolor="#44ffff" align="center" width="300">
	</td>
	<td bgcolor="#ffcc00" align="center" width="300">
		<div>text</div> <p class="desc">rest of text</p>
	</td>
	</tr>
</table>
<script>
init();
</script>


HTH
Was This Post Helpful? 0
  • +
  • -

#13 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 31 August 2008 - 07:57 PM

YEY! That works in all the browsers I have. Very cool.

Thank you so much BetaWar. Not only have you helped solve my problem but I'm beginning to get a better understanding of javascript! :D
Was This Post Helpful? 0
  • +
  • -

#14 Andora  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 140
  • Joined: 18-August 08

Re: click menu

Posted 13 September 2008 - 10:31 PM

Hmm... I seem to be having some trouble putting a form in the hidden paragraph (it wont hide). Why is that?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1