Forums
View unanswered posts | View active topics It is currently Mon Oct 23, 2017 2:08 am



Reply to topic  [ 7 posts ] 
 Help with TABS please 
Author Message

Joined: Tue Mar 20, 2012 11:57 pm
Posts: 3
Post 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);
}


Wed Mar 21, 2012 12:08 am
Profile

Joined: Tue Mar 20, 2012 11:57 pm
Posts: 3
Post Re: Help with TABS please
i don't know, maybe i'm missing somethin, help please =)


Wed Mar 21, 2012 6:37 pm
Profile

Joined: Wed Mar 21, 2012 7:10 pm
Posts: 1
Post 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.


Wed Mar 21, 2012 7:13 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post 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.


Thu Mar 22, 2012 10:53 am
Profile

Joined: Tue Mar 20, 2012 11:57 pm
Posts: 3
Post Re: Help with TABS please
ohhh thanks, i don't read that line lol, sorry, then i will find some js


Thu Mar 22, 2012 8:36 pm
Profile

Joined: Tue May 17, 2011 1:35 pm
Posts: 27
Post 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


Mon Mar 26, 2012 4:13 pm
Profile

Joined: Mon May 18, 2015 12:45 pm
Posts: 1
Post Re: Help with TABS please
can someone point us or link to a JavaScript that would work for this demo? Thanks.


Mon May 18, 2015 1:00 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.