Making slideup/down close

**colourmind** · 03-16-2011, 02:02 AM

Hello. I'm a newbie at js, but have found a brilliant way to make my divs slide up and down.

My problem is that a div is down, the next one slides over it, and pushes it down, and on and on.

All I want is to make the slide down feature check first if anything is open, and then close it before it opens another one.

It seems simple but I can't find it anywhere (or maybe its everywhere and I just don't know what I'm looking at).

Please help

**vwphillips** · 03-16-2011, 04:18 PM

please post your code

**colourmind** · 03-16-2011, 10:01 PM

Ok, here is the js code:

// JavaScript Document
var timerlen = 5;
var slideAniLen = 1000;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
if(moving[objname])
return;

if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible

moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}

function slideup(objname){
if(moving[objname])
return;

if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden

moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}

function startslide(objname){
obj[objname] = document.getElementById(objname);

endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();

if(dir[objname] == "down"){
obj[objname].style.height = "1px";
}

obj[objname].style.display = "block";

timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];

if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;

obj[objname].style.height = d + "px";
}

return;
}

function endSlide(objname){
clearInterval(timerID[objname]);

if(dir[objname] == "up")
obj[objname].style.display = "none";

obj[objname].style.height = endHeight[objname] + "px";

delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);

return;
}

It works very well, however I need something that will stop new slides from opening up when another is already open. Either something to block it or something to close it automatically.

**vwphillips** · 03-17-2011, 03:02 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

// JavaScript Document
var timerlen = 5;
var slideAniLen = 1000;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
var objs=[];
var objsary=[];

function slidedown(objname){
 var obj=document.getElementById(objname);
 if (!objsary[objname]){
  objsary[objname]=obj;
  objs.push(obj);
 }
 if(moving[objname]){
  return;
 }
 if(obj.style.display != "none"){
  return; // cannot slide down something that is already visible
 }
 for (var z0=0;z0<objs.length;z0++){
  if (objs[z0]!=obj&&objs[z0].style.display=='block'){
   return;
  }
 }
 moving[objname] = true;
 dir[objname] = "down";
 startslide(objname);
}

function slideup(objname){
 var obj=document.getElementById(objname);
//document.Show.Show1.value=obj['d1'];
 if(moving[objname]){
  return;
 }
 if(obj.style.display == "none"){
  return; // cannot slide up something that is already hidden
 }
 moving[objname] = true;
 dir[objname] = "up";
 startslide(objname);
}

function startslide(objname){
 obj[objname] = document.getElementById(objname);
 endHeight[objname] = parseInt(obj[objname].style.height);
 startTime[objname] = (new Date()).getTime();
 if(dir[objname] == "down"){
  obj[objname].style.height = "1px";
 }
 obj[objname].style.display = "block";
 timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
 var elapsed = (new Date()).getTime() - startTime[objname];
 if (elapsed > slideAniLen){
  endSlide(objname);
 }
 else {
  var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
  if(dir[objname] == "up"){
   d = endHeight[objname] - d;
  }
  obj[objname].style.height = d + "px";
 }
 return;
}

function endSlide(objname){
 clearInterval(timerID[objname]);

 if(dir[objname] == "up"){
  obj[objname].style.display = "none";
 }
 obj[objname].style.height = endHeight[objname] + "px";
 delete(moving[objname]);
 delete(timerID[objname]);
 delete(startTime[objname]);
 delete(endHeight[objname]);
 delete(obj[objname]);
 delete(dir[objname]);

 return;
}

/*]]>*/
</script>
</head>

<body>

<input type="button" name="" value="Test d1 down" onmouseup="slidedown('d1')"/>
<input type="button" name="" value="Test d1 up" onmouseup="slideup('d1')"/>
<input type="button" name="" value="Test d2 down" onmouseup="slidedown('d2')"/>
<input type="button" name="" value="Test d2 up" onmouseup="slideup('d2')"/>
<div id="d1" style="display:none;width:100px;height:100px;background-Color:red;"></div>
<div id="d2" style="display:none;width:100px;height:100px;background-Color:#FF9966;"></div>
</body>

</html>

**PoolGuyNY** · 03-19-2011, 08:33 AM

Hi there, new member here..
From the sounds of it, I'm looking for the exact same thing or something very similar. I tried to apply the code vwphillips posted, with no luck. Please help me out, I need ot be able to close each info div so that it doesnt overlap or extend off-screen.
Any help appreciated, thanks.

Code:

var timerlen =100;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(did){
        
        if(moving[did])
                return;

        if(document.getElementById(did).style.display != "none")
                return; // cannot slide down something that is already visible
        moving[did] = true;
        dir[did] = "down";
        startslide(did);
        
}

function slideup(did){
        if(moving[did])
                return;

        if(document.getElementById(did).style.display == "none")
                return; // cannot slide up something that is already hidden

        moving[did] = true;
        dir[did] = "up";
        startslide(did);
}

function startslide(did){
              
        obj[did] = document.getElementById(did);
        endHeight[did] = parseInt(obj[did].style.height);
        startTime[did] = (new Date()).getTime();

        if(dir[did] == "down"){
               obj[did].style.height = "1px";
        }
        obj[did].style.display = "block";
        timerID[did] = setInterval('slidetick(\'' + did + '\');',timerlen);
  }

function slidetick(did){
        var elapsed = (new Date()).getTime() - startTime[did];
                
        if (elapsed > slideAniLen)
                endSlide(did)
        else {
                var d =Math.round(elapsed / slideAniLen * endHeight[did]);
                if(dir[did] == "up")
                        d = endHeight[did] - d;
                    
                obj[did].style.height = d + "px";
        }

        return;
}

function endSlide(did){
        clearInterval(timerID[did]);

        if(dir[did] == "up")
                obj[did].style.display = "none";
                

        obj[did].style.height = endHeight[did] + "px";

        delete(moving[did]);
        delete(timerID[did]);
        delete(startTime[did]);
        delete(endHeight[did]);
        delete(obj[did]);
        delete(dir[did]);

        return;
}


function toggleSlide(did,iid)
{
	if(document.getElementById(did).style.display == "none")
        {
		// div is hidden, so let's slide down
		slidedown(did);
                document.getElementById(iid).setAttribute('src','hexpander/remove.png');
               
	}
        else
         {
		// div is not hidden, so slide up
		slideup(did);
                document.getElementById(iid).setAttribute('src','hexpander/insert.png');
	}
}

**colourmind** · 03-22-2011, 02:55 AM

I think this will do the trick.

Thanks, vwphillips, I love you too!

**PoolGuyNY** · 03-25-2011, 01:08 AM

bummp
Any chance someone can help me out with my similar problem? (code posted above)
Thanks

**vwphillips** · 03-25-2011, 12:04 PM

PoolGuyNY

but you are not using the code I posted so it will not close the last opend element

**colourmind** · 03-29-2011, 01:10 AM

Although this is now working well, there is another more minor problem. The parent div containing all the content slides very nicely, however the divs contained inside that just 'appear' - and the slide effect is sort of lost in the process. Here is the way I have set up the content:

<div id="aegean" style="display:none;width:780px;height:475px;background-Color:#406468;padding:10px">
<div id="topic">Aegean</div>
<div id="close"><input type="button" name="" value="X" onmouseup="slideup('aegean')"/></div>
<div class="border" id="dtl_tl"><img src="images/eg/eg_dtltl.gif" width="780" height="100" /></div>
<div id="go_to">Go to a detailed timeline of the Aegean era</div>
<div id="menu">
<table width="520" cellspacing="2" cellpadding="0">
<tr>
<td height="45"><img src="images/eg/sp_4.gif" width="127" height="45" class="border menu" /></td>
<td><img src="images/eg/sp_1.gif" width="127" height="45" class="border menu" /></td>
<td><img src="images/eg/sp_2.gif" width="127" height="45" class="border menu" /></td>
<td><img src="images/eg/sp_3.gif" width="127" height="45" class="border menu" /></td>
</tr>
<tr>
<td class="menu">OVERVIEW</td>
<td class="menu">SLIDESHOW<span class="menu"></span></td>
<td class="menu">GLOSSARY</td>
<td class="menu">BIBLIOGRAPHY</td>
</tr>
</table>
</div>
<div id="map"><img src="images/map_ae.gif" alt="Aegean map" width="250" height="250" class="border" /></div>
<div class="border" id="text">
<p><strong>KEY IDEAS:</strong><br />
<strong>RELIGION:</strong> All three Aegean civilizations developed religions which revered the natural world. This is heavily represented in their art, with plants and animals appearing in all periods. They also worshipped female goddesses such as the Snake Goddess, and goddesses associated with the household or sacred places. Burial practices included offerings of votives with the deceased.<br />
<strong>ECONOMY:</strong> The Aegean is an area comprising islands in and land around the Aegean Sea. This allowed a seafaring people to develop a wealthy economy dependent on trade.<br />
<em>"So clan after clan poured out from the ships and huts onto the plain of Scamander and found their places in the flower meadows by the river. Innumerable as the leaves and blossoms in their season, the Locrians, the Athenians, troops from the great stronghold of Mycenae, from wealthy Corinth, from Pylos, from Knossos on Crete, and the other troops that had their homes in Crete of the Hundred Towns"</em>
Homer, the Illiad, circa 1190BC.<br />
Until about 1870 historians discounted Homer as a historian. That they had done less than justice to the truth of Homer's account was proved by a German amateur archeologist, Heinrich Schliemann (de la Croix, Tansey 1926).
</div>
</div>

Is there a way to make all the content appear in the slide formation as well??