PDA

View Full Version : Slide Left From Right - Scriptaculous



thekevin07
Sep 19th, 2007, 01:38 PM
HI

Scriptaculous has the Effect.SlideDown is there something similar for moving from the right to left. So instead of sliding down it will slide left. Any ideas how to do that?


Thanks

felgall
Sep 19th, 2007, 10:08 PM
Top of a web page is zero so any negative value is off the page.

Left of a web page also zero so any negative value is off the page.

Right and bottom of a web page are infinite so any positive value is on the page.

There is no value that will take an object off of the right or bottom of a web page.

Nick_Burnes
Sep 20th, 2007, 12:37 AM
Thats not even close to what he asked.

bazz
Sep 20th, 2007, 12:46 AM
if I understand your question; you want the lightbox to widen, rather than lengthen. In the version I use, it does both, depending on the image dimensions and of course, it lengthens firstly, before then widening.

I don't know the workings of the code particularly well but if I wanted it to widen firstly, I would swap the two relevant parts of the code around. But I should think that it will have to move in both ways anyway, to accommodate images of differing proportions.

Maybe I misunderstood your question?

bazz

Nick_Burnes
Sep 20th, 2007, 04:27 AM
I dont believe he is talking about lightbox models.

I use mootools for horizontal slides.

http://demos.mootools.net/Fx.Slide

thekevin07
Sep 20th, 2007, 05:05 AM
Fx.Slide is close to what i need but in the opposite direction i need it to slide in from the right

vwphillips
Sep 20th, 2007, 12:59 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>
<style type="text/css">
/*<![CDATA[*/
.menu {
position:relative;width:100px;height:20px;background-Color:#66CC99;text-Align:center;border:solid black 1px;
}
.itemoff {
position:relative;width:100px;height:20px;background-Color:#66CC99;text-Align:center;border-Left:solid black 1px;
}

.action {
position:relative;width:20px;height:20px;background-Color:#CCFFCC;text-Align:center;border-Left:solid black 1px;

}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Concertina (31-August-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To Expand or Contract DIV elements within a parent DIV.
// Displays and Menus would be a typical applications.

// **** Application Notes ****

// **** The HTML Code
// example:
// <div id="tst1" class="menu" onmouseover="zxcConcertina(event,'tst1',1);" onmouseout="zxcConcertina(event,'tst1',-1);">
// <div class="itemoff" >Item 0</div>
// <div class="itemoff" style="width:100px;background-Color:#3399FF;" >Item 1</div>
// <div class="itemoff" >Item 2</div>
// <div class="itemoff" >Item 3</div>
// </div>

// **** Initialisation
// Normally initialised from a <BODY> or window onload event
// but may be initialised from any event to function 'zxcConcertina'.

// **** Execution
// Normally executed from the menu mouseover and mouseout event calls to function 'zxcConcertina'.


// **** Function 'zxcConcertina'
// zxcConcertina(event,'tst1',1,2,600);
// where:
// parameter 0 = event
// parameter 1 = the menu ID name. (string)
// parameter 2 = greater than 1 = expand, less than 1 = contract. The value specifies the speed (digits)
// Parameters 3 and 4 are optional and are only required for the first call.
// parameter 3 = the menu topic element(from 1 to n) to hold the width. (digits)
// parameter 4 = to expand/contract to the left of a fixed position. (digits)
// Note paramenter 4 may need modification on a window resize event call with parameter 3 = 0.


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

function zxcConcertina(zxcevt,zxcp,zxcud,zxchold,zxcfix){
if (typeof(zxcp)=='string') zxcp=document.getElementById(zxcp);
if (!zxcp.oop) zxcp.oop=new zxcConcertinaOOP(zxcp,zxchold,zxcfix);
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (zxcevt.type=='mouseout'&&!zxcCkEventObj(zxcevt)) return ;
clearTimeout(zxcp.oop.to);
zxcp.oop.fix=zxcfix||zxcp.oop.fix;
zxcp.oop.ud=zxcud||zxcp.oop.ud;
zxcp.oop.action();
}

function zxcConcertinaOOP(zxcp,zxchold,zxcfix){
this.to=null;
this.ref='zxcConcertina'+zxcp.id;
window[this.ref]=this;
this.obj=zxcp;
this.ud=1;
this.fix=zxcfix;
var zxctopics=zxcNoTxtNodes(zxcp);
if (zxchold) this.obj.hold=zxctopics[zxchold-1].hold=true;
this.ary=[];
var zxclft=-1;
for (var zxc0=0;zxc0<zxctopics.length;zxc0++){
this.ary[zxc0]=[zxctopics[zxc0],parseInt(zxcStyleValue(zxctopics[zxc0],'width')),parseInt(zxcStyleValue(zxctopics[zxc0],'width'))];
zxcES(this.ary[zxc0][0],{position:'absolute',overflow:'hidden',left:zxclft+'px',width:this.ary[zxc0][1]+'px'});
zxclft+=this.ary[zxc0][1];
}
zxcES(zxcp,{position:(zxcStyleValue(zxcp,'position')!='absolute')?'relative':'absolute',overflow:'hi dden',left:(parseInt(zxcStyleValue(zxcp,'left')))?zxcStyleValue(zxcp,'left'):'0px',width:zxclft+'px' });
if (parseInt(zxcStyleValue(zxcp,'left')))
document.Show.Show0.value=parseInt(zxcStyleValue(zxcp,'left'));
}

zxcConcertinaOOP.prototype.action=function(){
var zxcrun,zxclft=0
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
if (((this.ary[zxc0][1]+this.ud>=0&&this.ud<0)||(this.ary[zxc0][1]+this.ud<=this.ary[zxc0][2]&&this.ud>0))&&!this.ary[zxc0][0].hold){ this.ary[zxc0][1]+=this.ud; zxcrun=true; }
zxcES(this.ary[zxc0][0],{visibility:'visible',width:this.ary[zxc0][1]+'px',left:(zxclft-1)+'px'});
zxclft+=this.ary[zxc0][1];
}
zxcES(this.obj,{left:(this.fix)?(this.fix-zxclft-1)+'px':this.obj.style.left,width:(zxclft-1)+'px'});
if (zxcrun) this.setTimeOut('action();',10);
else if (this.ud<0&&!this.obj.hold) zxcES(this.obj,{visibility:'hidden'});
}

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

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace('-','')]) return zxcobj.style[zxcp.replace('-','')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (zxceobj.oop){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}



/*]]>*/
</script>


</head>

<body onload="zxcConcertina(event,'tst1',1,2,600);">
<div>
<div id="tst1" class="menu" onmouseover="zxcConcertina(event,'tst1',1);" onmouseout="zxcConcertina(event,'tst1',-1);">
<div class="itemoff" >Item 0</div>
<div class="itemoff" style="width:100px;background-Color:#3399FF;" >Item 1(fixed)</div>
<div class="itemoff" >Item 2</div>
<div class="itemoff" >Item 3</div>
</div>
</div>
<input type="button" name="" value="Open" onclick="zxcConcertina(event,'tst1',1);"/>
<input type="button" name="" value="Close" onclick="zxcConcertina(event,'tst1',-1);"/>
http://www.webdeveloper.com/forum/showthread.php?t=159492
</body>

</html>

ozeetee
Jun 16th, 2009, 08:28 AM
You can use Effect.Transitions to create a horizontal sliding effect. Demo can be find in the following site:

http://wiki.github.com/madrobby/scriptaculous/core-effects (http://wiki.github.com/madrobby/scriptaculous/core-effects)

:thumbsup: