CSS3 PIE Forums
http://css3pie.com/forum/

Help with TABS please
http://css3pie.com/forum/viewtopic.php?f=3&t=1604
Page 1 of 1

Author:  yoksito [ Wed Mar 21, 2012 12:08 am ]
Post subject:  Help with TABS please

Hi =)
i write this message cuz i need help with some code of TABs that i found here: http://css3pie.com/demos/tabs/, i'm using this tabs, and i do some changes in the HTML markup only, this change:

i'm trying to show the first tag, and the first content, but all the content appear in the first content, well can see here: http://animevip.net/america-tv-online/ , i integrate the pie in wordpress, well thanks in advance =)
maybe i'm doing wrong something

Code:
<div class="tabBox">
    <ul class="tabs">
        <li class="selected"><a href="#tab1">Tab One</a></li>
        <li><a href="#tab2">Tab Two</a></li>
        <li><a href="#tab3">Tab Three</a></li>
    </ul>
    <div class="content">
  <div id="tab1" class="content">This is tab 1.</div>
  <div id="tab2" class="content">More content in tab 2.</div>
  <div id="tab3" class="content">tab 2 here. </div>
    </div>
</div>


i don't touch yet CSS:

Code:
.tabBox .tabs {
    margin: 0;
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: -1px;
    height: 2.25em;
}

.tabBox .tabs li {
    float: left;
    list-style: none;
    margin: 0;
    padding: .25em .25em 0;
    height: 2em;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #FFF;
}

.tabBox .tabs li.selected {
    z-index: 3;
}

.tabBox .tabs a {
    float: left;
    height: 2em;
    line-height: 2em;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: #EEE;
    border: 1px solid #CCC;
    border-bottom: 0;
    padding: 0 10px;
    color: #000;
    text-decoration: none;
    behavior: url(PIE.htc);
}

.tabBox .tabs .selected a {
    background: #FFF;
    -webkit-box-shadow: #CCC 0 0 .25em;
    -moz-box-shadow: #CCC 0 0 .25em;
    box-shadow: #CCC 0 0 .25em;
}

.tabBox .tabs a:hover {
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
    background: -webkit-linear-gradient(#EEF, #FFF 70%);
    background: -moz-linear-gradient(#EEF, #FFF 70%);
    background: -ms-linear-gradient(#EEF, #FFF 70%);
    background: -o-linear-gradient(#EEF, #FFF 70%);
    background: linear-gradient(#EEF, #FFF 70%);
    -pie-background: linear-gradient(#EEF, #FFF 70%);
}

.tabBox .content {
    clear: left;
    position: relative;
    z-index: 2;
    padding: 2em 1em;
    border: 1px solid #CCC;
    background: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #CCC 0 0 .25em;
    -moz-box-shadow: #CCC 0 0 .25em;
    box-shadow: #CCC 0 0 .25em;
    behavior: url(PIE.htc);
}

Author:  yoksito [ Wed Mar 21, 2012 6:37 pm ]
Post subject:  Re: Help with TABS please

i don't know, maybe i'm missing somethin, help please =)

Author:  ontheplatte [ Wed Mar 21, 2012 7:13 pm ]
Post subject:  Re: Help with TABS please

I think you need to have a little piece of JavaScript to hide those other pieces of content. I am searching for some more info on that, too. Would be great if the demo contained just a tad to get us going.

Author:  jason [ Thu Mar 22, 2012 10:53 am ]
Post subject:  Re: Help with TABS please

Yes, if you read the description on the tabs demo page it says: "The tabs don't actually do anything, as that would require extra JavaScript beyond the scope of this demo."

I don't want to clutter up what's supposed to be a simple and finely targeted demo. I see no reason for it. Search the web a bit and you'll quickly find JS to do what you want.

Author:  yoksito [ Thu Mar 22, 2012 8:36 pm ]
Post subject:  Re: Help with TABS please

ohhh thanks, i don't read that line lol, sorry, then i will find some js

Author:  rsutton [ Mon Mar 26, 2012 4:13 pm ]
Post subject:  Re: Help with TABS please

I found that 'yetii' by Grzegorz Wójcik to be the 'lite weight' tab implementation. It is very small and extremely efficient.

You can find it at http://www.kminek.pl/lab/yetii/ I think that you will be impressed.

Dick

Author:  ccasimir [ Mon May 18, 2015 1:00 pm ]
Post subject:  Re: Help with TABS please

can someone point us or link to a JavaScript that would work for this demo? Thanks.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/