Code

Discussion on Animated CSS3 Tabs

Discussion on Animated CSS3 Tabs

Cart 732 sales

cosmocoder supports this item

Supported

61 comments found.

It is a great script.

I am trying to add 3 more tabs but when I click on the tab buttons it shows nothing for the last 3 I have added.

I have added the following….what am I missing?

Thanks

<input type=”radio” name=”pane” id=”p4” /> <input type=”radio” name=”pane” id=”p5” /> <input type=”radio” name=”pane” id=”p6” />
  • <label for=”p4”>4 – Hinge</label>
  • <label for=”p5”>5 – Locks</label>
  • <label for=”p6”>6 – Handle</label>
  • Choose Your Hinge <!- Close pane4 -> Choose Your Lock <!- Close pane5 -> Choose Your Handle <!- Close pane6 ->

    Thanks for purchasing!

    Please contact me through the message box in my profile page about this. Provide me a link to your page and let me know what type of Tabs you are using.

    How do I add a fourth tab?

    Thanks for purchasing!

    Adding a fourth tab (or any number of tabs) is easy enough. Just read the documentation on how to add tabs. You can also see the source code of the demo files to help you with this.

    Hi,

    Can it be used as form? I mean to put the submit button a the last tab, and the info from all tabs will be collected.

    Thanks

    Yes I think it can be done. Your form will have to contain the entire html structure fir the tabs.

    Is it possible to make the panes fluid so they expand with the height of the content inside them?

    Thanks for purchasing!

    Some of the transition effects do allow fluid height tab panes while others do not. Please see the documentation where this has been explained.

    First off, great app. Love it! I followed your instructions as carefully as I could and got it working on all the major browsers.

    One thing I’m having a problem with is getting it to work in mobile Safari on my iPad and iPhone. Do you have any fixes/suggestions for this?

    Replied to your email.

    Great script, well done css that works in all browsers! (For IE I used the IEjs script) Everything works as I expected and it was easy to add additional tabs and change colors! Question though, is it possible to have a direct link to a second tab and once the link is clicked and the page loads, that tab is the one that is selected? I know how to set the default but for example a link will reference another tab, so when clicked it’s the one thats loaded? Thanks!

    Thanks for purchasing!

    Yes you can link to specific tabs, and for that you have to use the “Back Button Enabled” version of the tabs. In that case if the page url is, say http://somepage.com, and the id of the second tab is #second then the link to the second tab will look like http://somepage.com#second.

    Thanks! By the way, for some reason the tabs don’t appear on ie7 when used with the IE javascript fix http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js ( http://code.google.com/p/ie7-js/ ) but appears on default ie7 properly only without rounded borders.

    Sorry about that again….I should have made it clear in the first place….I put your code for the tabs into the page with Divs in it and I have tracked down the problem….nothing to do with your Div settings…..alls well.

    thanks.

    Sorry about that….I usually read back through comments and am in a great rush to put together a pricing calculator using this and another file on CC.

    The Back Button Disabled version works perfect so far.

    Another Question though….I cannot seem to eliminate a margin or padding from the Tabs area. (At least thats what it has to be)....I want the tab buttons to sit flush to either end of the Div.

    Thanks.

    This is excellent.

    I put it in a div and when I click the tab buttons it rises the tab buttons to the top of the page….any ideas how to stop that?

    great job!

    Thanks for purchasing!

    I assume your are using the “Back Button Enabled” version. In this case the tab buttons are anchor links with hash tags and what you are experiencing is the default browser behaviour when clicking on an anchor tag with an internal page link. This cannot be avoided. If you really want to avoid this then you must use the “Back Button Disabled” version.

    A few questions if you don’t mind:

    1) Can each tab have its own individual color when “selected”? 2) Can each tab have its own individual color all the time? 3) Can the tabs be changed to span the entire width of the area above the content? I’d like the 3 tabs to be the exact width of the content box or area below it with no white space to the right.

    Thanks!

    Regards, Mark

    I am currently out of station so cannot give an accurate reply, but I think those features cannot probably be implemented.

    Hello,

    I am novice in css and i have a question.

    How to add a new tabs ?

    Thanks Nico

    Thanks for purchasing!

    Just follow the documentation, go over the code in the demo files and you will easily find out how to add new tabs. If you have no idea about html/css then you must first read up on that subject.

    Just bought and tried it, it works very fine with ie8 ff chrome. The look is very nice in FF Chrome. Thanks for this good job !

    Thanks for purchasing! I am glad that you liked it :)

    Hi, I’ve just purchased your Slider, any idea why when I click on a tab it pushes the page right to the bottom instead of staying still?

    Thanks for purchasing!

    I think you are trying to describe the page jumping effect that happens when an anchor tag with an inline link is clicked. This cannot be avoided with pure css and you will see it in the “back button enabled” version. If you don’t like it then use the “back button disabled ” version.

    is there any way to make the tabs resize automatically based on the height and width of the content or do these have to be fixed heights and widths?

    The Simple and Sliding Tabs do resize automatically but the other animated effects need the tabs to be of fixed height.

    This is real garbage in IE, I regret buying this.

    Please explain how this is “garbage” in IE. I have personally tested this item in IE 7 ,8,9 and it works perfectly. The styling won’t obviously look good as in modern browsers and also IE does not support transitions (as mentioned in the item description) but the tab switching functionality works just the same as in other browsers. Lots of customers have bought this item and have given favourable reviews and none have mentioned that this is “garbage”, so explain the cause behind your comment.

    These look awesome, nice work!! Is the tab colour editable via CSS ? Cheers…

    Thanks for your interest!

    Yes the tab colour is certainly editable, in fact you can change the colours of all the elements through css.

    In IE 9 The sliding effect doesn’t work, it work true in firefox but with IE9 it change sections without the slide from right to left. Please tell me how i can make it work also in IE 9 . Many thanks, Marco

    Thanks for purchasing!

    I think that you have to add the ms-transition values in the css to have transitions in IE9 . If you are unsure about this then contact me through my profile page message box. I will fix this in a future update.

    Ok i add this in the css… I’ve got another problem with this script: it doesn’t work with google chrome after uprades of that browser in windows version and i don’t know if it work in the apple version.

    The Tabs works perfectly in the latest version of Chrome (v18). Also IE9 does not support css transitions so you won’t see any animations there. They will be supported in IE10 .

    Hi, Quick question – Can I include images within Tabs?

    Thanks, DJ.

    Thanks for your interest!

    You can include images or any other html elements inside the tabs. The Tabs are normal html containers after all.

    how can we remove the jumping down screen when clicked on tab?

    Any help would be much appreciated.

    Thanks

    Thanks for purchasing!

    The jumping down cannot be avoided because that is how the browser behaves when clicking on a link that points to an element in the page. You can use the Back Button Disabled version instead.

    You should have gotten some extra sales this month after I made my blog post. I hope you enjoyed! Happy new year!

    I had a fair amount of sales this month, thank you! :)

    And a Happy New Year to you too!

    by
    by
    by
    by
    by
    by

    Tell us what you think!

    We'd like to ask you a few questions to help improve CodeCanyon.

    Sure, take me to the survey