Light White Gradient Theme

by amindunited

HTML

<div class="top-banner-wrap radial">
    <div class="top-banner">
        <h1>BANNER TITLE</h1>
    </div>
</div>
<div class="top_menu_wrapper tmw_1">
    <div class="top_menu_content collapse active">
    <div class="ux tabbed">
        <div class="tabs-wrap">
            <ul>
            
            </ul>
        </div>
        <div class="tab-content-wrap">
            <!--
            <div class="left_scroll">&#9664;</div>
            -->
            <ul>
            
            </ul>
            <!--
            <div class="right_scroll">&#9654;</div>
            -->
        </div>
    </div>
</div>
    <div class="top_menu_handle vertical trigger" openchar="&#9660;" closechar="&#9650;">&#9660;</div>
</div>
<div class="ux side-scroller">
    <div class="left-handle"></div>
    <div class="scroller">
        <ul>
            
        </ul>
    </div>
    <div class="right-handle"></div>
</div>
<!--
<div class="scrollable">
        <div class="scrollButton left_scroll"><<</div>
        <div class="scroll_content">
            <ul id="list">
                <li><div class="block_div">1</div></li>
                <li><div class="block_div">2</div></li>
                <li><div class="block_div">3</div></li>
                <li><div class="block_div">4</div></li>
                <li><div class="block_div">5</div></li>
                <li><div class="block_div">6</div></li>
                <li><div class="block_div">7</div></li>
                <li><div class="block_div">8</div></li>
                <li><div class="block_div">9</div></li>
                <li><div class="block_div">10</div></li>
                <li><div class="block_div">11</div></li>
                <li><div class="block_div">12</div></li>
                <li><div class="block_div">13</div></li>
                <li><div class="block_div">14</div></li>
                <li><div class="block_div">15</div></li>
                <li><div class="block_div">16</div></li>
            </ul>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Nosifer);
/* SOF BANNER */
h1 {
    text-shadow: 1px 1px 1px #BAAE8F;
    font-family: 'Nosifer', cursive;
    font-size: 32px;
    font-weight:normal;   
}
.top-banner-wrap {
    border-radius: 5px;
    padding: 5px;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
}
.top-banner {
    vertical-align:center;
    line-height: 50px;/*150px;*/
    height: 50px;/*150px;*/
    width: 400px;
    background-position: center -10px;
    background-repeat: no-repeat;
    /*border: inset 1px #ededed;*/
    border-radius: 5px 5px 5px 5px;
    margin-left:auto;
    margin-right:auto;
}
/* EOF BANNER */
.ux.tabbed {
    margin-top: 10px;
    margin-left: 5px;
    margin-right:5px;
}
.ux.tabbed .tabs-wrap li, .ux.tabbed .tab-content li {
    display:inline-block;
}
.ux.tabbed .tabs-wrap li {
    width: 75px;
    line-height: 20px;
    height: 20px;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
    text-align:center;
    border:inset 1px #dadada;
    
}
.ux.tabbed .tab-content {
    display:none;
    width: 570px;
    height: 60px;
    overflow:hidden;
}
.ux.tabbed .tab-content-wrap {
   height:60px;
    width: 570px;
}
.ux.tabbed .tab-content .active{
    display:block;
}
.top_menu_wrapper {
    margin-left:10px;
    margin-right:10px;
}
.top_menu_wrapper .top_menu_handle {
    line-height:50px;
    text-align:center;
    clear:both;
    border-radius: 5px;
}

.ux.tabbed .tab-content-wrap ul, .ux.tabbed .left_scroll, .ux.tabbed .right_scroll {
    display:inline-block;
}
.ux.tabbed .left_scroll, .ux.tabbed .right_scroll {
    width: 30px;
    height: 60px;
    line-height: 60px;
    vertical-align:middle;
    float:left;
}

.ux.tabbed .right_scroll { 
    float:right;
}
.ux.tabbed .scroll_content {
    display:inline-block;
    width:500px;
    overflow:hidden;
}

.ux.tabbed .scrollable ul {
    height:60px;
}
.ux.tabbed .scrollable .scroll_content ul li {
    width:100px;
    height: 60px;
}

.radial...

JavaScript

var imageData = [];
var monthNames = [ "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December" ];

function makePage(){
    //$('.top-banner').css({'background-image':'url("'+imageData[0].url +'")'});
    makeTabbed();
}

function makeTabbed(){
    var tabs = {};
    var currentTab = 0;
    var images = imageData.reverse();
    var lastMonth = 0;
    for (var i = 0; i < imageData.length; i++ ) {
        var thisDate = new Date(imageData[i].date);
        var thisMonth = thisDate.getMonth();
        if ( thisMonth > lastMonth ) {
            lastMonth = thisMonth;
            tabs[thisMonth] = {};
            tabs[thisMonth].content = [];
        }
        tabs[thisMonth].content.push(imageData[i]);
    }
    
    for ( i in tabs ) {
        var tb = $('<li></li>').addClass('vertical').attr({"content-ref":"#tab-content-"+i}).appendTo($(".tabs-wrap ul"));
        tb.html(monthNames[i]).click(function(e){
            $('.tab-content').hide('blind');
            $($(e.target).attr('content-ref')).show('blind');
        });
       $('<li></li>').attr({"id":"tab-content-"+i}).addClass("scrollable").addClass('tab-content').appendTo($(".tab-content-wrap > ul"));
        $('<div></div>').addClass("left_scroll").html('&#9664;').appendTo($('#tab-content-'+i));
        var pDIV = $('<div ></div>').addClass("scroll_content").appendTo($('#tab-content-'+i));
        var pUL = $('<ul></ul>').appendTo(pDIV);
        $('<div></div>').addClass("right_scroll").html('&#9654;').appendTo($('#tab-content-'+i));
        for ( var j = 0 ; j < tabs[i].content.length; j++ ){
            var li = $('<li></li>').appendTo($(pUL));
            $('<img></img>').attr({'src':tabs[i].content[j].url, 'width':'100px'}).appendTo(li);
        }
        $(".scrollable").scroller({
            element : '.tab-content-wrap',//The parent element
            target : '.scroll_content',//The element that contains the scrollable content
    ...