/    Sign up×
Community /Pin to ProfileBookmark

Div Horizontal Slide

Copy linkTweet thisAlerts:
Aug 09.2010

hey, im new here – i’ve just joined after finding the site via a google search.

Im creating a website on Dreamweaver CS5, but im having a problem which im hoping someone here can guide me though. I can create a div box which slides up and down, by using the behaviours tag in dreamweaver, however, I want it to go left and right.

Theres an example of what i want on this site, on the left theres a div box which slides left and right and changed from show to hide : [url]http://www.peterandre.com/News/[/url] i want a slide box exactly like the one on that site.

Im new to dreamweaver and dont know to much about itI need some detailed step by step instructions, could someone please help me? I’d appreciate it alot.

Many Thanks

Az

to post a comment
JavaScript

19 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsAug 10.2010 — [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>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:fixed;overflow:hidden;z-Index:101;left:0px;top:200px;width:100%;height:50px;
}

#tst {
position:absolute;left:200px;top:0px;width:100px;height:50px;background-Color:#FFCC66;
}

.tab {
position:absolute;left:-30px;top:0px;width:30px;height:50px;background-Color:#FF0000;
}
/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body >
<div class="parent" >
<div id="tst" >
<div class="tab" ></div>
</div>
</div>

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

function SlideMenu(o){
this.menu=document.getElementById(o.ID);
this.p=this.menu.parentNode;
this.slide=new zxcAnimate('left',this.menu);
this.resize();
this.addevt(window,'resize','resize');
this.addevt(this.menu.getElementsByTagName('DIV')[0],'mouseup','toggle');
this.width=this.menu.offsetWidth;
this.ms=o.Duration||1000;
this.ud=true;
}

SlideMenu.prototype={

toggle:function(){
this.slide.animate(this.slide.data[0],this.p.offsetWidth-(this.ud?this.width:0),this.ms,[0,this.width]);
this.ud=!this.ud;
},

resize:function(){
var lft=this.p.offsetWidth;
this.menu.style.left=lft+'px';
this.slide.data[0]=lft;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}


}


var s=new SlideMenu({
ID:'tst',
Duration:500
});
/*]]>*/
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@Az-18authorAug 10.2010 — Thank you so so much!

How do i add it to my dreamweaver, where do i insert it?

the box i want to move on mine is called 'slideout' and the tab is called 'apDiv20' if that helps.

I dont know where to insert the code you kindly gave me.
Copy linkTweet thisAlerts:
@Az-18authorAug 10.2010 — Ignore my last post, sorry sorted it. Thanks ALOT!

All i need to do now it get it so the tab changes when its slided in. How do i achieve that?
Copy linkTweet thisAlerts:
@vwphillipsAug 10.2010 — [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>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:fixed;overflow:hidden;z-Index:101;left:0px;top:200px;width:100%;height:50px;
}

#tst {
position:absolute;left:200px;top:0px;width:100px;height:50px;background-Color:#FFCC66;
}

.tab {
position:absolute;left:-30px;top:0px;width:30px;height:50px;background-Color:#FF0000;
}

.tabout {
background-Color:#3333FF;
}
/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body >
<div class="parent" >
<div id="tst" >
<div class="tab" ></div>
</div>
</div>

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

function SlideMenu(o){
this.menu=document.getElementById(o.ID);
this.p=this.menu.parentNode;
this.slide=new zxcAnimate('left',this.menu);
this.resize();
this.addevt(window,'resize','resize');
this.tab=this.menu.getElementsByTagName('DIV')[0]
this.addevt(this.tab,'mouseup','toggle');
this.width=this.menu.offsetWidth;
this.ms=o.Duration||1000;
this.tcls=o.TabOutClass||'';
this.tcls=[this.tab.className,this.tab.className+' '+this.tcls];
this.ud=true;
}

SlideMenu.prototype={

toggle:function(){
this.slide.animate(this.slide.data[0],this.p.offsetWidth-(this.ud?this.width:0),this.ms,[0,this.width]);
this.tab.className=this.tcls[this.ud?1:0];
this.ud=!this.ud;
},

resize:function(){
var lft=this.p.offsetWidth;
this.menu.style.left=lft+'px';
this.slide.data[0]=lft;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}


}


var s=new SlideMenu({
ID:'tst',
Duration:500,
TabOutClass:'tabout'
});
/*]]>*/
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@Az-18authorAug 10.2010 — Thanks so much! I've been trying to do it for days.
Copy linkTweet thisAlerts:
@Az-18authorAug 14.2010 — What do i have to change so that its slided out as default when the page is opened?

thanks
Copy linkTweet thisAlerts:
@vwphillipsAug 15.2010 — [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>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:fixed;overflow:hidden;z-Index:101;left:0px;top:200px;width:100%;height:50px;
}

#tst {
position:absolute;left:200px;top:0px;width:100px;height:50px;background-Color:#FFCC66;
}

.tab {
position:absolute;left:-30px;top:0px;width:30px;height:50px;background-Color:#FF0000;
}

.tabout {
background-Color:#3333FF;
}
/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body >
<div class="parent" >
<div id="tst" >
<div class="tab" ></div>
</div>
</div>

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

function SlideMenu(o){
this.menu=document.getElementById(o.ID);
this.p=this.menu.parentNode;
this.slide=new zxcAnimate('left',this.menu);
this.resize();
this.addevt(window,'resize','resize');
this.tab=this.menu.getElementsByTagName('DIV')[0]
this.addevt(this.tab,'mouseup','toggle');
this.width=this.menu.offsetWidth;
this.ms=o.Duration||1000;
this.tcls=o.TabOutClass||'';
this.tcls=[this.tab.className,this.tab.className+' '+this.tcls];
this.ud=true;
}

SlideMenu.prototype={

toggle:function(){
this.slide.animate(this.slide.data[0],this.p.offsetWidth-(this.ud?this.width:0),this.ms,[0,this.width]);
this.tab.className=this.tcls[this.ud?1:0];
this.ud=!this.ud;
},

resize:function(){
var lft=this.p.offsetWidth;
this.menu.style.left=lft+'px';
this.slide.data[0]=lft;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}


}


var s=new SlideMenu({
ID:'tst',
Duration:500,
TabOutClass:'tabout'
});

[COLOR="Red"]s.toggle();[/COLOR]

/*]]>*/
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@vwphillipsAug 15.2010 — including changes to the CSS

[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>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:fixed;overflow:hidden;z-Index:101;visibility:hidden;left:0px;top:200px;width:100%;height:50px;
}

#tst {
position:absolute;visibility:visible;left:200px;top:0px;width:100px;height:50px;background-Color:#FFCC66;
}

.tab {
position:absolute;left:-30px;top:0px;width:30px;height:50px;background-Color:#FF0000;
}

.tabout {
background-Color:#3333FF;
}
/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body >
<div class="parent" >
<div id="tst" >
<div class="tab" ></div>
</div>
</div>

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

function SlideMenu(o){
this.menu=document.getElementById(o.ID);
this.p=this.menu.parentNode;
this.slide=new zxcAnimate('left',this.menu);
this.resize();
this.addevt(window,'resize','resize');
this.tab=this.menu.getElementsByTagName('DIV')[0]
this.addevt(this.tab,'mouseup','toggle');
this.width=this.menu.offsetWidth;
this.ms=o.Duration||1000;
this.tcls=o.TabOutClass||'';
this.tcls=[this.tab.className,this.tab.className+' '+this.tcls];
this.ud=true;
}

SlideMenu.prototype={

toggle:function(){
this.slide.animate(this.slide.data[0],this.p.offsetWidth-(this.ud?this.width:0),this.ms,[0,this.width]);
this.tab.className=this.tcls[this.ud?1:0];
this.ud=!this.ud;
},

resize:function(){
var lft=this.p.offsetWidth;
this.menu.style.left=lft+'px';
this.slide.data[0]=lft;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}


}


var s=new SlideMenu({
ID:'tst',
Duration:500,
TabOutClass:'tabout'
});

s.toggle();

/*]]>*/
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@Az-18authorAug 15.2010 — Perfect- Thanks again.
Copy linkTweet thisAlerts:
@Az-18authorOct 16.2010 — This works fine but the only problem is sometimes when i click on a page with it on its not there and i have to refresh it for it to appear. How do i fix this?
Copy linkTweet thisAlerts:
@vwphillipsOct 17.2010 — post a link to the problem page
Copy linkTweet thisAlerts:
@vwphillipsOct 18.2010 — I viewed your page in IE and FF and thr script works as intended
Copy linkTweet thisAlerts:
@Az-18authorOct 19.2010 — Ok thanks. The only other problem with it is that on my home page i have a slide out contact tab www.nevecentral.com when opened in IE the tab sticks out further than it should. On FF its fine though. How do i fix it?

Also my website is running abit slow, how can i speed it up?
Copy linkTweet thisAlerts:
@Az-18authorOct 25.2010 — Any help?
Copy linkTweet thisAlerts:
@Win116Aug 23.2012 — HI !

I am also new And I also find this forum after google search

And I find you amazing the help you give to this poor litle man... today he does not even use his website... ?

And I also use dreamweaver CS5 and pretty good at HTML but pretty noob at Javascrip

what I would like to do his a vertical sliding <div> like we see on many games site I think...

I made a draft of what my page should look like: http://thegamingskwad.com/files/sdas.png

if you know what I mean... vertical slifing by pressing arrow or something...

I tested your code and work perfectly well execpte that is not what i want

sorry for my english I do my best... I am french

http://thegamingskwad.com


THANK you so much ! ?
Copy linkTweet thisAlerts:
@Az-18authorAug 23.2012 — the help you give to this poor litle man... today he does not even use his website... ?[/QUOTE]

Excuse me?!

You know nothing about my website, you've not even seen it so mind your own business instead of throwing critisms. Dickhead.
Copy linkTweet thisAlerts:
@Win116Aug 23.2012 — this is not the place that i want to post my message... omg
Copy linkTweet thisAlerts:
@auntniniAug 24.2012 — While Vic Phillips worked his expert magic, I was fussing with Dreamweaver. Figured you had used Window>Behaviors>Effects>Slide -- which required adding big Spry JavaScript file. What I came up with as an alternative was Dreamweaver CS6 version's CSS Transitions panel. Search for FREE tutorials and see, for instance, http://tv.adobe.com/watch/digital-design-cs6/creating-css-transitions-in-dreamweaver-cs6/

Dreamweaver wrote this code so <div> would slide left on hover
<i>
</i>#apDiv1 {
position: absolute;
left: 302px;
top: -217px;
width: 209px;
height: 214px;
z-index: 1;
background: #3FF;
-webkit-transition: all 2s ease-in-out .5s;
-moz-transition: all 2s ease-in-out .5s;
-ms-transition: all 2s ease-in-out .5s;
-o-transition: all 2s ease-in-out .5s;
transition: all 2s ease-in-out .5s;
}
#apDiv1:hover {
left: auto;
}
×

Success!

Help @Az-18 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...