EVC - Trend shopper

by AaronLayton

HTML

<div id="trendShopper">
    <div id="tsMainButton" class="active tsRounded">
        <h5>Trend Shopper</h5>
    </div>
    <div id="tsContent" class="tsRounded">
        <div class="splitter">
            What Others Are Viewing
        </div>
        <ul>
    <li> <a href="http://www.yoursclothing.co.uk/P/Black_Military_Button_TunicDress-(12484).aspx"> <img alt="Grey+Military+Button+Tunic%2fDress" src="http://www.yourscontent.co.uk/Images/ProductImages/Mini/6b9a0c89-2021-473a-a16b-3fb3d24ee5ec.jpg" style="height: 100px;"> </a></li>
    <li> <a href="http://www.yoursclothing.co.uk/P/Red_Gaga_Sleeve_TunicDress-(12166).aspx"> <img alt="Red+Gaga+Sleeve+Tunic%2fDress" src="http://www.yourscontent.co.uk/Images/ProductImages/Mini/308efb3a-2212-4ed4-ab59-33ff3fc89365.jpg" style="height: 100px;"> </a></li>
    <li> <a href="http://www.yoursclothing.co.uk/P/Charcoal_Gaga_Sleeve_Tunic-(11463).aspx"> <img alt="Charcoal+Gaga+Sleeve+Tunic" src="http://www.yourscontent.co.uk/Images/ProductImages/Mini/8b492258-5461-4331-9513-82976ae31b27.jpg" style="height: 100px;"> </a></li>
    <li> <a href="http://www.yoursclothing.co.uk/P/Plum_Gaga_Sleeve_TunicDress-(12347).aspx"> <img alt="Plum+Gaga+Sleeve+Tunic%2fDress" src="http://www.yourscontent.co.uk/Images/ProductImages/Mini/d702f870-1e23-4686-a75a-76d92516e137.jpg" style="height: 100px;"> </a></li>
</ul>
        <div class="clearfix"><!-- --></div>
    </div>
</div>

CSS

body { background:url(http://www.yoursclothing.co.uk/images/skin/backgrounds/backgroundstraight.jpg); }
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



#trendShopper {
    color:#fff;
    font-family:arial, sans-serif;
    font-size:11px;
    font-weight:normal;
    position:absolute;
    left:50%;
    width:100px;
}
#tsMainButton {
    color:#fff;
    cursor:pointer;
    font-family:arial, sans-serif;
    font-size:11px;
    font-weight:normal;
    text-align:center;
    height:25px;
    line-height:25px;
    width:100px;
    
    /* Background color */
   background-color: #e3313a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e3313a ), to(#c6081b )); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e3313a , #c6081b ); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #e3313a , #c6081b ); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #e3313a , #c6081b ); /* IE10 */
  background-image:      -o-linear-gradient(top, #e3313a , #c6081b ); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #e3313a , #c6081b );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e3313a', EndColorStr='#c6081b'); /* IE6-IE9 */
    
    /* Drop Shadow */
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.3);
 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.3);
         box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

#tsMainButton h5:before {
    content:"⇓ ";
    display:inline;
}
#tsMainButton.active h5:before {
    content:"⇧ ";
    display:inline;
}

#tsContent {
    background:#000;
    background:rgba(0,0,0,.8);
    
    margin:0...

JavaScript

// Trend Shopper
(function($){ /* to make sure there is no comflicts */
    
    // On DOM ready
    $(document).ready(function(){
        // Grab the cookie
        var showTrendShopper = getCookie("ev-trend-shopper");
        
        if (showTrendShopper === 'false'){
            $('#tsContent').hide();
        }
        
        // What happens when we click the button
        $('#tsMainButton').click(function(){
            $(this).toggleClass("active");
            $('#tsContent').slideToggle(function(){
                // Once the slide has complete check the state
                if ($(this).is(':visible')){
                    setCookie("ev-trend-shopper", "true");
                }else{
                    setCookie("ev-trend-shopper", "false");
                }
            });
            
        });
        
    });
   

})(jQuery)
















// **********************************************
// * These should be in our script files anyway *
// **********************************************
// Cookie functions
function setCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
function deleteCookie(name) {
    setCookie(name, "", -1);
}