61 comments found.
Hey brother,
Thanks for creating this! I was pulling my hair out looking for tabs that didn’t require javascript.
Be ready for more sales, because I just implemented this for Ecwid shopping cart. I just posted a thread displaying the tabs, and there are hundreds of people wanting to know how I did it.
So I’m working on a blog post right now, along with posting it in the ecwid support forums with links to this file.
Again, great work man!
PS: I see that some people have issues with wanting to display more than 3 tabs, I didn’t have an issue at all.
Thanks for purchasing and I am glad that you liked the item! 
As for the issue with having more than 3 tabs, I see that only one person had it and that too because of improper implementation on his part.
Can you include images and/or video within the tabs?
You can have any html content inside the tab, and that includes images and video.
sold
Is it possible for the tabs to auto scroll?
Do mean whether the content of the tab panes can be auto scrolled? If you want that then you will have to implement an auto scrolling javascript solution of your choice.
Can I switch tabs on hover?
Thanks for purchasing!
Switching tabs on hover is not possible. The tab switching depends on the :active pseudo-class which is effective when the url hash changes by clicking on a link. This hash change won’t happen on hover. But if you do want this then you will have to use javascript to change the hash on hover, and then the css styling will take over.
Hello, I just purchased your product it’s amazing! i’m having a problem though. I’m trying to change the label text color of the active tab to be different than the other ones, how do I do that?
Thanks in advance
Thanks for purchasing!
In all the tab varieties available you will find in the corresponding css file a section called tab highlighting. There you can set the colour of the anchor tag that is present inside the active tab. If you are not comfortable with that css code then contact me through my profile page and I will try my best to help.
just need to know how i can include your code inside a new tab catégory
i have allready a lot of css tab option ON in global css of my website….so how i can include you .css tab option into ONE div in my website instead all my website
tx
Thanks for purchasing!
If you want to target the tabs that you have placed in a particular div then you have to modify the tab css. Lets say your div has the id “container”, then if you place the tabs inside this div and want to target its styling then you will have to prefix all the code in tab css with #container. For eg. you can target the tab buttons like this
#container .tab {
width: 80px;
background: blue;
...
}
Let me know if you have any more queries. You may also contact me through my profile page if you have any problems.
I can’t add one more tab (new one -> tab four). I added but I can0t see it!
Please take a look the code in previous comments.
Thanks
Have a look at my earlier reply.
<div class="light" id="tab-area">
<div class="dummy" id="first">
<input name="pane" id="p1" type="radio" />
<div class="dummy" id="second">
<input name="pane" id="p2" type="radio" />
<div class="dummy" id="third">
<input name="pane" id="p3" type="radio" />
<div class="dummy" id="four">
<input name="pane" id="p4" type="radio" />
<div class="dummy">
<ul class="tabs">
<li id="tab1"><span class="active"></span><label for="p1">First</label></li>
<li id="tab2"><span class="active"></span><label for="p2">Second</label></li>
<li id="tab3"><span class="active"></span><label for="p3">Third</label></li>
<li id="tab4"><span class="active"></span><label for="p4">Four</label></li>
</ul>
<div class="tab-strip"></div>
<div class="panes">
<div id="pane1">
<h2> Heading One </h2>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div id="pane2">
<h2> Heading Two </h2>
Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
<br /><br />
Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div id="pane3">
<h2> Heading Three </h2>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div id="pane4">
<h2> Heading Four </h2>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div> <!-- end of .panes -->
</div>
</div> <!-- end #four -->
</div> <!-- end #third -->
</div> <!-- end #second -->
</div> <!-- end #first -->
</div> <!--end of #tab-area-->
Explane em why this not work?
- First
- Second
- Third
- Four
Heading One
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Heading Three
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Four
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <!
I did not understand what is the problem that you are facing. Also posting such a whole lot of code in that way is very hard to read and does not help in any way.
Please try to explain clearly exactly what problem you are having and I will try my best to help. Also you might consider contacting me through my profile page about your problem. That way it will be easier to discuss about the problem than through this comments section.
Hi there, I purchased this today and have not been able to add any more tabs! I can add the tabs, the but content does not show in the container – it gets lost somewhere.
You can see the prototype site here www.escalabuilding.com/7.9/listings-desktop.htm
I changed the CSS to what you see below. You can access the CSS file through the site so you can see it. I’m going to have to meet with a client and explain that no tabs can be added for now.
I’d appreciate your help on this. I think the documentation could be much more thorough regarding this part because I’ve read it 10 times and the little that is there does not clarify.
BTW , “class and id” are not the same thing in CSS . I think you could correct that in the documentation just to avoid any misunderstanding. Thank you,
rptizzle
/* Scroll the required pane into view */ #first:target .panes-items { margin-left: 0;} #second:target .panes-items { margin-left: -600px;} #third:target .panes-items { margin-left: -1200px;} #fourth:target .panes-items { margin-left: -1800px;} #fifth:target .panes-items { margin-left: -2400px;}
Sorry to hear that the Tabs are not working for you. The link that you gave is not valid, gives a 404 error, so I could not inspect your setup.
From the CSS code that you have posted it seems that you are using the Sliding Tabs. Your code is fine and should work, provided everything else is alright. I do hope that you did not forget to set the width of div.panes large enough to hold all of your 5 tab panes. This point has been stressed repeatedly in the documentation.
The documentation is very detailed, and gives you all the the information for setting up the Tabs for every effect that is available. The case for Sliding Tabs has been very well explained. Also I did not find in the documentation where it is stated that “class” and “id” are the same thing in CSS . Could you please point it out to me.
Give me a working link to your setup and I will try my best to get the Tabs working to your requirements. I think it would also be better if you could contact me through my profile page regarding this problem, since it would be much easier to discuss than through this comments section.
Is it just for text? Or can you add any kind of content in it?
Ernest-
You can have any html content, not just text.
Best CSS slide set effects money can buy. It was very easy to customize. cosmocoder helped us out with all the modification.
Thanks for all your help.
Jarjis
Happy to be of help and I am glad that you liked the effects !
Hi, in the newest Opera (Version 11.11 – Build 2109), the first Tab stays “active” untill you click the last Tab (if you click the Tab in the middle – or if you made more, any other – both are active).
Personally I wouldn’t care, but I know many Admins would care and prevent them from using my Mod (that uses the extended License).
Are you using the ‘Back Button Enabled’ version of the Tabs? If so then Opera has a back button bug and for which I have provided a javascript file.
You can contact me through my profile page with more details of this Opera bug that you are facing and I would be happy to offer you suggestions.
height automatic don’t work …
The auto height feature only works for the Simple tabs and Sliding tabs. Please read the documentation carefully where all these has been explained.
Hello,
(I just read the note)
Thank you
Hey there! I’ve bought this item from you some weeks ago, and i really loved it! I have a doubt… i would like to use this tabs like a “personal profile member”... the first tab would be about personal info, the second onde about adress info, the thir about contact number etc…
The problem is, i’m try to do something where people could fill the fields in any tab and just at the end click the “save”buton (this button would be in the end of every tab)... well, i’d like there was onye one in the first tab and it would be cloes in the very end tab….
But i thing that in the end of every tab, when we have a , it closes automatically the ... =(
Sorry if you cannot undrstand.. Do you have some idea?? thanks!
You are right, I really did not quite understand your problem !
I understood the fact the you want to have a “save” button in every tab, but I did not quite get it from your comment, what you really want to happen to the tabs itself when someone clicks on that button.
Please again state your problem clearly, you can even send me an email from my profile page, and I had be happy to help.
Hi, Thanks for the great file, by any chance do you have the javascript code that would stop the page jumping down when you select a tab? If you dont have it could you please tell me where i coulf get my hands on that code,
Thanks again,
Great Work
Hello darsryan, thanks for your comments.
After reading about your request I tried out a few javascript workarounds to stop the browser page jump. But those methods are in most cases conflicting with the actual css based tab switching functionality.
So my suggestion is that if you really do want that page jump to stop then your best bet is to use a totally javascript based tab system. If I do happen to come around a good method to stop the jump I will let you know.
First of all, I love the tabs, but was having a couple of “beginner” issues I was hoping you would help me out with.
1. If im at the top of the page and click on a tab, it makes the page jump, how can I stop this?
2. Right above the tabs is a little back line that I can’t get rid of.
3. Just below each tab is a white space that I can’t figure out what css will fix that.
4. Do the tabs not work at all in IE, because mine aren’t showing up.
I know that was a lot but I would appreciate it if you could point me in the right direction for these.
Thanks!
here is a link to my site with the tabs:
Good to know that you love the tabs !
Now I will try to answer your questions one by one :
1. The browser page jump cannot be stopped, not just using pure css. It is the way browsers are designed to work. But you can take the help of javascript to stop this. But as I have mentioned in the documentation, the tabs are so designed that even if the page jumps down the tab buttons will always be visible, thus not causing any usability issues.
2. As to the black line at the top, a quick analysis with firebug revealed this :
.content.sub ul, .sub.content ol {
border-top:1px solid #EBEBEB;
}
on line 456 of style_cf.css .
My advice is to include the following style block in simple.css, since thats what you are using :
ul.tabs {
border-top: none;
}
3. As to the white line at the bottom of the tab buttons , this is the culprit :
.sub.content li {
border-bottom:1px solid #EBEBEB;
}
on line 460 of style_cf.css .
You can again rectify that by including the following in simple.css :
ul.tabs li {
border-bottom: none;
}
4. The tabs do work in IE, but only if you include Dean Edwards’ IE9 .js , as I have expressly mentioned in the both the documentation and the product description page at Codecanyon. You can find the code for that in any of the demo html files provided with the item. But also remember that no animations will work in IE, only simple show/hide effect.
I also noticed that you have only changed the color codes for css gradient corresponding to firefox, but not for webkit (Chrome & Safari) and IE. Rectify that as soon as possible.
Hope that takes care all of your problems, and btw your site design is looking quite nice.
Thanks for your reply but I was expecting this working with firefox 2 and 3 because it’s indicated in the compatible browsers in the item description so i’m kind of disappointed…
Sorry to disappoint you. But I indicated Firefox 2 & 3 as compatible browsers because the basic tab switching functionality will work there, without the animations of course. So you have graceful degradation, where only the better modern browsers see the nice animations.
But maybe I should have mentioned it also in the product description, to avoid any confusion. I will try to update it.
Sorry again for any confusion.
Hi there,
I have bought this file but it doesn’t work correctly in Safari and also in IE8 the tabs dont have rounded corners like in firefox.
Also in Firefox, the transition don’t work, i click the tabs and it will only change the text but with any transition at all. What’s wrong ? I saw the video preview and it’s not smooth as the video.
Hello SuperFlash, sorry to hear that you are having problems. I will try to answer your questions as clearly as possible.
First of all, as you might have noticed, I have provided two versions of this item code. One of them is in the folder “Cross Browser”, and the other is in the folder “Non-Webkit”. Although the “Non-Webkit” version has the cleanest code, but due to a bug in Webkit ( which I have explained clearly in the documentation provided), this does not work in Safari & Chrome, but works fine in Opera & Firefox. So to make this work in Safari & Chrome also, you have to use the code in the “Cross Browser” folder. Otherwise javascript support will be required.
As to your question regarding IE8 not showing any rounded corners, it is expected since those rounded corners are achieved using CSS border-radius property, and do not work in any current version of IE. They will work in the upcoming IE9 . Meanwhile if you still want to achieve CSS border-radius and box-shadow in IE without using any images, you can try using this – http://css3pie.com/ . I have not tested it in my item, but otherwise I have heard that it works quite well.
Lastly, your problem with Firefox’s current available versions not showing any transitions is also expected, since they do no yet support CSS3 Transitions. It will be present in the upcoming Firefox 4. At the moment of writing these transitions only work in Safari , Chrome & Opera.
Let me know if I have been able to answer your questions properly, and also please read the documentation, where most of these problems have been discussed.
