Results 1 to 3 of 3

Thread: Horizonta; Accordin jumping & centering

  1. #1
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizonta; Accordin jumping & centering

    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!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    to truly centre


    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. ddaccordion script jumping
    By jaymus in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-23-2009, 12:59 PM
  2. Thumbnail Image jumping
    By n1kk1 in forum CSS
    Replies: 5
    Last Post: 01-28-2009, 01:20 PM
  3. Navigation is jumping...
    By Jon101 in forum CSS
    Replies: 4
    Last Post: 01-03-2009, 04:37 AM
  4. Resolved Page jumping in IE
    By TheJoshMan in forum HTML
    Replies: 9
    Last Post: 12-06-2008, 04:57 AM
  5. jumping website
    By SCJVS1 in forum The lounge
    Replies: 0
    Last Post: 05-27-2005, 08:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •