View Full Version : sliding tables in many

Mar 14th, 2008, 12:27 PM
I wanna some sliding effect for table or something,
I need to use it for a FAQ pages, which if user click on a text as Question, the answer be shown sliding under the Q , slowly, then by clicking on text again, the answer get hide again,
I just use 1 , but it causes the pages get long after some clicking

regards :)

Mar 14th, 2008, 07:04 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script language="JavaScript" type="text/javascript">
// Basic Element Animator (13-March-2008) DRAFT
// 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.

// **** 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.

// **** Executing the Effect(Script)
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// **** Advanced Applications
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively

// **** 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 is best as an External JavaScript.
// Tested with IE7 and Mozilla FireFox on a PC.

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

function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);

function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){

if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.srttime=new Date().getTime();

var zxcms=new Date().getTime()-this.srttime;
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);

if (zxcopc<0||zxcopc>100){ return; }

<script language="JavaScript" type="text/javascript">

function zxcQAnswer(zxcid,zxcobj){
var zxcp=document.getElementById(zxcid);
if (!zxcp.ary){
var zxcclds=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].tagName=='DIV'){
if (zxcp.ary.length%2==0){
var zxcnu=zxcp.ary.length-1;
zxcp.ary[zxcnu-1].onclick=function(){ zxcQAnswer(zxcid,this); }
else {


<body onload="zxcQAnswer('qa',1500);">
<div id="qa" >
<div style="width:100px;height:20px;" >Question 1</div>
<div style="overflow:hidden;width:200px;height:120px;border:solid black 1px;" >Answer 1</div>
<div style="width:100px;height:20px;" >Question 2</div>
<div style="overflow:hidden;width:200px;height:150px;border:solid black 1px;" >Answer 2</div>
<div style="width:100px;height:20px;" >Question 3</div>
<div style="overflow:hidden;width:200px;height:150px;border:solid black 1px;" >Answer 3</div>