Expandable Text?

tahodancer · #1 01-15-2007, 09:37 PM

I have a page on a site, and in one section of the page is my hobbies/likes/dislikes list. For the more vauge items, aka movies, books, etc., I'd like to have clickable text that makes a list of the specifics pop up underneath the category. No special effects or anything, just the text that appears when somebody clicks the text. Is this possible? I'm sure I've seen this before. Thanks in advance. :waves:

tahodancer · #2 01-18-2007, 07:32 PM

Nevermind, I stumbled upon it quite by accident long after I'd given up searching. What I was looking for, I found out, is called a switch menu. Unfortuatly it didn't work for the page I used it on, but that's okay.

Ges · #3 01-20-2007, 05:03 PM

Hi tahodancer,
Switch menus are also known as 'folding menus'. Some have their links stay unfolded after clicking on the main link and others fold away when clicking on another link.
Here's the code that does both if required. You can add as many links as you like, ( or remove them! ). I've used your Movies, Books and Etc for you to test it. Use the code as it stands first then you can put it on your pages.
I have had to do it over 2 posts cos of its size - so just continue the copy from 1 post to the next with no gaps.
Javascript ans <head> first;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Fold out menu</title>
<style>
<!--
DIV.clTop{position:absolute; width:270}
DIV.clSub{position:absolute; left:10; width:270}
#divCont{position:relative; left:0; top:0; height:400; width:270;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:#FF0000}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
/*
Change this if you want all the submenus to get unfold: 0 = hide last one; 1 = show all
*/
var stayFolded=0
/*
Browsercheck
*/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)  
/*
Making cross-browser objects
*/
function makeMenu(obj,nest)
{
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')					
   	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');		
	this.height=n?this.ref.height:eval(obj+'.offsetHeight')
	this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;							
	this.hideIt=b_hideIt;	this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt											
	return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/*
Initiating the page. Just add to the arrays here to get more menu items
and add divs in the page
*/
function init()
{
	oTop=new Array()
	oTop[0]=new makeMenu('divTop1','divCont')
	oTop[1]=new makeMenu('divTop2','divCont')
	oTop[2]=new makeMenu('divTop3','divCont')

	oSub=new Array()
	oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
	oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
	oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')

	for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
	for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/*
This is the function that changes the sub menus to folded or unfolded state.
*/
function menu(num)
{
	if(browser)
	{
		if(!stayFolded)
		{
			for(i=0;i<oSub.length;i++)
			{
				if(i!=num) oSub[i].hideIt()
			}
			for(i=1;i<oTop.length;i++)
			{
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
			}
		}
		oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
		for(i=1;i<oTop.length;i++)
		{ 
			if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
		}
	}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;
</script>
</head>

Ges · #4 01-20-2007, 05:07 PM

Code:

<body bgcolor="white">
<div id="divCont">
	<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">Movies</a><br>
		<div id="divSub1" class="clSub">
			<a href="thispage.html" class="clSubb" alt="thing">» Click here to go to Movies link - 1</a><br>
			<a href="thatpage.html" class="clSubb">» Click here to go to Movies link - 2</a><br>
			<a href="hispage.html" class="clSubb">»  Click here to go to Movies link - 3</a><br>
			<a href="herpage.html" class="clSubb">» Add as many as you like here</a><br>
		</div><br>
	</div>
	<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">Books</a><br>
		<div id="divSub2" class="clSub">
			<a href="anotherpage.html" class="clSubb">- Click here to go to Books link - 1</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to Books link - 2</a><br>
			<a href="whereeveryouwanttogopage2.html" class="clSubb">- Add as many as you like here</a><br>

		</div><br>
	</div>
	<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">Etc</a><br>
		<div id="divSub3" class="clSub">
			<a href="anotherpage.html" class="clSubb">- Click here to go to ETC link - 1</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to ETC link - 2</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to ETC link - 3</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to ETC link - 4</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to ETC link - 5</a><br>
			<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to ETC link - 6</a><br>
			<a href="whereeveryouwanttogopage2.html" class="clSubb">- Add as many as you like here</a><br>

		</div><br>
	</div>
	

</div>


</body>
</html>

Changing;

Code:

var stayFolded=0

to 1 will cause the menu items to stay unfolded.

Hope this is OK.

Regards,
Ges.

Hope this is OK.

tahodancer · #5 04-02-2007, 03:14 AM

Oh wow, thanks! I had figured out a code a few months that worked on one page, but when I put it on another page on a different website, it didn't work. Could it be that switch menus do not work in DIV layers? If not, I'll have to live without them, although they would be fun to have. Bummer.

Ges · #6 04-02-2007, 11:04 AM

Hi tahodancer,
Glad you like it!

I'm not quite sure what you mean. The whole menu is based on <div>'s etc. Please tell me what you are trying to achieve and then maybe we can take it from there.
One of the most common uses is for <frames> with the menu on the left and the links targeted to the right frame.

Let me know.

Regards,
Ges.

Ges · #7 04-03-2007, 03:17 PM

Hi tahodancer,

That script is specifically for Internet Explorer and the Javascript functions take advantage of that fact.

So if you want a simpler one that works across all browsers then I've just posted one at thread;

http://www.lissaexplains.com/forum/s...ad.php?t=63728

I've made sure that it works in IE, FF and Opera. I can see no reason why it will not work in the others.

Regards,
Ges.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
background	x0hsol0velyx3	CSS	5	03-09-2006 07:22 PM
Need assistance with my coding ->	balYyamme	HTML Help	3	01-02-2006 07:38 PM
CSS Not Working	Tinksie Belle	CSS	7	07-22-2004 02:27 AM
It would be stupid to call this thread 'tables'....	isi333	Tables	4	02-07-2004 08:38 AM
Scrollbar Transparency	Jiscilla	Frames	4	12-28-2003 09:50 PM