JQuery UI TAB

by Avinashullal

HTML

<script src="https://code.jquery.com/ui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://static-stage.maklarpaket.se/admin/css/jquery-ui-custom.css">
<br/>
<br/>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">ASD</a>

        </li>
        <li><a href="#tabs-2">NY Now</a>

        </li>
        <li><a href="#tabs-3">NSS</a>

        </li>
        <li><a href="#tabs-4">JA NY</a>

        </li>
        <li><a href="#tabs-5">Couture</a>

        </li>
        <li><a href="#tabs-6">Antique Shows</a>

        </li>
        <li><a href="#tabs-7">Photo</a>

        </li>
        <li><a href="#tabs-8">Interbike</a>

        </li>
        <li><a href="#tabs-9">OR</a>

        </li>
        <li><a href="#tabs-10">SLATS</a>

        </li>
        <li><a href="#tabs-11">Surf</a>

        </li>
        <li><a href="#tabs-12">Surtex</a>

        </li>
        <li><a href="#tabs-13">ICFF</a>

        </li>
        <li><a href="#tabs-14">Global Shop</a>

        </li>
        <li><a href="#tabs-15">HD Expo</a>

        </li>
        <li><a href="#tabs-16">KBIS</a>

        </li>
        <li><a href="#tabs-17">MedTrade</a>

        </li>
        <li><a href="#tabs-18">IRCE</a>

        </li>
        <li><a href="#tabs-19">Marine Shows</a>

        </li>
    </ul>
    <div id="tabs-1">
        <Div id="holder">
            <div id="leftArrowD">
                <img src='http://kimjoyfox.com/blog/wp-content/uploads/arrowLeftGrey.png' id='leftArrow' />
            </div>
            <div id="rightArrowD">
                <img src='http://kimjoyfox.com/blog/wp-content/uploads/arrowRightGrey.png' id='rightArrow' />
            </div>
<a href="" id="slideshowA">
<img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho8.jpg" id="slideshow" />
    </a>

            <div id="description"></div>
            <div id="descriptionBack"></div>
        </Div>
        <div id="thumbnails">
            <div class="thumbnailArrows">
                <img...

CSS

body {
    background-color: #fff;
    height: 100%;
    font-family: Segoe UI, Open Sans;
    color: #4f4f4f;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: Segoe UI, Open Sans;
    font-weight: 200;
    color: #797b7b;
}

ul {
    list-style: disc;
    margin-left: 1.5em;
    margin-top: .5em;
    margin-bottom: .5em;
    line-height: 1.4;
}
p {
    line-height: 1.4;
    margin-bottom: .5em;
}
header {
    background: rgb(76, 76, 76);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 1%, rgba(63, 63, 63, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(76, 76, 76, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 1%, rgba(63, 63, 63, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 1%, rgba(63, 63, 63, 1) 100%);
    /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 1%, rgba(63, 63, 63, 1) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#3f3f3f', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, rgba(76, 76, 76, 1) 1%, rgba(63, 63, 63, 1) 100%);
    /* W3C */
    padding: .2em 1.2em;
    font-size: 1.3em;
    color: #999;
    text-shadow: -1px -1px 0 #333;
    text-align: right;
    box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1);
    border-bottom: 1px solid #fff;
}
header span {
    margin-left: .3em;
    font-size: .6em;
}
article {
    padding: 20px;
}
.columns {
    padding: 2em;
    -webkit-column-count: 3;
    -webkit-column-gap: 5em;
    -webkit-column-rule: 1px dashed #ccc;
    column-count: 2;
    column-rule: 1px dashed #ccc;
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
   ...

JavaScript

(function ($, undefined) {
    if (!$.xui) {
        $.xui = {};
    }
    var tabs = $.extend({}, $.ui.tabs.prototype),
        _super = {
            _create: tabs._create,
            _destroy: tabs._destroy,
            _update: tabs._update
        };
    $.xui.tabs = $.extend(tabs, {
        options: $.extend({}, tabs.options, {
            scrollable: false,
            changeOnScroll: false,
            closable: false,
            resizable: false,
            resizeHandles: "e,s,se"
        }),
        _create: function () {
            var self = this,
                o = self.options;
            _super._create.apply(self);
            if (o.scrollable) {
                self.element.addClass("ui-tabs-scrollable");
                var scrollContainer = $('<div class="ui-tabs-scroll-container"></div>').prependTo(this.element);
                self.header = $('<div class="ui-tabs-nav-scrollable ui-widget-header ui-corner-all"></div>').prependTo(scrollContainer);
                var nav = self.element.find(".ui-tabs-nav:first").removeClass("ui-widget-header ui-corner-all").appendTo(this.header);
                var arrowsNav = $('<ol class="ui-helper-reset ui-helper-clearfix ui-tabs-nav-arrows"></ol>').prependTo(self.element);
                var navPrev = $('<li class="ui-tabs-arrow-previous ui-state-default ui-corner-bl ui-corner-tl" title="Previous"><a href="#"><span class="ui-icon ui-icon-carat-1-w">Previous tab</span></a></li>').prependTo(arrowsNav).hide(),
                    navNext = $('<li class="ui-tabs-arrow-next ui-state-default ui-corner-tr ui-corner-br" title="Next"><a href="#"><span class="ui-icon ui-icon-carat-1-e">Next tab</span></a></li>').appendTo(arrowsNav).hide();


                var scrollTo = function (to, delay) {
                    var navWidth = 0,
                        arrowWidth = navPrev.outerWidth(),
                        marginLeft = -(parseInt(nav.css("marginLeft"), 10)),
                        hwidth =...