Remotehireman Forum — HTML, CSS & JavaScript

Smooth box move question

User control panel - Subscribed threads - Posted threads

Reply to Thread

Smooth box move question

Starting message

2007-03-30 15:56:46

Join date:2006-12-12 02:37:22
Posts: 27

linkstraffic
Novice

I have been asked whether I could modify the coding of this script:
http://www.linkstraffic.net/programming/javascript/movediv.php

to cause the box to slide up instead of being revealed down.

here is what I come up with using only relative position:

<html>
<head>
<style type="text/css">
#box{width:200px;height:0.1em;background-color:pink;overflow:hidden}
#inbox{background-color:white;width:200px;height:120px}
</style>
<script type="text/javascript">
hh=120;
hhh=0;
function show()
{
if(hh==2)
{
clearInterval(inter);
return;
}

obj = document.getElementById("inbox"

;
obj1 = document.getElementById("box"

;
hhh+=2
hh-=2;
obj.style.height = hh + 'px';
obj1.style.height = hhh + 'px';

}
</script>
</head>
<body>

<div id="box">
<div id="inbox"></div>
Some text here!<br />
more text<br/>
more text<br />
<p>
still more text</p>
</div>

<a href="#" onclick="setInterval('show()',3);return false;">Click here to show the box</a>
</body>
</html>

Well I'm pretty sure we can enhance it;
does anyone else has any ideas?

we shall also try using absolute position.

Cheers.

0110000101001

0 %

2007-03-30 16:43:13

Join date:2007-03-30 16:30:51
Posts: 2

Illys
Novice

The smooth drop animation itself.. I think I'm going to use that in my sidebar. If you want to see my design in process, it's here: http://illys.arcticfuzz.dk/designr again upon a timer after mouseout.. those two are easy enough.
I created a 200px div above the animated divs to see exactly what the motion of the current code it, and it appears both the hiding div and concealed div slide at this point. Ideally, I'd like only the concealed div to move, leaving the text below the box static (without moving).
Here's a quick graphic of the idea: http://illys.arcticfuzz.dk/design/motion.pngv and concealed div slide at this point. Ideally, I'd like only the concealed div to move, leaving the text below the box static (without moving).
Here's a quick graphic of the idea: http://illys.arcticfuzz.dk/design/motion.png

The smooth drop animation itself.. I think I'm going to use that in my sidebar. If you want to see my design in process, it's here: http://illys.arcticfuzz.dk/design - it's a work in progress, and I'm just a designer at home currently. Positive critique welcome!

Again, many thanks for your aide, Links!

0 %

2007-03-30 16:45:47

Join date:2007-03-30 16:30:51
Posts: 2

Illys
Novice

Guuhh.. >.<
Correction: Current smooth-slide code demo here:
http://illys.arcticfuzz.dk/design/test.html

Thread starter

2007-04-02 04:24:35

Join date:2006-12-12 02:37:22
Posts: 27

linkstraffic
Novice

Hi Illys; I'm glad to know this code can be usefull

I think you should use absolute position in order to have your box moving as you wish. The point is to know where is the exact position of the box,
I'll take a look this week when I have few minutes.

About your desing, I can not say much things as I guess it's only the beginning.

See Ya.

0110000101001

Reply to Thread

Reply to Thread

Smooth box move question

You have to sign in to post messages to the forum.