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

MAke this code reverse also - retract div

The following code works but I also want to have it close back up the way it opens via a link in the layer? I would also like to have a variable set that could control the speed both ways??
----------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <style type="text/css">
     #slidingLayer{
          width:400px;
          height:1px;
          position:absolute;
          left:150px;
          top:0px;
          overflow:hidden;
          background-color:#666666;
          display:none;
          border:1px solid #000000;
          border-bottom:4px outset #444444;
          padding:5px;
          font-family:garamond;
          line-height:150%;
          color:#FFFFFF;
     }
     #slidingContent{
          position:absolute;

     }
     </style>
     <script type="text/javascript">
     var slidingObj;
     var contentObj;
     var counter = 0;
     var sliderHeight = 150;
     function initSlide(){
          slidingObj = document.getElementById('slidingLayer');
          contentObj = document.getElementById('slidingContent');          
          slidingObj.style.display='block';
          sliderHeight = contentObj.offsetHeight/1 + 10;          
          contentObj.style.top = (slidingObj.style.top.replace('px','') - sliderHeight) + 'px';
         
          startSlide();
     }
     
     function startSlide(){
          var theHeight = slidingObj.style.height.replace('px','');          
          if(theHeight/1<sliderHeight && counter<13000){
               theHeight = theHeight /1 + 3;
               slidingObj.style.height = theHeight + 'px';
               contentObj.style.top = (contentObj.style.top.replace('px','')/1 + 3) + 'px'
               setTimeout('startSlide()',20);    
               counter++;
          }
          if(theHeight/1>=sliderHeight/1){
               slidingObj.style.borderBottom = '1px solid #000000';
          }          
     }          
     window.onload=initSlide
     </script>
</head>
<body>
<h1>This is a test</h1>
<div id="slidingLayer">
<span id="slidingContent">
This is the content of this<br>
Sliding layer<br>
This is the third<br>
and fourth line<br>
Fifth line
</span>
</div>
</body>
</html>
0
894359
Asked:
894359
  • 2
1 Solution
 
BatalfCommented:
Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <style type="text/css">
     #slidingLayer{
          width:400px;
          height:1px;
          position:absolute;
          left:150px;
          top:0px;
          overflow:hidden;
          background-color:#666666;
          display:none;
          border:1px solid #000000;
          border-bottom:4px outset #444444;
          padding:5px;
          font-family:garamond;
          line-height:150%;
          color:#FFFFFF;
     }
     #slidingContent{
          position:absolute;

     }
     </style>
     <script type="text/javascript">
     var slidingObj;
     var contentObj;
     var counter = 0;
     var sliderHeight = 150;
     var speed = 3;
     function initSlide(){
           speed = 3;
          slidingObj = document.getElementById('slidingLayer');
          contentObj = document.getElementById('slidingContent');          
          slidingObj.style.display='block';
          sliderHeight = contentObj.offsetHeight/1 + 10;          
          contentObj.style.top = (slidingObj.style.top.replace('px','') - sliderHeight) + 'px';
         
          startSlide();
     }
     
     function startSlide(){
          var theHeight = slidingObj.style.height.replace('px','');          
          if((speed>0 && theHeight/1<sliderHeight && counter<13000) || (speed<0 && theHeight>0)){
               theHeight = theHeight /1 + speed;
               slidingObj.style.height = theHeight + 'px';
               contentObj.style.top = (contentObj.style.top.replace('px','')/1 + speed) + 'px'
               setTimeout('startSlide()',20);    
               counter++;
          }
          if(theHeight/1>=sliderHeight/1){
               slidingObj.style.borderBottom = '1px solid #000000';
          }    
          if(speed<0 && theHeight<=0){
              slidingObj.style.display='none';
          }    
     }
         
     function hideLayer(){
        speed = -3;
        slidingObj.style.display='block';
        startSlide();        
     }    
     window.onload=initSlide
     </script>
</head>
<body>
<h1>This is a test</h1>
<div id="slidingLayer">
<span id="slidingContent">
This is the content of this<br>
Sliding layer<br>
This is the third<br>
and fourth line<br>
Fifth line
</span>
</div>
<a href="#" onclick="hideLayer();return false">Roll up</a> <br>
<a href="#" onclick="initSlide();return false">Roll down</a> <br>
</body>
</html>
0
 
BatalfCommented:
The same code as above, but with the link formatted and within the layer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <style type="text/css">
     #slidingLayer{
          width:400px;
          height:1px;
          position:absolute;
          left:150px;
          top:0px;
          overflow:hidden;
          background-color:#666666;
          display:none;
          border:1px solid #000000;
          border-bottom:4px outset #444444;
          padding:5px;
          font-family:garamond;
          line-height:150%;
          color:#FFFFFF;
     }
     #slidingLayer a{
         color: orange;
     }
     #slidingContent{
          position:absolute;

     }
     </style>
     <script type="text/javascript">
     var slidingObj;
     var contentObj;
     var counter = 0;
     var sliderHeight = 150;
     var speed = 3;
     function initSlide(){
           speed = 3;
          slidingObj = document.getElementById('slidingLayer');
          contentObj = document.getElementById('slidingContent');          
          slidingObj.style.display='block';
          sliderHeight = contentObj.offsetHeight/1 + 10;          
          contentObj.style.top = (slidingObj.style.top.replace('px','') - sliderHeight) + 'px';
         
          startSlide();
     }
     
     function startSlide(){
          var theHeight = slidingObj.style.height.replace('px','');          
          if((speed>0 && theHeight/1<sliderHeight && counter<13000) || (speed<0 && theHeight>0)){
               theHeight = theHeight /1 + speed;
               slidingObj.style.height = theHeight + 'px';
               contentObj.style.top = (contentObj.style.top.replace('px','')/1 + speed) + 'px'
               setTimeout('startSlide()',20);    
               counter++;
          }
          if(theHeight/1>=sliderHeight/1){
               slidingObj.style.borderBottom = '1px solid #000000';
          }    
          if(speed<0 && theHeight<=0){
              slidingObj.style.display='none';
          }    
     }
         
     function hideLayer(){
        speed = -3;
        slidingObj.style.display='block';
        startSlide();        
     }    
     window.onload=initSlide
     </script>
</head>
<body>
<h1>This is a test</h1>
<div id="slidingLayer">
<span id="slidingContent">
This is the content of this<br>
Sliding layer<br>
This is the third<br>
and fourth line<br>
Fifth line<br>
<a href="#" onclick="hideLayer();return false">Roll up</a> <br>
</span>
</div>

<a href="#" onclick="initSlide();return false">Roll down</a> <br>
</body>
</html>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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