You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

A bug with horizontal tabs and Webkit (Safari/Chrome) Created Sep 28, 2009

This thread is solved

Views: 1909     Replies: 1     Last reply Oct 5, 2009  
You must login first before you can use this feature

Tombigel

Posts: 2

Registered:
Sep 26, 2009

A bug with horizontal tabs and Webkit (Safari/Chrome)

Posted: Sep 28, 2009

I think I posted this in the wrong forum before (FlowPlayer), so I post it again here:

The horizontal tabs break in webkit after collapsing them for the first time - the text inside the tab expands and shows but the tab itself stays with width 0 (or so it seems).
break on Safari 4 and Chrome 3 and 4, works on all others incl' ie6.
I can't link to my example, but the code looks roughly like that:


<div id="tabs">
  <div class="tab" id="tab-1">
    <div class="inner">
      <div class="tab-title">	
        <h3>Title</h3>
        <ul class="tab-links">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>
      </div>
      <div class="tab-text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
  <div class="tab" id="tab-2">
    <div class="inner">
      <div class="tab-title">	
        <h3>Title</h3>
        <ul class="tab-links">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>
      </div>
      <div class="tab-text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</div>

$(#tabs).tabs(#tabs + ' .tab-text', {
    tabs: '.tab-title h3',
    effect: 'horizontal',
    event: 'click'
  });

#tabs{margin:0 auto;width:990px;height:360px;background:#00f;}
#tabs-inner{padding-right:40px;width:950px;overflow:hidden;height:360px;}
#tabs:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.tab{float:left;word-wrap:normal;position:relative;padding-left:140px;}
.tab .inner{border-right:1px solid #fff;width:auto;height:360px}

.tab-title{position:absolute;left:0;top:0;padding:10px;width:120px;color:#fff;}
.tab-title h3,
.tab-title ul,
.tab-title li{padding:0;margin:0;list-style-position:inside;white-space:nowrap;}
.tab-title a{color:#fff;}
.tab-text{display:none;padding:10px;color:#fff;height:340px;}
#tab-1 .tab-text{width:200px;}
.tab-text p{width:200px;overflow:hidden;font-size:.916em;line-height:1.25em;}

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» A bug with horizontal tabs and Webkit (Safari/Chrome)

Posted: Oct 5, 2009

Reply to: A bug with horizontal tabs and Webkit (Safari/Chrome), from tombigel
I tried with your setup but could not get the horizontal tabs working out of the box. A demo page would be much more easier.