PDA

View Full Version : Resolved First quick ok, but 2nd, 3rd etc is not - Have to click twice, instead of once



CBG
Mar 21st, 2011, 12:53 AM
Hi,

I have the below code, but got a problem with it.
The problem is, if you click Test 1, then Test 2 you have to click Test 2 twice, this also repeats for Test 3, 4 and 5.
It is the same with onclick.

I presume the problem is in the javascript code, but not sure where to start.

Can anyone help



<html>
<head>
<title>Test JS</title>
<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="javascript:showhide('sect1');">Test 1</a></p>
<div id="sect1" style="display: none;">Test 1 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect2');">Test 2</a></p>
<div id="sect2" style="display: none;">Test 2 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect3');">Test 3</a></p>
<div id="sect3" style="display: none;">Test 3 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect4');">Test 4</a></p>
<div id="sect4" style="display: none;">Test 4 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect5');">Test 5</a></p>
<div id="sect5" style="display: none;">Test 5 content</div>

</body>
</html>

bullant
Mar 21st, 2011, 01:16 AM
Maybe use this as a guide


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul {
list-style-type: none}
.more_content {
margin: 10px 0px 0px 50px;
padding: 5px 5px 5px 5px;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
display: none}
</style>
<script type="text/javascript">
function showHideMore(link_id,elemId) {
var linkObj = document.getElementById(link_id);
var contObj = document.getElementById(elemId);
var status = (contObj.style.display == 'block')? 'none' : 'block';
//display/hide the more content for this elemId
contObj.style.display=status;
//change the link innerHTML
linkObj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
}
</script>
</head>
<body>
<div>
<ul>
<li>
<div>
<a id="m1_link" href="#" onclick="showHideMore(this.id,'m1_cont'); return false;">Show more</a>
<div id="m1_cont" class="more_content">More 1 content</div>
</div>
</li>
<li>
<div>
<a id="m2_link" href="#" onclick="showHideMore(this.id,'m2_cont'); return false">Show more</a>
<div id="m2_cont" class="more_content">More 2 content</div>
</div>
</li>
<li>
<div>
<a id="m3_link" href="#" onclick="showHideMore(this.id,'m3_cont'); return false;">Show more</a>
<div id="m3_cont" class="more_content">More 3 content</div>
</div>
</li>
<li>
<div>
<a id="m4_link" href="#" onclick="showHideMore(this.id,'m4_cont'); return false;">Show more</a>
<div id="m4_cont" class="more_content">More 4 content</div>
</div>
</li>
</ul>
</div>

</body>
</html>

DaveyErwin
Mar 21st, 2011, 01:27 AM
<html>
<head>
<title>Test JS</title>
<script language="javascript">
<!--
var state = 'none';

function showhide(layer_ref) {
//alert(eval( "document.all." + layer_ref + ".style.display") == "none")

if (document.all) { //IS IE 4 or 5 (or 6 beta)
if(eval( "document.all." + layer_ref + ".style.display") == "none"){
eval( "document.all." + layer_ref + ".style.display = 'block'");
}else{
eval( "document.all." + layer_ref + ".style.display = 'none'");
}

}
if (document.layers) { //IS NETSCAPE 4 or below
if(document.layers[layer_ref].display == none){
document.layers[layer_ref].display = "block";
}else{
document.layers[layer_ref].display = "none";
}
}
if (document.getElementById &&!document.all) {
if(document.getElementById(layer_ref).style.display == "none"){
document.getElementById(layer_ref).style.display = "block";
}else{
document.getElementById(layer_ref).style.display = "none";
}
}
}
//-->
</script>
</head>
<body>

<p><a href="javascript:showhide('sect1');">Test 1</a></p>
<div id="sect1" style="display: none;">Test 1 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect2');">Test 2</a></p>
<div id="sect2" style="display: none;">Test 2 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect3');">Test 3</a></p>
<div id="sect3" style="display: none;">Test 3 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect4');">Test 4</a></p>
<div id="sect4" style="display: none;">Test 4 content</div>
<br><br><br>
<p><a href="javascript:showhide('sect5');">Test 5</a></p>
<div id="sect5" style="display: none;">Test 5 content</div>

</body>
</html>

CBG
Mar 21st, 2011, 01:52 AM
Thank you both for your replies.
I used: DaveyErwin javascript code.

Thanks again :D

bullant
Mar 21st, 2011, 01:53 AM
you're welcome :)

I assume you are aware using eval can have security risks (http://stackoverflow.com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea). There is lots more info on google.

DaveyErwin
Mar 21st, 2011, 05:35 AM
you're welcome :)

I assume you are aware using eval can have security risks (http://stackoverflow.com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea). There is lots more info on google.

There is no inherent "risk" with eval unless
arbitrary user input is evaluated, in this
particular case there is no "risk" at all.
Also, the is nothing evil about eval but,
generally there are better alternatives.

bullant
Mar 21st, 2011, 06:03 AM
When I google something like "eval javascript security" I get a truckload of hits on the pros and cons of using eval.

Personally I don't use it unless there is no alternative.

DaveyErwin
Mar 21st, 2011, 09:25 AM
When I google something like "eval javascript security" I get a truckload of hits on the pros and cons of using eval.

Personally I don't use it unless there is no alternative.

When I google trolls, gnomes, hobbits and garden ferries I get truckloads of hits.

setInterval and setTimeout do an eval at regular intervals or afer a set time respectively.

If there is no way to know the string you wish to run as
code before run time then eval may be your only option.

As I have said there is absolutely no "risk" involved in the code presented in this thread.

I would very much appreciate an example of percieved "risky" code
that involves a properly used eval statement.

Philip M
Mar 21st, 2011, 09:50 AM
There is no inherent "risk" with eval unless
arbitrary user input is evaluated, in this
particular case there is no "risk" at all.
Also, there is nothing evil about eval but,
generally there are better alternatives.

Absolutely right on, Davey! :)



setInterval and setTimeout do an eval at regular intervals or afer a set time respectively.


In versions earlier than Microsoft Internet Explorer 5, the first argument of setTimeout must be a string and evaluation of the string is deferred until the specified interval elapses.

function test() {
alert ("Hello")
setTimeout("test()", 2000);
}
test();

As of Internet Explorer 5, the first argument of setTimeout can be a string or a function pointer.

function test() {
alert ("Hello")
setTimeout(test, 2000);
}
test();

This is now the prefered way.

As you say, there is nothing evil about eval but, generally, there are better alternatives. No higher than that.

bullant
Mar 21st, 2011, 10:47 AM
If there is no way to know the string you wish to run as
code before run time then eval may be your only option.


yep agree, that's why I said I only use it when there is no alternative.