MelonHTML5 supports this item


20 comments found.

Great job, I enjoy following your work, this is just great!

How many tabs per page?

You can have as many as you want. Multiple instances are full supported. Demo is over here:

Very nice, Love it. will purchase soon.

would deploy in wordpress?

Yup sure, all you need to do is includnig the JS file in HEAD, add a few lines to setup the loading options. that’s it. You will see a full documentation in the item.


would let> Bookmark the link rectangle azum eg with elastic movement when clicking?

Sorry, I don’t quite understand your questions, Are you suggesting bounce animations when changing a tab?

Hi, Please if you can help me I appreciate it,

I’m loading an iframe in the first “tab”, but the second “tab” and the others do not carry content if I use iframe.

  • Have you tried calling for “include” in PHP using the “data-url” but neither works.

Thank you,

Hey webosk, I’ve made an example of using iframes and AJAX for you, you can have a look and let me you if you still have problems and I can debug for you if you can provide an URL.


Hi, I learned and correct .. this works perfect!!

Thank you!!!!!!!!!!!!

Hi, just bought your item but can’t find your royal_tab.js without minify. I would need to make some modification, please advise. Thanks

Hi, stylehoong, drop me an Email @ :)

awesome work man, but can we customize the ajax loading ?

i mean i have specific logic in my admin panel and want the ability to inject content to the tab based on that. like when user clicks a button somewhere to load module it triggers ajax call to server and i want to inject the result to a Tab

thanks in advanced,

hi falshweaver,

Yes you can. its API will let you to handle that nicely. A full documentation of how to use it is included in the item.

If you run into a problem, you can always email me and I will mock up a demo for you.

Cheers :)

awesome man, i am buying and thanks :)

no worries. Let me know how you go :)

Couple quick comments to improve your demo:

1. The fade is barely noticeable – I’m assuming I can adjust the fade time. 2. You misspelled “multiple” :-)

thanks for noticing the typo. :)

A few questions I didn’t see in the docs:

1. How can I change the fade delay time? It’s really virtually instant and I’d like it to actually fade in/out.

2. Is there a way to make the content (view) part a fixed size? It bounces up and down resizing unless each panel is the same size.

3. How an I turn off the drop-down menu on the far right?

Can you please drop me an email to and I will explain and provide code examples via emails. :)

is there a wordpress plugin for this code? or is there an easy way to intergrate with wordpress, this is the crux to my purchasing decision.

Hi, I don’t have a wordpress plugin version at this stage. But it’s quite straight forward to use this in your wordpress template. All you need to do is include the JS and CSS code (script and link tags) to your wordpress template files, then you can add tabs in each page. :)

Thank you

hi, i’m looking for tabs script which can start with all tabs closed on load and with possibility to close active tab by next click on its header. Could your script handle my needs?

Hi, what you need (having all tabs closed and close tab by next click) are already handled by the Royal Tab. They are just not turned on for the moment as most people don’t really want them.

Once you purchase, you can drop me an Email and I will help you to turn them on.

thx! one more question and i’ll buy it – can i use images as a tabs headers? different image for active and inactive tab?

Yup, sure, you can do that in CSS. You will see a couple of different theme CSS files include, you can either create a new one or modify an existing one. Again, if you have problems, feel free to contact me.

Lee, thanks for source, have you a development version? And not working when i add a tag on

  • can you help me?
  • Please drop us an Email to

    Hello, very sharp works, thanks.

    I have a question, I would like to use api on indivisual royal_tab. Can I generate like this? var api = new Royal_Tab_Api($(’.royal_tab’)); var api2 = new Royal_Tab_Api($(’.royal_tab2’));...

    I have tried and failed.

    Is that anyway to make works?

    Hope your help, thanks.

    Yes, when you have multiple instances, you can have multiple API objects.

    What errors did you get? Do you have a URL to the page?

    Hey there! Nice Tab system – but is there a way to change the tab-scrolling-direction of the buttons? I know what the intention was, but most of our customers and employees are confused about the scrolling-direction when they press the buttons. It would be nice to change it with the API :)

    You can actually use the API to implement your own scrolling button.

    Alternatively, you can use CSS to change the button position over.

    Sure, the only problem is, that the scrolling buttons disable visa-versa aswell :/ that’s why it would be best to have an option while init the js or using the API :/

    Hello, Nice works, thanks. I have sent an email (subject : about inner royal_tab) with a screenshot. Hope your reply, thanks.

    Hey there – again nice work! I figured out how to change the position of the scrolling buttons using CSS – but apparently there seems to be a strange bug in FF that I don’t understand: works as expected in normal browsers and on other sites:

    Do you have an idea how this is possible?

    I’m looking to add a new option so that you can change the position of the scrolling button without doing any modifications.

    Thanks for the reply! The JS was minified. I have written another dirty hack that will count the width of the parent element and check if the width of all the li inside the slider is smaller and will remove the “sliding” from the parent. But a native version to switch the buttons would be way better! Thanks! :)

    You should see the non-minified version is you download it again. Plus, I will write this new option very shortly.

    Great work. Just have a question, how do I make the tabs bookmarkable. I’d like to change the URL hash when a tab is clicked. Any pointers on how to do that?

    You will need to add callbacks to the tab. Please drop us an Email to

    It’s a great job for a great tab system :) If you can put the .scss files of the themes and remove the dropdown, I create a statue of you :)

    haha, yea a scss can be done.

    There is a way to remove the dropdown menu ?

    Sorry, no, not for the moment.

    Two questions. How do I add the sliding left / right arrows from the API into the main tabbed navigation? Also, how would you I add nested tabs into a tab section?