problem with toggle script

P

Pawel_Iks

I have some problem with some script. I have two blocks (groups of
links initialy invisible) on the page, which I uncover by some item by
onClick event... However, when I refresh the page, the group will be
invisible. I dealt with this problem by cookie, however there are some
problems with second block which is irresistent on refreshment of the
page ... Let's look on the example. Please for help ...

<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function toogle(id) {
if (document.getElementById(id).innerHTML==" (+)") {
document.getElementById(id).innerHTML=" (-)";
document.getElementById(id+"_group").style.display='';
document.cookie=id+'=block';
} else {
document.getElementById(id).innerHTML=" (+)";
document.getElementById(id+"_group").style.display='none';
document.cookie=id+'=none';
}

}

function loadPage() {
tab=document.cookie.split(";");
for (var i=0;i<tab.length;i++) {
x=tab.split("=");
auxVar=document.createTextNode(x[0]+'='+x[1]+",");
document.getElementById('container').appendChild(auxVar);
if (x[1]=='block') {
document.getElementById(x[0]).innerHTML=" (-)";
document.getElementById(x
[0]+'_group').style.display='block';
} else {
document.getElementById(x[0]).innerHTML=" (+)";
document.getElementById(x
[0]+'_group').style.display='none';
}
}

}

</script>
</head>

<body onLoad="loadPage();">
<a href="index.html">strona</a><a id="s1" href="#" onClick="toogle
('s1');return false;"> (+)</a>
<ul id="s1_group" style="display: none">
<li><a href="index.html">s1</a></li>
<li><a href="index.html">s2</a></li>
<li><a href="index.html">s3</a></li>
</ul>
<br/>
<a href="index.html">strona 1</a><a id="s2" href="#" onClick="toogle
('s2');return false;"> (+)</a>
<ul id="s2_group" style="display: none">
<li><a href="index.html">s1</a></li>
<li><a href="index.html">s2</a></li>
<li><a href="index.html">s3</a></li>
</ul>
<div id='container'></div>

</body>
</html>
 
J

Jeremy J Starcher

I have some problem with some script. I have two blocks (groups of links
initialy invisible) on the page, which I uncover by some item by onClick
event... However, when I refresh the page, the group will be invisible.
I dealt with this problem by cookie, however there are some problems
with second block which is irresistent on refreshment of the page ...
Let's look on the example. Please for help ...

<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function toogle(id) {
if (document.getElementById(id).innerHTML==" (+)") {
document.getElementById(id).innerHTML=" (-)";
document.getElementById(id+"_group").style.display='';
document.cookie=id+'=block';
} else {
document.getElementById(id).innerHTML=" (+)";
document.getElementById(id+"_group").style.display='none';
document.cookie=id+'=none';
}

}

function loadPage() {
tab=document.cookie.split(";");
for (var i=0;i<tab.length;i++) {
x=tab.split("=");
auxVar=document.createTextNode(x[0]+'='+x[1]+",");
document.getElementById('container').appendChild(auxVar);
if (x[1]=='block') {
document.getElementById(x[0]).innerHTML=" (-)";
document.getElementById(x
[0]+'_group').style.display='block';
} else {
document.getElementById(x[0]).innerHTML=" (+)";
document.getElementById(x
[0]+'_group').style.display='none';
}
}

}

</script>
</head>

<body onLoad="loadPage();">
<a href="index.html">strona</a><a id="s1" href="#" onClick="toogle
('s1');return false;"> (+)</a>
<ul id="s1_group" style="display: none"> <li><a
href="index.html">s1</a></li>
<li><a href="index.html">s2</a></li>
<li><a href="index.html">s3</a></li>
</ul>
<br/>
<a href="index.html">strona 1</a><a id="s2" href="#" onClick="toogle
('s2');return false;"> (+)</a>
<ul id="s2_group" style="display: none"> <li><a
href="index.html">s1</a></li>
<li><a href="index.html">s2</a></li>
<li><a href="index.html">s3</a></li>
</ul>
<div id='container'></div>

</body>
</html>


Thank you for posting a complete example and well-formed question.

Check your Javascript error console... that will give you a hint on where
to check next.

Standard comments about using Javascript to provide functionality apply.
(Might be better to show all links at the start and hide the ones that
aren't to be shown for JS-disabled browsers.)
 
T

Thomas 'PointedEars' Lahn

Jeremy said:
I have some problem with some script. I have two blocks (groups of links
initialy invisible) on the page, which I uncover by some item by onClick
event... However, when I refresh the page, the group will be invisible.
I dealt with this problem by cookie, however there are some problems
with second block which is irresistent on refreshment of the page ...
Let's look on the example. Please for help ...

[snipped illegible code]

Thank you for posting a complete example and well-formed question.

JFTR: I did not bother to reply because I found the posted source code too
invalid, illegible (lack of any code style), and too full of irrelevance to
waste my time with. Also I found the problem description too vague for
a definite answer, and it lacked indication that the OP had done their
homework already. YMMV.

Check your Javascript error console... that will give you a hint on where
to check next.

First of all, the markup needs to be Valid (and it better be XHTML-free
unless XHTML serves a greater purpose there): <http://validator.w3.org/>

<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

<http://www.mopedepot.com/jjs/HowToRecognizeBadJavascriptCode.html>

As for the latter, expect further corrections/suggestions to that document
from me in the near future; for now, you definitely should add a document
contents as an ordered or unordered link list. And maybe its better to
remove dhtml.js from the references for the time being because the online
version is full of flaws waiting to be fixed (most of them are fixed
locally). I don't see how it is relevant anyway, maybe you can enlighten me?


PointedEars
 
J

Jeremy J Starcher

<http://www.mopedepot.com/jjs/HowToRecognizeBadJavascriptCode.html>

As for the latter, expect further corrections/suggestions to that
document from me in the near future; for now, you definitely should add
a document contents as an ordered or unordered link list.


It is getting long enough that yes, that would be good idea.

Looks like I have my project for tomorrow night cut out for me.

And maybe its
better to remove dhtml.js from the references for the time being because
the online version is full of flaws waiting to be fixed (most of them
are fixed locally).

As you wish.
 
P

Pawel_Iks

I've solve the problem... The small, little space cause a problem,
becouse, the separator between items in string: document.cookie isn't
';' but '; '. Here is the working example ... Maybe somebody will have
similar problem ...


<html>
<head>
<title>Some title</title>
<script type="text/javascript">

function toggle(id) {
if (document.getElementById(id).innerHTML==" (+)") {
document.getElementById(id).innerHTML=" (-)";
document.getElementById(id+"_group").style.display='block';
document.cookie=id+'=block';
} else {
document.getElementById(id).innerHTML=" (+)";
document.getElementById(id+"_group").style.display='none';
document.cookie=id+'=none';
}
}

function loadPage() {
tab=document.cookie.split('; ');
for (i=0;i<tab.length;i++) {
x=tab.split('=');
if (x.length==2)
{
if (document.getElementById(x[0])) {
if (x[1]=='block') {
document.getElementById(x[0]).innerHTML=" (-)";
document.getElementById(x
[0]+'_group').style.display='block';
} else {
document.getElementById(x[0]).innerHTML=" (+)";
document.getElementById(x[0]+'_group').style.display='none';
}}
}
}

}
</script>
</head>
<body onLoad="loadPage();">
<a href='index.html'>strona 1</a><a id='s2' href="#" onClick="toggle
('s2'); return false;"> (+)</a>
<ul id='s2_group' style='display: none'>
<li><a href='index.html'>s1</a></li>
<li><a href='index.html'>s2</a></li>
<li><a href='index.html'>s3</a></li>
</ul><br/>

<a href="index.html">strona</a><a id='s1' href="#" onClick="toggle
('s1'); return false;"> (+)</a>
<ul id="s1_group" style='display: none'>
<li><a href='index.html'>s1</a></li>
<li><a href='index.html' >s2</a></li>
<li><a href='index.html'>s3</a></li>
</ul>
<br/>

</body>
</html>
 
T

Thomas 'PointedEars' Lahn

Pawel_Iks said:
I've solve the problem... The small, little space cause a problem,
becouse, the separator between items in string: document.cookie isn't
';' but '; '.

You can't be sure of that, so you should write:
tab=document.cookie.split('; ');

var tab = document.cookie.split(/;\s*/);

As for the `var', it declares `tab' a variable, which you forgot in other
places, too, among other blunders that you should (be able) fix after having
read Jeremy's tutorial on how to avoid bad code.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top