Menu
Community /Pin to ProfileBookmark
@cootheadOct 30.2010 — #Hi there bulagump,
and a warm welcome to these forums. ?
Here is a minor reworking of your document...
[i]coothead[/i]
fun with showing and hiding div’s
I was wondering if anyone wanted to take a shot at re-factoring my code. I am not a javascript guru, and I would like some feedback on what I could do to make it better.
The below code shows/hides the top div, and when the top div is hidden, the bottom div takes up the space of the top div.
Thanks,
bulagump
<!DOCTYPE HTML>
<head>
<script>
function DivToggle (vTopDiv,vBottomDiv)
{
var vBottomDivHeight;
if ( parseInt(document.getElementById(“vBottomDivHeight”).value)>0) {
vBottomDivHeight = parseInt(document.getElementById(“vBottomDivHeight”).value);
}
else{
// when the page loads for the first time, put the height of the AJAX div in a hidden input field
vBottomDivHeight = parseInt(document.getElementById(vBottomDiv).style.height);
document.getElementById(“vBottomDivHeight”).value=vBottomDivHeight;
document.getElementById(“vTopDivExpandedFlag”).value=”Y”;
}
// if the Top Div is displayed, hide it and increase the size of the bottom Div by the height of the top Div
if (document.getElementById(“vTopDivExpandedFlag”).value===”Y” )
{
vBottomDivHeight += parseInt(document.getElementById(vTopDiv).style.height);
document.getElementById(vBottomDiv).style.height = vBottomDivHeight+ ‘px’;
document.getElementById(vTopDiv).style.display = “none”;
document.getElementById(“vTopDivExpandedFlag”).value=”N”;}
else {
// if the databrowser div is hidden, display it and reset the AJAX div to the original size
document.getElementById(vBottomDiv).style.height = vBottomDivHeight+ ‘px’;
document.getElementById(vTopDiv).style.display = “”;
document.getElementById(“vTopDivExpandedFlag”).value=”Y”;
}
}
</script>
</head>
<body>
<input type=”hidden” id=”vBottomDivHeight”></input>
<input type=”hidden” id=”vTopDivExpandedFlag”></input>
<a href=”#” onclick=”javscript?ivToggle(‘testdiv’,’testdiv2′);” >show/hide top div, and grant the bottom div the space that the top div was
taking up</a>
<div style=”height: 300px; background-color:lightblue;” id=”testdiv”>
</div>
<div style=”height: 130px; overflow:scroll; background-color:gray;” id=”testdiv2″>
bottom div row 1 <br>
bottom div row 2 <br>
bottom div row 3 <br>
bottom div row 4 <br>
borrom div row 6 <br>
borrom div row 7 <br>
borrom div row 8 <br>
borrom div row 9 <br>
borrom div row 10 <br>
borrom div row 11 <br>
borrom div row 12 <br>
borrom div row 13 <br>
borrom div row 14 <br>
borrom div row 15 <br>
borrom div row 16 <br>
borrom div row 17 <br>
</div>
</body>
</html>
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadOct 30.2010 — #Hi there bulagump,and a warm welcome to these forums. ?
Here is a minor reworking of your document...
[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>untitled document</title>
<style type="text/css">
#button {
width:80px;
margin-bottom:10px;
}
#testdiv {
height:300px;
background-color:#add8e6;
}
#testdiv1 {
height:130px;
overflow:auto;
background-color:#808080;
}
#testdiv1 p {
margin:10px 20px;
}
</style>
<script type="text/javascript">
function init(){
obj=document.getElementById('testdiv');
obj1=document.getElementById('testdiv1');
document.getElementById('button').onclick=function() {
this.value=='hide div'?
(this.value='show div',
obj.style.height=0,
obj1.style.height='430px'):
(this.value='hide div',
obj.style.height='300px',
obj1.style.height='130px');
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div><input id="button" type="button" value="hide div"></div>
<div id="testdiv"></div>
<div id="testdiv1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>
</body>
</html>
[/color][i]coothead[/i]