Making slideup/down close [Archive]

View Full Version : 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:confused:

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

<!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.

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??

vwphillips

03-29-2011, 11:31 AM

ypu have not posted the full HTML

post the full HTML so I can see the problem

colourmind

03-30-2011, 10:48 PM

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TIMELINE OF WESTERN ART HISTORY</title>
<link href="css/tl_page.css" rel="stylesheet" type="text/css" />
<link href="css/timeline.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="updown.js"></script>
<link href="css/content.css" rel="stylesheet" type="text/css" />
</head>

<body class="tl_page">
<div id="container">
<div id="header">Content for id "header" Goes Here</div>

<div id="tl_ctnr">
<div id="timeline">

<div class="linking" id="eg">
<a href="javascript:;" onmouseup="slidedown('egypt');">ANCIENT EGYPT 3 000 - 30 BC</a></div>

<div class="linking" id="ae">
<a href="javascript:;" onmouseup="slidedown('aegean');">AEGEAN 3 000 - 1100 BC</a></div>

<div class="linking" id="gk">
<a href="javascript:;" onmouseup="slidedown('greek');">ANCIENT GREECE 900 - 30 BC</a></div>

</div>
</div>

<div id="content_ctnr">

<div id="egypt" style="display:none;width:800px;height:475px;background-Color:#630;padding:10px">
<div id="header"><div id="topic">Ancient Egypt</div><div id="close"><a href="javascript:;" onmouseup="slideup('egypt');">X</a></div></div>
<div id="dtl_tl"><img src="images/eg/eg_dtltl.gif" width="800" height="119" alt="Detailed Timeline Egypt" /></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/eg/map_eg.gif" width="260" height="260" alt="Egypt Map" /></div>
<div class="border" id="text">
text
</div>
<br class="clearfloat" /></div>

<div id="aegean" style="display:none;width:780px;height:475px;background-Color:#066;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">
text
</div>
</div>

<div id="greek" style="display:none;width:780px;height:475px;background-Color:#360;padding:10px">
<div id="topic">Ancient Greece</div>
<div id="close"><input type="button" name="" value="X" onmouseup="slideup('greek')"/></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 Ancient Greek 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_gk.gif" alt="Greek map" width="250" height="250" class="border" /></div>
<div class="border" id="text">
text
</div>
</div>

</div>

<br class="clearfloat" /></div>
</body>
</html>

vwphillips

03-31-2011, 06:44 AM

the divs need to have overflow:hidden

<div id="greek" style="display:none;overflow:hidden;width:780px;height:475px;background-Color:#360;padding:10px">