...

View Full Version : JQuery accordion - currently JS set height



jarv
06-28-2012, 01:41 PM
in my page: http://fctest.inpreview.net/test.php

the div in my LI has the following styles set: height: 540px; display: block; overflow: visible;

I don't want a set height, does anyone know how I can change this or overwrite it, think the JavaScript is setting the height?!

jarv
06-29-2012, 10:29 AM
Can anyone help here?

vwphillips
06-29-2012, 12:19 PM
replace


$(document).ready(function() {
$('#accordion').accordion();
});


with


// Simple Accordian (29-June-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcAccordian(o){
var ul=document.getElementById(o.ID),lis=ul.getElementsByTagName('LI'),a,p,ary=[],nu=o.Display,ms=o.Animate,z0=0;
for (;z0<lis.length;z0++){
a=lis[z0].getElementsByTagName('A')[0];
p=lis[z0].getElementsByTagName('P')[0];
if (a&&p){
this.addevt(a,'click','open',z0);
ary[z0]=[p,p.offsetHeight,'dly'+z0];
p.style.height=(nu!=z0?0:p.offsetHeight)+'px';
p.style.overflow='hidden';
}
}
this.ary=ary;
this.ms=typeof(ms)=='number'?ms:1000;
this.lst=ary[nu];
}

zxcAccordian.prototype={

open:function(nu){
var p=this.ary[nu],lst=this.lst;
if (!lst||(p&&p[0]!=lst[0])){
if (lst){
clearTimeout(this[lst[2]]);
this.animate(lst[0],parseInt(lst[0].style.height),0,new Date(),this.ms,lst[2]);
}
clearTimeout(this[p[2]]);
this.animate(p[0],parseInt(p[0].style.height),p[1],new Date(),this.ms,p[2]);
this.lst=p;
}
return false
},

animate:function(obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.height=Math.max(now,0)+'px';
}
if (ms<mS){
this[to]=setTimeout(function(){ oop.animate(obj,f,t,srt,mS,to); },10);
}
else {
obj.style.height=t+'px';
}
},

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

}


new zxcAccordian({
ID:'accordion', // the unique ID name of the parent UL. (string)
Display:0, //(optional) the initial LI index number to display. (number, default = all hidden)
Animate:1000 //(optional) the animation duration in milli seconds. (number, default = 1000)
});

SB65
06-29-2012, 12:26 PM
Or, if you want to stick with jQuery:


$(document).ready(function() {
$('#accordion').accordion({autoHeight:false});
});

(but donate to Vic's charity anyway...)

jarv
06-29-2012, 03:49 PM
Thanks very much Vic (vwphillips) - and thanks to SB65 for the jQuery


One last problem...when I click on each title, the whole page moves (footer moves up and down) is there a way around this?

Maybe setting Max-height on the UL?

jarv
06-29-2012, 04:18 PM
Sorted!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum