Solved

sliding div layer

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
can i write a webserver using http listener for this? 15 61
Clean URL from GET variables 2 93
selectSingleNode in Access 2013 11 53
Grunt No Clean Targets 6 109
When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

896 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now