...

View Full Version : Browser Auto Slide



thekevin07
07-11-2007, 06:47 AM
Hi

I have a list of items in a table like this

item category
1 cat1
2 cat2


the item is a link, when you click on it more info about the item you clicked is shown like this and is slide down with script.aculo.us


item category
1 cat1

more info

2 cat2


when the more info is slide down is there a way i can make the browser auto scroll down as the more info box is clicked or know of an effect that is similar so users dont have to click the browsers slider and scroll down manually?


Thanks

vwphillips
07-11-2007, 01:16 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[*/
.td {
position:relative;overflow:hidden;height:20px;
}

/*]]>*/
</style></head>

<script language="JavaScript" type="text/javascript">
<!--
// Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or other 'px' style properties) of an element over a specified period of time.

// **** 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;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',[20,260],2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



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

var zxcOOPCnt=0;

function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
}

zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcLTWHCOOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
else this.opacity(zxcltwhco[0]);
}

zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

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

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

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


//-->
</script>

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

function zxcInitExpandRow(zxcid){
var zxcrows=document.getElementById(zxcid).getElementsByTagName('TR');
for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
var zxcnewrow=zxcrows[zxc0].cloneNode(false);
var zxccols=zxcrows[zxc0].getElementsByTagName('TD')
for (var zxc0a=0;zxc0a<zxccols.length;zxc0a++){
zxcES('BR',{},zxccols[zxc0a]);
var zxcnewcol=zxcES(zxccols[zxc0a].cloneNode(false),{},zxcnewrow);;
var zxcmax=0;
var zxcdiv=zxcES('DIV',{position:'relative',overflow:'hidden',height:zxcrows[zxc0].height+'px'},zxcnewcol);
var zxcclds=zxccols[zxc0a].childNodes;
for (var zxc0b=0;zxc0b<zxcclds.length;zxc0b++){
zxcES(zxcclds[zxc0b].cloneNode(true),{},zxcdiv);
}
}
zxcnewrow.minmax=[parseInt(zxcrows[zxc0].style.height),zxcrows[zxc0].offsetHeight];
zxcAddEvt(zxcnewrow,'zxcExpand','click');
zxcrows[zxc0].parentNode.replaceChild(zxcnewrow,zxcrows[zxc0]);
}
}

function zxcExpand(){
var zxccols=this.getElementsByTagName('TD')
for (var zxc0=0;zxc0<zxccols.length;zxc0++){
zxcChangeLTWHCO('height',zxccols[zxc0].childNodes[0],this.minmax[0],this.minmax[1],'sin',2000);
}
this.minmax=this.minmax.reverse();
window.scroll(0,zxcPos(this)[1]);
}

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 zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

var zxcEvt=0;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}


/*]]>*/
</script>
<body onload="zxcInitExpandRow('Tst1')" >
<table width="200" cellpadding="0" cellspacing="0" border="1" >
<tr style="height:20px;" >
<td width="50%" ><div class="td" >10<br />ww<br /></div></td>
<td width="50%" >11</td>
</tr>
</table>
<table width="200" cellpadding="0" cellspacing="0" border="1" bgcolor="#FFFFCC" >
<tbody id="Tst1" >
<tr height="20" style="height:20px;" >
<td width="33%" >10<br />ww<br /></td>
<td width="33%" >11<br />xx<br />66<br /><br /></td>
<td width="33%" >12<br />xx<br />66<br /><br /></td>
</tr>
<tr height="20" style="height:20px;" >
<td width="33%" >20<br />ww<br /></td>
<td width="33%" >21<br />xx<br />66<br /><br /></td>
<td width="33%" >22<br />xx<br />66<br /><br /></td>
</tr>
<tr height="20" style="height:20px;" >
<td width="33%" >30<br />ww<br /></td>
<td width="33%" >31<br />xx<br />66<br /><br /></td>
<td width="33%" >32<br />xx<br />66<br /><br /></td>
</tr>
<tr height="20" style="height:20px;" >
<td width="33%" >40<br />ww<br /></td>
<td width="33%" >41<br />xx<br />66<br /><br /></td>
<td width="33%" >42<br />xx<br />66<br /><br /></td>
</tr>
</tbody>
</table>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum