View Full Version : Using Scrollintoview and Unhide/Hide Div Together

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.


<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);


<style type="text/css">

display: block;

display: none;
<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">


<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 |



<div id="div1" class="hide">
<p> <center> <img src="f3_v1.png" alt="V1"/> </center> </p>

<div id="div2" class="hide">
<p> <center> <img src="f3_v2.png" alt="v2" /> </center> </p>

<div id="div3" class="hide">
<p> <center> <img src="f3_v3.png" alt="v3" /> </center> </p>

<div id="div4" class="hide">
<p> <center> <img src="f3_v4.png" alt="v4" /> </center> </p>

<div id="div5" class="hide">
<p> <center> <img src="f3_v5.png" alt="v5" /> </center> </p>

<div id="div6" class="hide">
<p> <center> <img src="f3_v6.png" alt="v6" /> </center> </p>