PDA

View Full Version : Function to increase and decrease an obects size



NotSoGreat
07-16-2010, 07:15 AM
I am new to this and I am pretty lost, basically I want the div to start out completely minimized at 0% height and then when I click the button that calls the function it should increase the size to 100%, once it is maximized I want it to set the height back to 0% when the button is clicked again. Heres what I have so far. I can get it to minimize and maximize itself but I can't get the height set correctly.


Code:
<SCRIPT language="javascript">


var y = 100;
var q = 5;
var f = 0;
var g = 0;


function changeheight(){
if(y>170&&g==0){g=1;return;}
if(y<101&&g==1){g=0;return;}
if(g)q=-5;if(!g)q=5;y=y+q;
e=document.getElementById("examplediv");
e.style.height = y + 'px';
t=setTimeout("changeheight();",0);
</SCRIPT>

Can anyone help me out, or is there an easier way to do this?

coothead
07-16-2010, 08:50 AM
Hi there NotSoGreat,

and a warm welcome to these forums. ;)

Here is an example that you might like to try...


<!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>expand and shrink div</title>

<style type="text/css">
body {
font-family:sans-serif;
font-size:0.8em;
background-color:#fc9;
}
#expand {
width:80px;
padding:5px;
border:3px double #999;
background-color:#fff;
text-align:center;
cursor:pointer;
display:none;
}
#container {
width:600px;
overflow:hidden;
background-color:#fff;
margin:auto;
}
#container #inner {
padding:10px 10px 20px;
}
#container p {
margin:0;
padding:10px;
text-align:justify;
text-indent:1.5em;
}
#container p:first-letter {
font-family:serif;
font-size:200%;
color:#600;
}
.brdr {
border:1px solid #999;
}
.go {
color:#090;
}
.stop {
color:#900;
}
</style>

<script type="text/javascript">

var c=0;
var shr;

function init(){

speed=50; /* this value is editable - larger value is slower */
test=true;
obj=document.getElementById('expand');
obj1=document.getElementById('container');
hgt=document.getElementById('inner').offsetHeight;

obj.style.display='block';
obj1.className='';
obj1.style.height=0;

obj.onclick=function(){
if(test==true){
expandDiv();
test=false;
}
else {
shrinkDiv();
test=true;
}
}
}

function expandDiv() {
clearTimeout(shr);
obj1.style.height=c+'px';
obj1.className='brdr';
obj.firstChild.nodeValue='shrink';
obj.className='stop';

c+=20;
if(c>=hgt) {
c=hgt;
clearTimeout(exp);
return;
}
exp=setTimeout(function(){expandDiv()},speed);
}

function shrinkDiv() {
clearTimeout(exp);
obj1.style.height=c+'px';
obj.firstChild.nodeValue='expand';
obj.className='go';

c-=20;
if(c<0) {
c=0;
clearTimeout(shr);
obj1.style.height=0;
obj1.className='';
return;
}
shr=setTimeout(function(){shrinkDiv()},speed);
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div id="expand" class="go">expand</div>

<div id="container" class="brdr">
<div id="inner">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p><p>
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla
feugiat. Cras mauris.
</p><p>
Donec lobortis, odio non ultrices commodo, urna eros ornare lectus, quis faucibus nisi nibh sit amet lectus.
Nam tristique, velit ac ullamcorper adipiscing, ligula justo ullamcorper augue, ut ullamcorper sem nisi sed
dolor. Proin at lectus. Nam sagittis euismod lorem. Vestibulum lobortis viverra sapien. Phasellus euismod,
nulla quis posuere convallis, tellus urna tincidunt augue, at gravida nisl diam non mi. Sed at metus. Mauris
risus augue, viverra non, varius a, ornare sit amet, dolor. Pellentesque sed est vel nulla dictum pretium.
Suspendisse potenti. Quisque rutrum pulvinar magna.
</p>
</div>
</div>

</body>
</html>

coothead