Solved

sliding div layer

Posted on 2003-11-01
5
2,476 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 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