New Max Idea

by AaronLayton

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<div class="header">
    <a id="mainLogo" href="http://www.maxstudio.co.uk"><img src="http://www.maxstudio.co.uk/images/leftNav/header_title.png" alt="" />
    </a>
    <div class="navMenu">
        <ul>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Lookbook</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Shoes</a></li>
            <li><a href="#">Style Search</a></li>
            <li><a href="#">Gift Services</a></li>
            <li><a class="isSale" href="#">Sale</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
    <div class="shadow"></div>
</div>
<div id="allProducts"></div>
    
    
<script type="text/html" id="product-template">
    {{#.}}
        <div class="product">
            <div class="productInfo">
                <div class="prodAttr">
                    <h2 class="pTitle">{{ Title }}</h2>
                    <span>{{ FromPrice }}</span>
                </div>
                <a href="http://www.maxstudio.co.uk/product/test-{{ ProductID }}">
                    <img src="{{ ImageUrl }}" />
                </a>
            </div>
        </div>
    {{/.}}
</script>

SCSS

body { padding: 80px 0 40px; }
.header {
    border-bottom:1px solid #ddd;
    height:80px;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:3;
    
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #eeeeee 0%, #dddddd 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eeeeee), color-stop(99%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #eeeeee 0%,#dddddd 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #eeeeee 0%,#dddddd 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #eeeeee 0%,#dddddd 99%); /* IE10+ */
    background: linear-gradient(135deg,  #eeeeee 0%,#dddddd 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    .shadow {
    height:8px;
    position:absolute;
    top:100%;
    width:100%;
    
    
    -webkit-mask-box-image: -webkit-linear-gradient(left,transparent 0%,rgba(0,0,0,.8) 50%,transparent 100%);
    background-color: transparent;
    background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, .2),transparent);
    background-image: -moz-linear-gradient(top,rgba(0, 0, 0, .2),transparent);
    background-image: -ms-linear-gradient(top,rgba(0, 0, 0, .2),transparent);
    background-image: -o-linear-gradient(top,rgba(0, 0, 0, .2),transparent);
    background-image: linear-gradient(top,rgba(0, 0, 0, .2),transparent);
    border-top: 1px solid rgba(0, 0, 0, 0.4);

    }

    .navMenu {
        float:right;
        margin:30px 25px 30px 0;
    
        ul {
            margin:0;
            padding:0;
        }
li {
    float:left;
    margin:0 0 0 35px;
}    
a {
    color:#504747;
    font-family: Tahoma,Geneva,sans-serif;
    font-size:11px;
    text-decoration:none;
    text-transform:uppercase;
    
    &:hover {
       ...

JavaScript

var siteOptions = {};

$.getJSON('http://maxmobile.evdesign2.co.uk/ajax/lookbookitems?callback=?&itemsperpage=190', function(data) {
    // Get rid of the array that is being sent
    data = data[0];
        
    var processedData = $.map(data.AllProducts, function(product,key){
        product.ImageUrl = data.ImageBase + data.LargeImg + product.ImageUrl;
        return product;
    });
    
    // Create it all
    $('#allProducts').append(  Mustache.render( $('#product-template').text() , processedData ) );
    $('#allProducts span').each(function(){
        var thisPrice = $(this).text();
        $(this).html(thisPrice );
    });
    

    
    // Animate them in with a rotation
    $.each($('#allProducts .product'), function(i,e){
        $(this).delay(i*20).fadeIn(100);
    });
    /*
    $.each($('#allProducts .product'), function(i,e){
        var r=Math.floor(Math.random()*10)-5;
        
        $(this).css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
        }).animate({opacity:100},'slow');
    });
    */
});