PLEASE someone help me with this code...

Posted: Sat Sep 13, 2003 3:42 pm (20 years, 7 months ago)

i want to do the following:
when one presses on a certain cell (link), i want that a previously hidden layer slowly comes down from the link (which will contain the details of the link). For example, when pressing on "BAND MEMBERS", i want that slowly a table (actually a layer) comes down below it containg "MARK", "THOMAS", "JACK"...

i used the following recursive function using setTimeout() to time the coming down of the hidden layer, but it's not working Maybe i'm using setTimeout wrong!! CAN SOMEONE HELP ME. OR MAYBE GIVE ME A WHOLE NEW IDEA OF HOW TO DO IT??

...(CurrentLayer is the layer which is hidden before the function is called.)

//global variables;
var i = new number(0);
function ShowLayer(CurrentLayer)
{
L = document.getElementById(CurrentLayer);
L.style.height = i + "px";
L.style.visibility = "visible";
if (i < 100)
{ i += 5;
setTimeout("ShowLayer(CurrentLayer)", 15);
}
}

Posted: Sun Sep 14, 2003 10:47 am (20 years, 7 months ago)

I'm not totally sure, but I don't think you need to add the "px" on the end of the height...

Team Member Joined: 06 Jan 2002 Posts: 2564

Actually, I think you do Razz

Code:

style="height: 15px"

is correct, so why not have the "px" on the end in JS?

However I can't be of any help for the rest of the code - JS is not my thing

Posted: Sun Sep 14, 2003 2:23 pm (20 years, 7 months ago)

lol, whatever, it was just a random idea Razz

Junior WebHelper Joined: 23 Dec 2003 Posts: 4

Try using "clip". "height" will not work properly since browsers interfere with the normal flow of the object's size. Instead, "clip" might give you a whole new idea. Same to you, hratch (if I can call you like that), I was having lots of trouble trying to make something like that. I was programming a hover menu with fading and inserting fx.

Each time the setTimeout loops, have the "clip" possess a different value.

Example:

(not gonna include <TABLE> tags) I have a cell here:

<td onmouseover="drop()">BAND MEMBERS</td>

And here's the cell I want to add the effect to:

<td style="position: absolute; visibility: hidden; clip: rect(auto auto auto auto)">
MARK<br>
THOMAS<br>
JACK<br>
</td>

In the scripting part:

<script language=jscript>
//global variables

var i = 0

function ShowLayer() {
var mouseoverobj = event.srcElement //retrieve the first block

mouseoverobj.nextSibling.style.clip = "rect(auto "+factor+"% auto auto)"

if(i < 100) {

i += 5
setTimeout("ShowLayer()", 5)

} else {

mouseoverobj.nextSibling.style.clip = "rect(auto auto auto auto)"
// in case you want to make sure it is 100% visible and not 97% or something.

factor = 0 // clears the factor for use next time

}
}

</script>

If you want to know how to make a fading menu, tell me.