...

View Full Version : Slowing the opening of a div when onclick is activated



swanny
07-09-2006, 08:44 PM
I have a script that when someone clicks on a piece of text it activates the div to appear, there is also a piece of text to close the div. Once the div is activated by the onclick link the extended text appears.

The code is below, the issue I have is that the person I am doing the site for wants the div to open slower, is there a way to do this? I've searched Google etc. but can't find it, maybe i'm not wording it right. Thanks in advance.

Reduced HTML for readability:



<a href="#marker" id="box1_show" onclick="groupDivs.show('box1');">Click for more</a>
<div id="box1" style="display: none;">
Extended text to be displayed
<a href="#marker" onclick="groupDivs.hide('box1');">Close</a>


JavaScript:



function groupShowHide(element_list)
{
var groupShowHideClass =
{
groupList: Array(),
construct: function(element_list)
{
for ( var i=0; i < element_list.length ; i++)
{
this.groupList.push(document.getElementById(element_list[i]));
}
},
show: function(id)
{
for ( var i = 0; i < this.groupList.length ; i++)
{
if ( this.groupList[i].id == id )
{
this.groupList[i].style.display='';
}
else
{
this.groupList[i].style.display='none';
}
}
},
hide: function(id)
{
for ( var i = 0; i < this.groupList.length; i++ )
{
if ( this.groupList[i].id == id )
{
this.groupList[i].style.display='none';
}
}
}
}
groupShowHideClass.construct(element_list);
return groupShowHideClass;
}

vwphillips
07-10-2006, 03:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="zxcSlideH('Test1',10,100,20);zxcSlideH('Test2',10,100,100);">

<input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test1',5);" onmouseout="zxcSlideHDo('Test1',-1);">
<input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test2',1);" onmouseout="zxcSlideHDo('Test2',-1);">
<div style="position:relative;width:160px;height:10px;">
<div id="Test1" style="position:absolute;overflow:hidden;display:none;left:0px;top:0px;width:80px;height:0px;background-color:red;" ></div>
<div id="Test2" style="position:absolute;overflow:hidden;display:none;left:80px;top:0px;width:80px;height:10px;background-color:green;" ></div>
</div>
</script><script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Initialise by a <BODY> or window onload event for each slide element
// e.g.
// <body onload="zxcSlideH('Test1',10,100,20);zxcSlideH('Test2',10,100,100);">
// where
// parameter 0 = the unique ID name of the 'Slide' element. (string)
// parameter 1 = the minimum height. (digits)
// parameter 2 = the maximum height. (digits)
// parameter 3 = the slide speed, 10 = fast, 100 = slow. (digits)


// To Activate
//
// e.g.
// <input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test1',1);" onmouseout="zxcSlideHDo('Test1',-1);">
// where
// parameter 0 = the unique ID name of the 'Slide' element. (string)
// parameter 1 = to slide open = > 0, to slide close = < 0. (digits)



// **** Functional Code - NO NEED to Change



var zxcOOPCnt=0;


function zxcSlideH(zxcid,zxcmin,zxcmax,zxcdly){
var zxcobj=document.getElementById(zxcid);
window['zxcSlide'+zxcid]=new zxcOOPMMHeight(zxcobj,zxcmin,zxcmax,zxcdly);
}

function zxcSlideHDo(zxcid,zxcd){
var zxcobj=window['zxcSlide'+zxcid];
clearTimeout(zxcobj.to);
if (zxcd>0){ zxcobj.obj.style.display=''; }
zxcobj.cngh(zxcd);
}

function zxcOOPMMHeight(zxcobj,zxcmin,zxcmax,zxcdly){
this.obj=zxcobj;
this.ref='zxcmmh'+zxcobj.id;
window[this.ref]=this;
this.h=[zxcmin,zxcmax];
this.dly=zxcdly||20;
this.to=null;
this.d=1;
}

zxcOOPMMHeight.prototype.cngh=function(zxcd){
this.d=zxcd||this.d;
this.hnow=parseInt(this.obj.style.height);
if ((this.d>0&&this.hnow<this.h[1])||(this.d<0&&this.hnow>this.h[0])){
this.obj.style.height=(this.hnow+=this.d)+'px';
this.setTimeOut('cngh();',this.dly);
}
else {
if (this.d<0){ this.obj.style.height=this.h[0]; this.obj.style.display='none'; }
if (this.d>0){ this.obj.style.height=this.h[1]; }
}
}

zxcOOPMMHeight.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}


//-->
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum