PDA

View Full Version : help resizing div

Skier88
03-18-2009, 12:02 AM
I'm trying to make a menu open, not just appear, with a very simple script upon loading which increments the height of the div with element id "shutter" from 0 to 100. I don't know what's wrong with this code (resulting height is 0):

openMenu.js, at top level:

var h = 0;
function resizeDiv(slider)
{
slider.style.height=h;
h+=2;
if(h<100)
setTimeout("resizeDiv()",1);
}


index.html, also at top level:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Skier88 Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<!meta info removed
<script type="text/javascript" src="/openMenu.js"></script>
</head>

<body onload="resizeDiv(document.getElementById('shutter'))">
<div class="container">

<div id="shutter" style="border:1px solid red"></div>

<div class="btitle"><img src="logo.gif" alt="Skier88.com"/></div>

<div class="directory">
<ul>
<li id="current_area"><a href="/">Home</a></li>
<li>list element 1</li>
<li>list element 2</li>
<li>list element 3</li>
<li>list element 4</li>
</ul>
</div>

<div class="ad">
<!google's standard ad html and script removed
</div>

<! Insert announcements directly below this line. >

<div class="general">
<span class="date">2-20-2009</span>
<!announcement removed
</div>

</div>

</body>
</html>


Thanks for reading.
coothead
03-18-2009, 05:09 AM
Hi there Skier88,

the problem with your code starts on the first iteration of the function resizeDiv(slider).

At this point slider becomes undefined.

This can be overcome with these highlighted additions...


var h = 0;
function resizeDiv(slider){
slider.style.height=h;
h+=2;
slider1=slider;
if(h<100) {
setTimeout("resizeDiv(slider1)",1);
}
}
Skier88
03-18-2009, 11:06 AM
Hi there Skier88,

the problem with your code starts on the first iteration of the function resizeDiv(slider).

At this point slider becomes undefined.

This can be overcome with these highlighted additions...


var h = 0;
function resizeDiv(slider){
slider.style.height=h;
h+=2;
slider1=slider;
if(h<100) {
setTimeout("resizeDiv(slider1)",1);
}
}



Thanks for the help. I put in your code, but it still doesn't work. I tried setting slider.innerHTML, and that does not work either - however, alert(h) does work, displaying dialog boxes up to the height limit. Additionally, changing the initial value of h has no effect on the page load - this makes me think that slider is undefined at the initial call to openMenu(slider). My code for the initial call is this:

<body onload="resizeDiv(document.getElementById('shutter'))">

Is there any reason for this to return null?
coothead
03-18-2009, 12:00 PM
Hi there Skier88,
I put in your code, but it still doesn't work.
I am sorry about that. :o
When I tested the code, I just used your javascript and the basic html...

<body onload="resizeDiv(document.getElementById('shutter'))">
<div id="shutter" style="border:1px solid red"></div>

...and it worked OK. ;)
But with the addition of a full DOCTYPE, of course, it does not. :disagree:
The reason being that units must now be specified for the javascript to work.
So the correct javascript now becomes...

var h = 0;
function resizeDiv(slider){
slider.style.height=h+'px';
h+=2;
slider1=slider;
if(h<100) {
setTimeout("resizeDiv(slider1)",1);
}
}

I apologize testing the solution in an improper manner. :agree:
Skier88
03-18-2009, 12:17 PM
Thank you, it works great! There's no need to apologize - you've been a ton of help.

I do have one more question though. I tried changing what it does slightly, and it doesn't work. I changed height to margin-top, the initial value to -100, and the test to if(h<0). How can I fix this? Thanks again.
coothead
03-18-2009, 12:32 PM
Hi there Skier88,

thanks for the thumbs-up. :thumbup:

But just to make sure that it does not happen again I flagellated myself severely for half an hour. :tsk:
Skier88
03-18-2009, 01:31 PM
Hi there Skier88,

thanks for the thumbs-up. :thumbup:

But just to make sure that it does not happen again I flagellated myself severely for half an hour. :tsk:

:lol: :eek:
coothead
03-18-2009, 01:48 PM
Hi there Skier88,

I've just seen you edited post.
You need to use marginTop not margin-top in javascript....

var h=-100;
function resizeDiv(slider){
slider.style.marginTop=h+'px';
h+=2;
slider1=slider;
if(h<0){
setTimeout("resizeDiv(slider1)",1);
}
}
Skier88
03-18-2009, 05:15 PM
ok, thanks. I should have realized that it would treat a dash as a minus sign.
coothead
03-18-2009, 05:27 PM
No problem, you're welcome. :agree:
fast1
03-31-2009, 01:05 AM
the sliding bar cannot scrolling it stuck why is it happened guys to my code. I grab in Skier88. Something missing or miss interpreting my code?


http://photosnag.com/img/3322/n09x0302vnsn/clear.gif
coothead
03-31-2009, 01:45 AM
Hi there fast1,

if you have code that is not working, either give us a link to the site
or the full code code, so that the problem may be assessed. :agree: