PDA

View Full Version : Horizonta; Accordin jumping & centering



wkdwich
03-08-2013, 04:22 AM
I've been fooling with this all night.. I love the script but its just not working right.
It behaves a little different in MSIE, FF and Chrome, Chrome is the worse IE & FF not pretty either.

In either case I'd like the whole thing centered in the table cell and I would love for the table to stop jumping around. I;m REALLY old school as far as coding and I will confess I just dont grasp the whole floating thing..

http://www.nailtech.com/index.htm <<--this one is live and my preferred layout
http://www.nailtech.com/index2.htm <<--this one doesn't jump around, but I either have to remake all the images wider and or center the images in that cell

Like I said I have been messing with it for almost 2 hours so I might have made things worse here..

thanks!

vwphillips
03-08-2013, 06:03 AM
<!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>
<link rel="stylesheet" type="text/css" href="http://www.nailtech.com/haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.nailtech.com/haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*CSS for example Accordion #hc1*/

#hc1 UL{
position:absolute;left:0px;top:0px; /*Spacing between each LI container*/
}

#hc1 li{
margin:0 5px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #f3b429;
}


</style>

<script type="text/javascript">

haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'35px', fullw:'340px', h:'210px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})


</script>
</head>

<body>
<div id="hc1" class="haccordion" style="position:relative;left: 100px; top:100px;width:530px;height:210px;border:solid red 1px;">
<ul>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_dazzlingglitters.jpg" /></a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="empower/index.php">
<img src="http://www.nailtech.com/images/slider_empower2.jpg" width="340" height="200" /></a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_postcard1.jpg"></a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_canes3.jpg"></a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php"><img src="http://www.nailtech.com/images/slider_so_easy1.jpg"></a>
</div>
</li>

</ul>
</div>

</body>

</html>

vwphillips
03-08-2013, 10:24 AM
to truly centre



<!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>
<link rel="stylesheet" type="text/css" href="http://www.nailtech.com/haccordion.css" />
<style type="text/css">
/*Overall CSS for each Horizontal Accordion.
Most settings should be kept as it.
Customize each Accordion by styling each Accordion's ID attribute instead.
*/

.haccordion{
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 200px; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 340px; /* the size of the accordian item */
height: 200px; /*For users with JS disabled: Height of each content*/
}
/*CSS for example Accordion #hc1*/

#hc1 UL{
position:absolute;left:0px;top:0px; /*Spacing between each LI container*/
}

#hc1 li{
height:210px;
margin:0 0px 0 0; /*Spacing between each LI container*/
}



</style>

</head>

<body>

<input type="button" name="" value="Open 0" onmouseup="zxcAccordionOpen('hc1',0);"/>
<input type="button" name="" value="Open 1" onmouseup="zxcAccordionOpen('hc1',1);"/>
<input type="button" name="" value="Open 2" onmouseup="zxcAccordionOpen('hc1',2);"/>
<input type="button" name="" value="Open 3" onmouseup="zxcAccordionOpen('hc1',3);"/>
<input type="button" name="" value="Open 4" onmouseup="zxcAccordionOpen('hc1',4);"/>
<input type="button" name="" value="Close" onmouseup="zxcAccordionClose('hc1');"/>

<div id="hc1" class="haccordion" style="position:relative;left: 100px; top:100px;width:550px;height:210px;border:solid red 1px;">
<ul>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php">
<img src="http://www.nailtech.com/images/slider_dazzlingglitters.jpg" />
</a>
</div>
</li>

<li>
<div class="hpanel" style="width:240px;" >
<a target="_blank" href="empower/index.php">
<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" width="240" height="200" />
</a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php">
<img src="http://www.nailtech.com/images/slider_postcard1.jpg">
</a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php">
<img src="http://www.nailtech.com/images/slider_canes3.jpg">
</a>
</div>
</li>

<li>
<div class="hpanel">
<a target="_blank" href="shoppe/index.php">
<img src="http://www.nailtech.com/images/slider_so_easy1.jpg">
</a>
</div>
</li>

</ul>
</div>

<script type="text/javascript">
// Accordion (08-March-2013);
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcAccordionOpen(id,nu){
var o=zxcAccordion['zxc'+id];
o&&o.ary[nu]?o.open(nu):null;
}

function zxcAccordionClose(id){
var o=zxcAccordion['zxc'+id];
o?o.close():null;
}

function zxcAccordion(o){
var id=o.ID,obj=document.getElementById(id),m=o.Mode,oi=o.OpenIndex,psz=o.PeekWidth,ms=o.Speed,days=o.Persistence,t=o.OpenEvent,c=o.CloseEvent,ctr=o.Centre;
if (obj&&obj.getElementsByTagName('UL')[0]){
var m=typeof(m)=='string'&&m.charAt(o).toUpperCase()=='V'?['height','offsetHeight','top']:['width','offsetWidth','left'],ul=obj.getElementsByTagName('UL')[0],lis=ul.getElementsByTagName('LI'),days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.getcookie(id),oi=days!=-1&&ck?ck*1:typeof(oi)=='number'&&oi>=0?Math.floor(oi):-1,psz=typeof(psz)=='number'&&psz>5?psz:30,sz,a,ary=[],d,z0=0;
for (;z0<lis.length;z0++){
d=lis[z0].getElementsByTagName('DIV')[0];
if (d){
sz=d[m[1]];
a=[lis[z0],d,sz,ary.length!=oi?psz:sz];
lis[z0].style[m[0]]=d.style[m[0]]=a[3]+'px';
d.style.overflow='hidden';
t!==false?this.addevt(lis[z0],t!='click'?'mouseover':'click','open',ary.length):null;
ary.push(a);
}
}
c=='mouseout'||c=='click'?this.addevt(c=='click'?document:obj,c,'close'):null;
zxcAccordion['zxc'+id]=o=this;
o.id=id;
o.psz=psz;
o.m=m[0];
o.sz=obj[m[1]];
o.ul=ul;
o.mde=m;
o.ctr=ctr===true;
o.ary=ary;
o.lst=ary[ary[oi]?oi:0];
o.ms=typeof(ms)=='number'&&ms>20?ms:1000
o.days=days;
o.centre();
}
}

zxcAccordion.prototype={

open:function(nu){
var o=this,a=o.ary[nu];
o.close();
this.animate(a,a[3],a[2],new Date(),o.ms);
o.lst=a;
o.cookie(nu);
return false;
},

close:function(){
var o=this;
o.animate(o.lst,o.lst[3],o.psz,new Date(),o.ms);
o.cookie(-1);
},

animate:function(a,f,t,srt,mS){
clearTimeout(a[4]);
var o=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.max(n,0);
a[1].style[o.m]=a[0].style[o.m]=a[3]+'px';
o.centre();
}
if (ms<mS){
a[4]=setTimeout(function(){ o.animate(a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[1].style[o.m]=a[0].style[o.m]=t+'px';
o.centre();
}
},

centre:function(){
var o=this,sz=0,z0=0;
for (;z0<o.ary.length;z0++){
sz+=o.ary[z0][3];
}
o.ctr?o.ul.style[o.mde[2]]=(o.sz-sz)/2+'px':null;
},

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

cookie:function(nu){
var o=this;
document.cookie=o.id+'='+nu+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
},

getcookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
}

}

new zxcAccordion({
ID:'hc1', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the display type, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
PeekWidth:30, //(optional) the minimum size of the closed accordian item. (number, default = 30)
OpenIndex:0, //(optional) the index number of the initial open accordian item. (number, default = 0)
Speed:1000, //(optional) the animation duration in milli seconds. (number, default = 1000)
OpenEvent:'mouseover', //(optional) the event type to open an item, 'mouseover' or 'click'. (string, default = 'mouseover')
//(optional) false = no event calls to be added. (boolean, default = inline event calls)
CloseEvent:'mouseout', //(optional) the event type to open an item, 'mouseout' or 'click'. (string, default = no close event)
Persistence:1, //(optional) the number of days to restore the last display. (number, default = -1)
//(optional) 'session' = restore the last display for the browser session. (number, default = -1 days)
Centre:true //(optional) true = centre the UL in the parent DIV. (boolean, default = no centring)
});


</script>
</body>

</html>