...

View Full Version : Collapse isuue



Eben
06-04-2006, 03:42 PM
I have a little question about collapse issue i'm having.
I have this code that allows me to collapse and expand elemnts, but i can't find how to make it collapsed when the page loads.
I think it's about return true /false.


<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>

<a href="#" onclick="switchMenu('collapse')>Click to collapse</a>
<div id="collapse">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

vwphillips
06-04-2006, 04:24 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="switchMenu('collapse');">
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>

<a href="#" onclick="switchMenu('collapse');">Click to collapse</a>
<div id="collapse">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</body>

</html>

Eben
06-04-2006, 05:25 PM
Thanks vwphillips for that :) . i have also just figure it up now, the onload really
does the work but it happends after the page loads of course, and you can see it collapse while page loading, isn't there any other way of doing it, maybe force it to happend before page loadin, or what ever ?

glenmac
06-04-2006, 05:58 PM
http://www.bobbyvandersluis.com/articles/dynamicCSS.php

vwphillips
06-04-2006, 07:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body >
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>

<a href="#" onclick="switchMenu('collapse');">Click to collapse</a>
<div id="collapse" style="position:relative;display:none;" >
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</body>

</html>

Eben
06-04-2006, 07:20 PM
Thanks for the css hint phillips never thought about it :)
And thanks glenmac for the guides.

geo877
06-04-2006, 07:33 PM
lol i am doing exscaly the same thing and i regestered to this forum for help like 30 secs ago thats realy helpful thanks every 1!...but i've just being trying it out and mine is a hide and show... but when u hide you cant show because it's css style tells it not to show

it is this:


<script type="text/javascript">
if (document.getElementById) { // include all feature tests needed
// for your DOM script
document.write('<style type="text/css">#prefs {display:none;}</style>');
window.onload = hideprefs;
}

function showprefs() {
document.getElementById("prefs").style.display = "none";
}

</script>

<script type='text/javascript'>
<!--
// Hide Logo System
// created by Black Hawk Admin
// 2006
function hideplus1()
{
document.getElementById('splus1').style.display = "none"
}
function showplus1()
{
document.getElementById('splus1').style.display = ""
}
function showmin1()
{
document.getElementById('smin1').style.display = ""
}
function hidemin1()
{
document.getElementById('smin1').style.display = "none"
}
function hidenews()
{
document.getElementById('news').style.display = "none"
}
function backnews()
{
document.getElementById('news').style.display = ""
}

//-->
</script>


<script type='text/javascript'>
function showprefs()
{
document.getElementById('prefs').style.display = ""
}
function hideprefs()
{
document.getElementById('prefs').style.display = "none"
}
function text1hide()
{
document.getElementById('text').style.display = "none"
}
function text1show()
{
document.getElementById('text').style.display = ""
}
function text2hide()
{
document.getElementById('text2').style.display = "none"
}
function text2show()
{
document.getElementById('text2').style.display = ""
}
</script>
<center><a href='javascript:showprefs(); text1hide(); text2show()'><span id='text'><b>Show Prefs</span></b></a>
<a href='javascript:hideprefs(); text2hide(); text1show()'><span id='text2'><b>Hide Prefs</span></b></a>
<table id='prefs'>
<tr><td>
<b>News: </b><a href='javascript:hidenews(); hidemin1(); showplus1();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin1' '></A><a href='javascript:backnews(); hideplus1(); showmin1();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus1' ; '></A>
<br>

<b>Banner: </b><a href='javascript:removeLogo(); removeimg(); backimg2();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='img1'></A><a href='javascript:backLogo(); backimg(); removeimg2();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='img2'></A>
<br>

<b>Stats: </b><a href='javascript:hidestats(); hidemin(); showplus();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin'></A><a href='javascript:backstats(); hideplus(); showmin();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus'></A>


</td></tr></table>
</center>
(parts of the script is missing there but it dosent matter.) what happens is it loads hides the text and it cant show it... can any 1 help?

Eben
06-04-2006, 11:42 PM
Yeah something's going wrong when you put it into the <style> tags i think you need to use behavior attribute.

vwphillips
06-04-2006, 11:54 PM
your codes a mess with typos

what are your trying to achieve?

geo877
06-05-2006, 05:15 PM
my script works fine if u paste


<script type='text/javascript'>
<!--
// Hide Logo System
// created by Black Hawk Admin
// 2006
function hideplus1()
{
document.getElementById('splus1').style.display = "none"
}
function showplus1()
{
document.getElementById('splus1').style.display = ""
}
function showmin1()
{
document.getElementById('smin1').style.display = ""
}
function hidemin1()
{
document.getElementById('smin1').style.display = "none"
}
function hidenews()
{
document.getElementById('news').style.display = "none"
}
function backnews()
{
document.getElementById('news').style.display = ""
}

//-->
</script>


<script type='text/javascript'>
function showprefs()
{
document.getElementById('prefs').style.display = ""
}
function hideprefs()
{
document.getElementById('prefs').style.display = "none"
}
function text1hide()
{
document.getElementById('text').style.display = "none"
}
function text1show()
{
document.getElementById('text').style.display = ""
}
function text2hide()
{
document.getElementById('text2').style.display = "none"
}
function text2show()
{
document.getElementById('text2').style.display = ""
}
</script>
<center><a href='javascript:showprefs(); text1hide(); text2show()'><span id='text'><b>Show Prefs</span></b></a>
<a href='javascript:hideprefs(); text2hide(); text1show()'><span id='text2'><b>Hide Prefs</span></b></a>
<table id='prefs'>
<tr><td>
<b>News: </b><a href='javascript:hidenews(); hidemin1(); showplus1();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin1' '></A><a href='javascript:backnews(); hideplus1(); showmin1();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus1' ; '></A>
<br>

<b>Banner: </b><a href='javascript:removeLogo(); removeimg(); backimg2();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='img1'></A><a href='javascript:backLogo(); backimg(); removeimg2();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='img2'></A>
<br>

<b>Stats: </b><a href='javascript:hidestats(); hidemin(); showplus();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin'></A><a href='javascript:backstats(); hideplus(); showmin();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus'></A>


</td></tr></table>
</center>



into THIS TEST BED (http://www.jmarshall.com/easy/html/f_testbed.html) u can see my problem, im trying to get it to hide the other option (hide prefs) befor you can see it, a dhtml rollover replacing onmouse enter with onclick can do half and change the image, but i need it to change the link properties (sorry i cant spell!) so it has a differnt java link.

e.g.

show button > onclick-> do javascript hide obj and dhtml change show button to hide button-> hide button > onclick->... but i cant do that, how would i do it (at the moment it runs hide the hide button lol but that dosnt work when the page loads because it show both and evern when u use a onload run hide button "HIDE PREFS" it still shows for a while untill the page fully loads)

vwphillips
06-05-2006, 08:11 PM
my script works fine if u paste

whats this then



us.gif' id='smin1' '></A><a href

geo877
06-05-2006, 08:18 PM
??? whats wrong with i that bit?

geo877
06-06-2006, 07:48 AM
nm i have fixed my problem with the display...only 1 problem left :D

this 1
a dhtml rollover replacing onmouse enter with onclick can do half and change the image, but i need it to change the link properties (sorry i cant spell!) so it has a differnt java link.

e.g.

show button > onclick-> do javascript hide obj and dhtml change show button to hide button-> hide button > onclick->... but i cant do that, how would i do it (at the moment it runs hide the hide button lol but that dosnt work when the page loads because it show both and evern when u use a onload run hide button "HIDE PREFS" it still shows for a while untill the page fully loads)

geo877
06-07-2006, 09:37 PM
i have a solouting anyway... nm

vwphillips
08-19-2006, 02:04 PM
please be more specific

have you a problem or a solution?


If a problem please be more specific

world123
08-23-2006, 07:39 PM
i too had this issue... www.javascript.com (http://www.rebuz.com/Directory/Bad-Credit-Loans.htm)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum