renardfille
07-07-2011, 10:07 PM
I am new to Javascript, and so far I have been fortunate enough to get my code to work. What I have is a page full of hidden images, and checkboxes to unhide the desired images. What I would like is for the page to scrollintoview when that image is unhidden.
I can do one or the other, but I can't seem to get them to work together.
Any insight would be appreciated.
<html>
<head>
<script type="text/javascript">
var divs1 = ["div1",];
var divs2 = ["div2",];
var divs3 = ["div3",];
var divs4 = ["div4",];
var divs5 = ["div5",];
var divs6 = ["div6",];
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.show
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body bgcolor="PaleGoldenrod" onload="document.forms[0].reset()">
<p><center><img src="top_f_3.png" alt="Overall Performance" /></center></p>
<form name="myform" action="checkboxes.asp" method="post">
<center>
<input type="checkbox" onclick="chk(divs1, this.checked);"> | v1 |
<input type="checkbox" onclick="chk(divs2, this.checked);"> | v2 |
<input type="checkbox" onclick="chk(divs3, this.checked);"> | v3 |
<input type="checkbox" onclick="chk(divs4, this.checked);"> | v4 |
<input type="checkbox" onclick="chk(divs5, this.checked);"> | v5 |
<input type="checkbox" onclick="chk(divs6, this.checked);"> | v6 |
</center>
</form>
<div id="div1" class="hide">
<p> <center> <img src="f3_v1.png" alt="V1"/> </center> </p>
</div>
<div id="div2" class="hide">
<p> <center> <img src="f3_v2.png" alt="v2" /> </center> </p>
</div>
<div id="div3" class="hide">
<p> <center> <img src="f3_v3.png" alt="v3" /> </center> </p>
</div>
<div id="div4" class="hide">
<p> <center> <img src="f3_v4.png" alt="v4" /> </center> </p>
</div>
<div id="div5" class="hide">
<p> <center> <img src="f3_v5.png" alt="v5" /> </center> </p>
</div>
<div id="div6" class="hide">
<p> <center> <img src="f3_v6.png" alt="v6" /> </center> </p>
</div>
</body>
</html>
I can do one or the other, but I can't seem to get them to work together.
Any insight would be appreciated.
<html>
<head>
<script type="text/javascript">
var divs1 = ["div1",];
var divs2 = ["div2",];
var divs3 = ["div3",];
var divs4 = ["div4",];
var divs5 = ["div5",];
var divs6 = ["div6",];
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.show
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body bgcolor="PaleGoldenrod" onload="document.forms[0].reset()">
<p><center><img src="top_f_3.png" alt="Overall Performance" /></center></p>
<form name="myform" action="checkboxes.asp" method="post">
<center>
<input type="checkbox" onclick="chk(divs1, this.checked);"> | v1 |
<input type="checkbox" onclick="chk(divs2, this.checked);"> | v2 |
<input type="checkbox" onclick="chk(divs3, this.checked);"> | v3 |
<input type="checkbox" onclick="chk(divs4, this.checked);"> | v4 |
<input type="checkbox" onclick="chk(divs5, this.checked);"> | v5 |
<input type="checkbox" onclick="chk(divs6, this.checked);"> | v6 |
</center>
</form>
<div id="div1" class="hide">
<p> <center> <img src="f3_v1.png" alt="V1"/> </center> </p>
</div>
<div id="div2" class="hide">
<p> <center> <img src="f3_v2.png" alt="v2" /> </center> </p>
</div>
<div id="div3" class="hide">
<p> <center> <img src="f3_v3.png" alt="v3" /> </center> </p>
</div>
<div id="div4" class="hide">
<p> <center> <img src="f3_v4.png" alt="v4" /> </center> </p>
</div>
<div id="div5" class="hide">
<p> <center> <img src="f3_v5.png" alt="v5" /> </center> </p>
</div>
<div id="div6" class="hide">
<p> <center> <img src="f3_v6.png" alt="v6" /> </center> </p>
</div>
</body>
</html>