|
 |
|
|
|
11-26-2005, 11:45 AM
|
show/hide script
|
Posts: 122
Location: bolton...
|
Can someone help me with a script to make my nav display/hide...
Code:
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
how can i make it so that when you click on the - next to "profile" (same for "diary" as well) it expands to show the sublinks "View profile" and "Edit profile" and then when you click it again it hides them...
xx kieran xx |
|
|
|
|
11-26-2005, 12:41 PM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Here a simple script:
Code:
function showhide(id){
if(document.getElementById(id).style.display=="none")
document.getElementById(id).style.display="block";
else
document.getElementById(id).style.display="none";
}
You'd better put your table in a div however. I've got bad experiences when doing this directly with tables.
HTML Code:
<div id="nav">
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
</div>
<a href="javascript:showhide('nav')">Show/hide Navgation</a>
Last edited by Orodreth; 11-26-2005 at 12:47 PM..
|
|
|
|
|
11-26-2005, 02:20 PM
|
|
Posts: 122
Location: bolton...
|
thx it work brilliantly  :P i gave you so talkupation 
hehe anyway is there anyway of making it so it automaticaly doesnt show and then once the person clicks to open it, it sets a cookie to remember that its open so it is open on every page? |
|
|
|
|
11-26-2005, 05:23 PM
|
|
Posts: 1,693
|
|
|
|
|
|
11-26-2005, 07:14 PM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Yeah, indeed, you could do it that way. Chroder's good in JavaScript, I'd never have figured this out. Anyways, for use with my script, here's an altered version:
HTML Code:
<html>
<head>
<title> New Document </title>
<script language="javascript" type="text/javascript">
<!--
function getCookie(name){
if(document.cookie!=""){
var cookie=document.cookie;
var start=cookie.indexOf(name);
var stop;
if(start!=-1){
start+=name.length+1;
stop=cookie.indexOf(';', start);
if(stop==-1)
stop=cookie.length;
return unescape(cookie.substring(firstPos, lastPos));
}
}
else
return false;
}
function makeCookie(name, value){
var cookie = name + '=' + escape(value) + ';';
document.cookie = cookie;
}
function showhide(id, setcookie=true){
if(setcookie==true){
var cookie=getCookie('show');
var show=new Array();
show=cookie.split(', ');
var in=-1;
for(i=0; i < show.length; i++)
if(show[i]==id)
in=i;
}
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block";
if(in==-1 && setcookie==true)
show[show.length]=id;
}
else{
document.getElementById(id).style.display="none";
if(in!=-1 && setcookie==true)
show.splice(in, 1);
}
if(setcookie==true)
makeCookie('show', show.join(', '));
}
function init(){
showhide('nav', false)
var cookie=getCookie('show');
var show;
if(cookie){
show=cookie.split(', ');
for(i=0; i < show.length; i++)
document.getElementById(show[i]).style.display="block";
}
}
-->
</script>
</head>
<body onload="init()">
<div id="nav">
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
</div>
<a href="javascript:showhide('nav')">Show/hide Navgation</a>
</body>
</html>
That should do the job. The script above makes all elements in the cooki show, the rest won't. Make sure to hide these (either by calling the showhide() function, like I did in the init() function, or directly through css).
I didn't test it, so it's probably still full of bugs.
Thanks for the talkreputation, BTW.
Last edited by Orodreth; 11-26-2005 at 07:19 PM..
|
|
|
|
|
12-03-2005, 05:29 AM
|
|
Posts: 122
Location: bolton...
|
Quote:
|
Originally Posted by Orodreth
Yeah, indeed, you could do it that way. Chroder's good in JavaScript, I'd never have figured this out. Anyways, for use with my script, here's an altered version:
HTML Code:
<html>
<head>
<title> New Document </title>
<script language="javascript" type="text/javascript">
<!--
function getCookie(name){
if(document.cookie!=""){
var cookie=document.cookie;
var start=cookie.indexOf(name);
var stop;
if(start!=-1){
start+=name.length+1;
stop=cookie.indexOf(';', start);
if(stop==-1)
stop=cookie.length;
return unescape(cookie.substring(firstPos, lastPos));
}
}
else
return false;
}
function makeCookie(name, value){
var cookie = name + '=' + escape(value) + ';';
document.cookie = cookie;
}
function showhide(id, setcookie=true){
if(setcookie==true){
var cookie=getCookie('show');
var show=new Array();
show=cookie.split(', ');
var in=-1;
for(i=0; i < show.length; i++)
if(show[i]==id)
in=i;
}
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block";
if(in==-1 && setcookie==true)
show[show.length]=id;
}
else{
document.getElementById(id).style.display="none";
if(in!=-1 && setcookie==true)
show.splice(in, 1);
}
if(setcookie==true)
makeCookie('show', show.join(', '));
}
function init(){
showhide('nav', false)
var cookie=getCookie('show');
var show;
if(cookie){
show=cookie.split(', ');
for(i=0; i < show.length; i++)
document.getElementById(show[i]).style.display="block";
}
}
-->
</script>
</head>
<body onload="init()">
<div id="nav">
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
</div>
<a href="javascript:showhide('nav')">Show/hide Navgation</a>
</body>
</html>
That should do the job. The script above makes all elements in the cooki show, the rest won't. Make sure to hide these (either by calling the showhide() function, like I did in the init() function, or directly through css).
I didn't test it, so it's probably still full of bugs.
Thanks for the talkreputation, BTW. |
argh... i tried that and it wont work :S i cant really fix it cause i dont no javascript  ... please could someone help me sort it out? |
|
|
|
|
12-03-2005, 06:00 AM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Are you using firefox? If you are, could you send me the error message (found in the JavaScript-console)
|
|
|
|
|
12-03-2005, 06:05 AM
|
|
Posts: 122
Location: bolton...
|
nowp im using ie but i do have firefox so ill go check it out on firefox now
|
|
|
|
|
12-03-2005, 06:06 AM
|
|
Posts: 122
Location: bolton...
|
Error: missing ) after formal parameters
Source File: http://www.apocoliptic-children.gm6.info/aphoticdreams/
Line: 31, Column: 33
Source Code:
function showhide(id, setcookie=true){
Error: init is not defined
Error: toggleItem is not defined |
|
|
|
|
12-04-2005, 07:02 PM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Ok, fixed. And I tested it this time:
HTML Code:
<html>
<head>
<title> New Document </title>
<script language="javascript" type="text/javascript">
<!--
function getCookie(name){
if(document.cookie!=""){
var cookie=document.cookie;
var start=cookie.indexOf(name);
var stop;
if(start!=-1){
start+=name.length+1;
stop=cookie.indexOf(';', start);
if(stop==-1)
stop=cookie.length;
return unescape(cookie.substring(start, stop));
}
}
else
return false;
}
function makeCookie(name, value){
var cookie = name + '=' + escape(value) + ';';
document.cookie = cookie;
}
function showhide(id, setcookie){
if(setcookie==true){
var cookie=getCookie('show');
var show=new Array();
if(cookie) {show=cookie.split(', ');}
var invar=-1;
for(i=0; i < show.length; i++)
if(show[i]==id)
invar=i;
}
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block";
if(invar==-1 && setcookie==true)
show[show.length]=id;
}
else{
document.getElementById(id).style.display="none";
if(invar!=-1 && setcookie==true)
show.splice(invar, 1);
}
if(setcookie==true)
makeCookie('show', show.join(', '));
}
function init(){
showhide('nav', false)
var cookievalue=getCookie('show');
var show;
if(cookievalue){
show=cookievalue.split(', ');
for(i=0; i < show.length; i++)
document.getElementById(show[i]).style.display="block";
}
}
-->
</script>
</head>
<body onload="init()">
<div id="nav">
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
</div>
<a href="javascript:showhide('nav', true)">Show/hide Navgation</a>
</body>
</html>
|
|
|
|
|
12-05-2005, 04:32 PM
|
|
Posts: 122
Location: bolton...
|
yea it works thx but i cant open it back up :S |
|
|
|
|
12-05-2005, 05:25 PM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Oh, darn. I'll try to fix it tomorrow, it's too late now.
|
|
|
|
|
12-06-2005, 06:01 AM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
Ok, and now? You can test/view/download the fixed (I think) script here: http://thomas.weyn.be/scripts/showhide/page.html
Here's the code again
HTML Code:
<html>
<head>
<title> New Document </title>
<script language="javascript" type="text/javascript">
<!--
function getCookie(name){
if(document.cookie!=""){
var cookie=document.cookie;
var start=cookie.indexOf(name);
var stop;
if(start!=-1){
start+=name.length+1;
stop=cookie.indexOf(';', start);
if(stop==-1)
stop=cookie.length;
return unescape(cookie.substring(start, stop));
}
}
else
return false;
}
function makeCookie(name, value){
var cookie = name + '=' + escape(value) + ';';
document.cookie = cookie;
}
function showhide(id, setcookie){
if(setcookie==true){
var cookie=getCookie('show');
var show=new Array();
if(cookie) {show=cookie.split(', ');}
var invar=-1;
for(i=0; i < show.length; i++)
if(show[i]==id)
invar=i;
}
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block";
if(invar==-1 && setcookie==true)
show[show.length]=id;
}
else{
document.getElementById(id).style.display="none";
if(invar!=-1 && setcookie==true)
show.splice(invar, 1);
}
if(setcookie==true)
makeCookie('show', show.join(', '));
}
function init(){
showhide('nav', false)
var cookievalue=getCookie('show');
var show;
if(cookievalue!=""){
show=cookievalue.split(', ');
for(i=0; i < show.length; i++)
document.getElementById(show[i]).style.display="block";
}
}
-->
</script>
</head>
<body onload="init()">
<div id="nav">
<table width="150px" class="mininav" cellpadding="3" cellspacing="0">
<tr>
<td>
<div align="center">Control Panel</div>
-<a href="index.php?page=profile">Profile</a><br /><span class="mininav">-<a href="index.php?page=profile&user=-_DarkRanger_-">View Profile</a></span><br /><span class="mininav">-<a href="index.php?page=profile&do=edit">Edit Profile</a></span><br />
-<a href="index.php?page=diary">Diary</a><br /><span class="mininav">-<a href="index.php?page=diary&user=-_DarkRanger_-">View Diary</a></span><br /><span class="mininav">-<a href="index.php?page=diary&do=new">New Diary</a></span><br />
-<a href="index.php?page=cp&settings">Settings</a><br />
</td>
</tr>
</table>
</div>
<a href="javascript:showhide('nav', true)">Show/hide Navgation</a>
</body>
</html>
Last edited by Orodreth; 12-07-2005 at 06:30 AM..
|
|
|
|
|
12-10-2005, 10:21 AM
|
|
Posts: 122
Location: bolton...
|
thx
ive updated the script on my site but it still wont open back up and i dont know why because it works fine on your test page :S
my site is here if ya wanna look... http://www.apocoliptic-children.gm6....eams/index.php
the error message :S
Error: cookievalue has no properties
Source File: http://www.apocoliptic-children.gm6....ams/index.php#
Line: 67
do you have any idea why it wont work on my site :S
i swear jscrip hates me ¬.¬ never works for me :S my jscript menu is messing up atm as well :S |
|
|
|
|
12-10-2005, 10:25 AM
|
|
Posts: 122
Location: bolton...
|
btw the link to open and close the nav on the left is at the top left and it says "Show/Hide Nav"
|
|
|
|
|
12-10-2005, 08:51 PM
|
|
Posts: 251
Location: Belgium, Antwerp, Zoersel
|
First thing that's wrong:
HTML Code:
<tr><td align="left"><a href="#" onclick="toggleItem('nav', true)">Show/Hide Nav</a></td></tr>
change to
HTML Code:
<tr><td align="left"><a href="#" onclick="showhide('nav', true)">Show/Hide Nav</a></td></tr>
|
|
|
|
|
12-11-2005, 11:32 AM
|
|
Posts: 122
Location: bolton...
|
oooooooh sorry >< hehe im blind |
|
|
|
|
12-06-2007, 12:05 PM
|
Re: show/hide script
|
Posts: 1
|
Hi, i may have a simple solution, its not exactly what you wanted, but let me show it:
<script type="text/javascript">
try {
function start() {
document.getElementById('test').style.display="non e"
}
}
catch(err) {
alert("er is iets fout gegaan")
}
try {
function verander() {
document.getElementById('test').style.display="blo ck"
}
}
catch(err) {
alert("er is iets fout gegaan")
}
</script>
</head>
<body>
<body onload="start()">
<input type="button" onClick="verander()" value="show">
<input type="button" onClick="start()" value="hide">
<div id="test">
<form>
<input type="text">
</form>
</div>
---ignore the catch and try |
|
|
|
|
12-06-2007, 12:21 PM
|
Re: show/hide script
|
Posts: 3,621
Name: Thierry
Location: I'm the uber Spaminator !
|
Quote:
|
You'd better put your table in a div however. I've got bad experiences when doing this directly with tables.
|
That's because you cannot use display="block" on a table row or cell.
You have special display values for those.
__________________
Only a biker knows why a dog sticks his head out the window.
|
|
|
|
|
12-06-2007, 02:32 PM
|
Re: show/hide script
|
Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
|
Quote:
|
Hi, i may have a simple solution, its not exactly what you wanted
|
Mind you, I would hope the problem was solved sometime ago, because it was posted in December ...
... 2005!!!!
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
|
|
|
|
|
|
« Reply to show/hide script
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
