Solved

sliding div layer

Posted on 2003-11-01
5
2,473 Views
Last Modified: 2008-03-04
Hi.
I have a div layer stacked on top of a table. It's hidden at first. When I click on a link, the div layer will basically slide up and stop in its position. And once click again, the div layer will slide back down.

The table has basically 4 columns and 5 rows. Every cells have an image. The div layer is supposed to be appeared(slide up) somewhere in the centre of the table, when a link is clicked.

Does anyone know how to do it?

Thanks in advance!

Bob
0
Comment
Question by:bobubi
  • 2
  • 2
5 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 9667811
Add this script in the <head> section of your page

<script language="javascript">
var newTop = null
var currTop = null
var direction = null
function slide() {
      //make layer visible
      document.getElementById('layer1').style.visibility='visible';
      currTop = parseInt(document.getElementById('layer1').style.top)
      if (document.all) {
            newTop = document.body.scrollTop
      } else {
            newTop = window.pageYOffset
      }
      direction = (newTop > currTop) ? '+' : '-' ;
      slideNow()
}
function slideNow() {
      if (parseInt(document.getElementById('layer1').style.top) != newTop) {
            document.getElementById('layer1').style.top = eval ("parseInt(document.getElementById('layer1').style.top) " + direction + " 1")
            setTimeout("slideNow()", 30)
      }

}
</script>

Then in your central table cell add this code:

<a href="javascript:slide()">click here</a>

<div id='layer1' style='border:1px black solid; background-color:red; color:white; position:absolute; visibility:hidden; top:0; left:0; padding-left:10px; padding-right:100px;'>

</div>

0
 
LVL 35

Accepted Solution

by:
YZlat earned 50 total points
ID: 9668913
try this

<html>
<head>
<script language="javascript">
var newTop = null
var currTop = null
var direction = null
function slide() {
      //make layer visible
      document.getElementById('layer1').style.visibility='visible';
      currTop = parseInt(document.getElementById('layer1').style.top)

      if (document.all) {
            newTop = document.body.scrollTop
      } else {
            newTop = window.pageYOffset
      }
      direction = (newTop > currTop) ? '+' : '-' ;
      
      slideNow()
}
function slideNow() {

      if (parseInt(document.getElementById('layer1').style.top) != newTop) {
            document.getElementById('layer1').style.top = eval ("parseInt(document.getElementById('layer1').style.top) " + direction + " 1")
            setTimeout("slideNow()", 30)
      }
      
}
</script>

</head>
<body>
<a href="javascript:slide()">click here</a>


<div id='layer1' style='border:1px black solid; background-color:red; color:white; position:absolute; top:280; left:450; padding-left:10px; padding-right:100px;'>
test
</div>

</body>
</html>
0
 

Expert Comment

by:unbeatabul
ID: 9668963
There are plenty of these scripts on http://www.dynamicdrive.com which are availanle for free. Check it out and you may come across the script you want...
0
 

Author Comment

by:bobubi
ID: 9677280
Thanks  unbeatabul, the website is a good source of all effects!

YZlat, the layer moved smoothly up but it didn't allow to move the layer down. Can I also make the layer down. It means that clicking the same link, the layer will first go up, and upon second click on the same link, it will move down.
0
 

Author Comment

by:bobubi
ID: 9677912
I have figured out how to move the layer down. Thanks all!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to count occurrences of each item in an array.

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question