PDA

View Full Version : Sliding divs don't work right

Assenheimer
03-02-2004, 04:06 PM
Why is JavaScript so elusive?

Here is some code for presenting content. A user clicks a link, and the bottom half of the image splits away from the top half and slides down to reveal a table wherein the entire text of the link is contained.

It is buggy as is. It takes two clicks to make it start scrolling. The first click just makes a flicker.


<style>
a.a
{position: absolute;
top: 10px;
left: 700px;
}
a.b
{position: absolute;
top: 30px;
left: 700px;
}
img.y
{position: absolute;
top: 0px;
left: 0px;
}
table
{position: absolute;
top: 199px;
left: 0px;
}
div.a
{position: absolute;
top: 199px;
left: 0px;
width: 627px;
height: 300px;
background-color:#FFFFFF;
visibility:visible;
z-index: 1;
}
</style>
</head>
<body>
<script>
<!--
var ypos=214;
var Id=0;
function startmove(){
if(!Id){
movemenu();
ypos=214;
}
}
function movemenu(){
ypos+=3;
if(document.layers){
document.menu.top=ypos;
}
if(document.all){
document.all.menu.style.top=ypos;
}
if(!document.all && document.getElementById){
document.getElementById("menu").style.top=ypos+"px";
}
var control = document.getElementById("innerTable");
if (ypos>=control.offsetTop + control.offsetHeight)
{
window.clearTimeout(Id);Id=0;
}else{
Id = window.setTimeout("movemenu();",10);
}
}
// -->
</script>
<div class="a" id="menu"><img src="botslice.gif"></div>
<a class="a" href="#" onClick="startmove();">Go1</a>
<a class="b" href="#" onClick="closeup();">Back</a>
<img class="y" cellpadding=0 cellspacing=0 src="topslice.gif">
</tr>
</table>
<table cellpadding=4 cellspacing=0 border=1 bordercolor="#000000" id="innerTable">
<tr>
<td width=615>all text goes here
</td>
</tr>
</table>
</body>
</html>


Now, I also need to add something to make it close up again, and I automatically assume it's an entire new function, but I'm sure this is extraneous.

If anyone has any more economical ideas, could you explain how they work?

Thanks.
Garadon
03-03-2004, 02:08 PM
<html>
<head>
<script>

<!--

var Id=null;
var control = "";
function startmove(aDir)
{
if(control==""){control = document.getElementById("innerTable");}
if(Id!=null){window.clearTimeout(Id);}
movemenu(aDir);
}

function movemenu(aDir)
{
var ypos=document.getElementById("menu").offsetTop+aDir*3;

if ((ypos>=control.offsetTop + control.offsetHeight&&aDir>0)||(ypos<=control.offsetTop&&aDir<0))
{
if(ypos>=control.offsetTop + control.offsetHeight){ypos=control.offsetTop + control.offsetHeight}
if(ypos<=control.offsetTop){ypos=control.offsetTop;}
document.getElementById("menu").style.top=ypos+'px';
window.clearTimeout(Id);
Id=null;
}
else
{ document.getElementById("menu").style.top=ypos+'px';
Id = window.setTimeout("movemenu("+aDir+");",10);
}
}
// -->

</script>
<style>
a.a{
position: absolute;
top: 10px;
left: 700px;
}

a.b{
position: absolute;
top: 30px;
left: 700px;
}

img.y{
position: absolute;
top: 0px;
left: 0px;
}

table{
position: absolute;
top: 199px;
left: 0px;
}

div.a{
position: absolute;
top: 199px;
left: 0px;
width: 627px;
height: 300px;
background-color:#FFFFFF;
visibility:visible;
z-index: 1;
}
</style>


</head>
<body>


<div class="a" id="menu"><img src="botslice.gif"></div>

<a class="a" href="#" onClick="startmove(1);">Go1</a>

<a class="b" href="#" onClick="startmove(-1);">Back</a>

<img class="y" cellpadding=0 cellspacing=0 src="topslice.gif">

<table cellpadding=4 cellspacing=0 border=1 bordercolor="#000000" id="innerTable">
<tr>
<td width=615>all text goes here
</td>
</tr>
</table>
</body>
</html>