• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2484
  • Last Modified:

sliding div layer

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
bobubi
Asked:
bobubi
  • 2
  • 2
1 Solution
 
YZlatCommented:
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
 
YZlatCommented:
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
 
unbeatabulCommented:
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
 
bobubiAuthor Commented:
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
 
bobubiAuthor Commented:
I have figured out how to move the layer down. Thanks all!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now