• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Help Finding a sample code

G

gmagnuson

Guest
#1
Does anyone know where there is a sample code (I am guessing Javascript) that does this: In the middle of a webpage you have a "topic" and you click on that link (or Plus or minus arrow) and it will show the text instantaly. I think I recall MSDN using some of this for the definitions--The help file in Windows XP using something like it also. So you click on the topic and all the sub text "revels its self instantaly. I hope I described it right. Thanks!
 
#2
MSDN uses normal links. If you click the box (It's not a plus or minus arrow, just a box with a dot example) it loads a new link, no javascripts here. I know of another site that uses this feature, Spammers Paradise, they have a feature called 'Fast Reply Box'. It is closed by default, but if you click the Fast Reply button, it opens instantly, and yes this uses Javascript code. How this works, I am not sure, but you can take a look in the source. You may have to register first to view the box.
 
G

gmagnuson

Guest
#3
Originally posted by Glaanieboy
I know of another site that uses this feature, Spammers Paradise, they have a feature called 'Fast Reply Box'. It is closed by default, but if you click the Fast Reply button, it opens instantly, and yes this uses Javascript code. How this works, I am not sure, but you can take a look in the source. You may have to register first to view the box.
That is what I need, now to figure out how to code it. Is there a piece of sample code that is already done somewhere that I can just reconfigure to suit my needs? The only difference is I would like it to just be text I.E.

This is what they see as the main menu
They will see a few lines like this
......when clicked the text will pop down like this and
......show under it. When clicked again it will go back
......to normal.


Get the idea?

Here is the javascript code it uses:

javascript:ShowHide('qr_open','qr_closed')

But that does not help me with my website coding needs.
 
#4
ShowHide function
Code:
function ShowHide(id1, id2) {
	  if (id1 != '') expMenu(id1);
	  if (id2 != '') expMenu(id2);
	}
expMenu function
Code:
function expMenu(id) {
	  var itm = null;
	  if (document.getElementById) {
		itm = document.getElementById(id);
	  } else if (document.all){
		itm = document.all[id];
	  } else if (document.layers){
		itm = document.layers[id];
	  }
	
	  if (!itm) {
	   // do nothing
	  }
	  else if (itm.style) {
		if (itm.style.display == "none") { itm.style.display = ""; }
		else { itm.style.display = "none"; }
	  }
	  else { itm.visibility = "show"; }
	}
This is the complete (?) javascript code for the Show/Hide any text. I don't have the time to examine it (because I will be out of town for a few days) and explain it how it works, but I am sure there are plenty of other people around who are willing to explain it to you
 
G

gmagnuson

Guest
#5
Originally posted by Glaanieboy
I am sure there are plenty of other people around who are willing to explain it to you

Thanks for the code! Could someone explain to me how it works and how I put it into a html document? It looks to be different than other code I have delt with. Thanks!
 
G

gmagnuson

Guest
#6
I could not get that code to work, but I found some other, but could not get it to work it keeps giving me an error Line: 20, Char:1 Error: 'document.all.div2.style'is null or not an object'

Here is the code:

<html>

<head>

<script language="javascript">
<!--
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval ("document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>



</head>

<body>

<p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

<p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

<p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

<p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

<p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

<p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

<p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

<p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


<div id="div1" style="display: none;">Content 1</div>

<div id="div2" style="display: none;">Content 2</div>

<div id="div2" style="display: none;">Content 3</div>

<div id="div2" style="display: none;">Content 4</div>

<div id="div2" style="display: none;">Content 5</div>

<div id="div2" style="display: none;">Content 6</div>

<div id="div2" style="display: none;">Content 7</div>

<div id="div2" style="display: none;">Content 8</div>




</body>

</html>
 
G

gmagnuson

Guest
#8
I looked there, but they did not have anything that was related to what I was looking for. But it is a good place for code samples. I will keep it in mind.
 

gonaads

Beware the G-Man
Political User
#9
Try this...


<--------------------copy--------------------->

<html>

<head>
This is a test
</head>

<script LANGUAGE="JavaScript" type="text/javascript">
<!--
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval ("document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<body>

<p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

<p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

<p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

<p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

<p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

<p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

<p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

<p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


<div id="div1" style="display: none;">Content 1</div>

<div id="div2" style="display: none;">Content 2</div>

<div id="div3" style="display: none;">Content 3</div>

<div id="div4" style="display: none;">Content 4</div>

<div id="div5" style="display: none;">Content 5</div>

<div id="div6" style="display: none;">Content 6</div>

<div id="div7" style="display: none;">Content 7</div>

<div id="div8" style="display: none;">Content 8</div>




</body>

</html>

<--------------------copy--------------------->

It works in Mozilla, Firebird and IE 6, but not with Opera 6.1.
 

Members online

No members online now.

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,014
Latest member
sanoravies