If you have a question and answer that is not asked and answered on these pages, please add that to the appropriate FAQ or visit FAQ Work Page. Codex Volunteers will merge your contribution into the appropriate area.

How to add webkit styled scrollbars
+-

Add the following style to your page to have a fixed height and enable webkit scrollbars. Here is the link how to implement and style webkit scrollbars: .

<style>
    /* enable fixed height and add scrollbars*/
    .z-tabs.vertical>.z-container>.z-content>.z-content-inner,
    .z-tabs.horizontal>.z-container>.z-content .z-content-inner {height: 110px;overflow: auto;}

    /* customize scrollbars for webkit browsers (chrome and safari)*/
    .z-tabs.vertical>.z-container>.z-content>.z-content-inner::-webkit-scrollbar,
    .z-tabs.horizontal>.z-container>.z-content .z-content-inner::-webkit-scrollbar{width: 9px;height: 9px;}
    .z-tabs.vertical>.z-container>.z-content>.z-content-inner::-webkit-scrollbar-track,
    .z-tabs.horizontal>.z-container>.z-content .z-content-inner::-webkit-scrollbar-track{background: #eee;border: thin solid lightgray;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;}
    .z-tabs.vertical>.z-container>.z-content>.z-content-inner::-webkit-scrollbar-thumb,
    .z-tabs.horizontal>.z-container>.z-content .z-content-inner::-webkit-scrollbar-thumb{background: #999;border: thin solid gray;}
</style>

Here is the link how to implement css3 scrollbars: http://css-tricks.com/custom-scrollbars-in-webkit/

Open tabs with button or link
+-

- your link/button should have the following id #btn-select-tab
– the select method accept a number you should specify an index of a tab starting with 1.

Here is the modified jQuery code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn-select-tab").on("click", function (e) {
            $("#tabbed-nav").data('zozoTabs').select(4);
        });

        $("#tabbed-nav").zozoTabs({
            defaultTab: "tab11",
            theme: "white",
            size: "small",
            rounded: false
        });
    });
</script>

Change container background color
+-

Add this style to your page and change the color.

<style> 
   .z-tabs.horizontal > .z-container, 
   .z-tabs.vertical >.z-container,
   .z-tabs.mobile >.z-container
   { 
       background:red; 
   } 
</style>

Refresh tab content after images are fully loaded
+-

We need the check if the images are fully loaded and refresh tabs content in order to fix tab height.  We can use jQuery load event and zozo tabs refresh method.

<script>
	/* wait for all content be loaded and refresh zozo tabs*/
	jQuery(window).load(function () {
		jQuery("#tabbed-nav").data('zozoTabs').refresh();
	});	
</script>

How do external link to a specific tab?
+-

Using the api select method:

<script>
	jQuery(document).ready(function ($) {
	  jQuery(".yourbutton").on("click", function () {
		   jQuery("#tabbed-nav").data('zozoTabs').select(1);
	   });
	 });
</script>

Using the hashtag:

Refresh tab content after changing it dynamically
+-

You can fix if by calling the api refresh method after the content of tab is changed or has been hidden.

    <script>
        jQuery(document).ready(function ($) {
            $("#read-more-btn").live("click", function (e) {
                /* changed your content here*/

                /* Calling public method to refresh tabs height and responsiveness*/
                $("#tabbed-nav").data('zozoTabs').refresh();
            });
        });
    </script>

 

Choose which tab should be displayed on page load
+-

Use the options defaultTab to set which tab should be select when page loads. Documentation about defaultTab.

    <script>
        jQuery(document).ready(function ($) {
            /* jQuery activation and setting options for the tabs including defaultTab*/
            jQuery("#tabbed-nav").zozoTabs({
                theme: "silver",
                position: "top-left",
                defaultTab: "tab3"
            });
        });
    </script>

How do I download the latest version?
+-

It’s very easy to get latest version our product from codecanyon. Once you have logged into your account to downloads (hover on your account name and click on downloads).  From download area you can re-download the most recent item you have purchased from codecanyon.

How to rate it item on Codecanyon?
+-

Once you’re on codecanyon, go with your mouse on right top hover on your username next the sign out.  Click in dropdown list on “downloads”. Then you see all your purchased items in the download area. Next to the items you will see the rating stars in grey. Click on stars to rate it. Most buyers rate it 5 stars.

How To Use Font Awesome Icons In Zozo Tabs
+-

To use Font Awesome icons within Zozo Tabs first we need to install it. Follow the installation  guide from Font Awesome website. After installing it we are ready to use the icons in Zozo Tabs. Just the icon in a tag like below.

<!-- normal tabs with Font Awesome (v.3.2.1)-->
<li>
	<a>
		<i class="icon-book">&nbsp;</i>
		Documentation
	</a>
</li>

<!-- multiline tabs with Font Awesome (v.3.2.1)-->
<li>
	<a>
		<i class="icon-book">&nbsp;</i>
		Documentation
		<span>Step-by-step Guide</span>
	</a>
</li>