Solved

sliding div layer

Posted on 2003-11-01
5
2,471 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

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…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

810 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