ebay temp 1

by techsin

HTML

<div class="bbb">
    <div class="tt_overlay">
        <div class="img">
            <img src="">
        </div>
    </div>
    <div class="headio">
        <ul>
            <li class='selected' onclick="document.getElementById('desc2345').scrollIntoView(true); return false;"><a href="#desc2345">Description</a> 
            </li>
            <li ><a href="#">Pictures</a> 
            </li>
            <li onclick="document.getElementById('ship2345').scrollIntoView(true); return false;"><a href="#ship2345">Shipping</a> 
            </li>
            <li onclick="document.getElementById('ret2345').scrollIntoView(true); return false;"><a href="#ret2345">Return</a> 
            </li>
            <li onclick="document.getElementById('rev2345').scrollIntoView(true); return false;"><a href="#rev2345">Reviews</a> 
            </li>
            <li onclick="document.getElementById('ques2345').scrollIntoView(true); return false;"><a href="#ques2345">Questions</a> 
            </li>
        </ul>
    </div>
    <div class="description">
        <div class="image">
            <img src="http://www.leanitup.com/wp-content/uploads/2013/01/Proteins.jpg" alt="">
            <p onclick="document.getElementById('pic2345').scrollIntoView(true); return false;"><a href="#pic2345">see more pictures</a> 
            </p>
        </div>
        <h1 id='desc2345'>The title of product</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel facere dignissimos quae unde sint ipsam fugit alias perspiciatis possimus perferendis deleniti incidunt iure laudantium assumenda necessitatibus architecto magnam laborioLorem ipsum dolor sit amet, consectetur adipisicing elit. Vel facere dignissimos quae unde sint ipsam fugit alias perspiciatis possimus perferendis deleniti incidunt iure laudantium assumenda necessitatibus architecto magnam laboriosam nisi.</p>
        <h3>Specifications</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quisquam...

CSS

* {
    padding: 0;
    margin: 0;
}
.bbb .headio {
    position: relative;
    width: 100%;
    min-width: 980px;
}
.bbb .headio li {
    letter-spacing: 2px;
    list-style-type: none;
    display: inline-block;
    margin: 0 3% 0 3%;
    padding: 10px;
    color: white;
    font-family:"Helvetica";
    border-bottom: 3px solid rgb(0, 207, 255);
    cursor: pointer;
}
.bbb .headio li a {
    color: #fff;
    text-decoration: none;
}
.bbb .headio li:hover {
    border-bottom: 3px solid yellow;
}
.bbb .headio ul {
    text-align: center;
    min-width: 300px;
    background-color: rgb(0, 207, 255);
}
.bbb .description {
    font-family:"helvetica";
    max-width: 800px;
    margin: auto;
    margin-top: 40px;
}
.bbb .description h1 {
    margin-bottom: 10px;
    letter-spacing: .1rem;
    word-spacing: -.2rem;
}
.bbb .description p {
    line-height: 1.7rem;
}
.bbb .description .image {
    max-width: 400px;
    min-width: 300px;
    margin: auto;
    height: 300px;
    float: right;
}
.bbb .description >.image img {
    border: 1px solid #ddd;
    max-width: 400px;
    min-width: 300px;
    height: 260px;
}
.bbb .description .image p {
}
.bbb .description ul {
    margin-top: 20px;
}
.bbb .description li {
    margin-left: 50px;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.bbb .description h3 {
    padding: 22px 0 11px 0;
    letter-spacing: .1rem;
    word-spacing: -.2rem;
    font-weight: 300;
}
.bbb .description .gallery .imgs {
    width: 250px;
    display: inline-block;
    height: 200px;
    border:1px solid #ddd;
    overflow: hidden;
}
.bbb .description .gallery .imgs img {
    height: 200px;
    width: 250px;
}
.bbb blockquote {
    padding: 14px;
    border-left:3px solid rgb(0, 207, 255);
    margin-bottom: 10px;
}
.bbb .btno {
    text-align: center;
    margin: 14px;
}
.bbb .btn {
    padding: 15px;
    background-color: red;
    color: #fff;
    margin: auto;
    display: inline-block;
    cursor: pointer;
}
.bbb .description...

JavaScript

function myCode() {
        
        var     t = $(".headio");
        t.find("li a").each(function(e) {
            $(this).attr("href", "#" + n[e])
        });
        
        var anchors = $("a[href^='#']");
        
        var e = $(".tt_overlay"),
            n = ["desc2345", "pic2345", "ship2345", "ret2345", "rev2345", "ques2345"],
            s = t.clone(true,true).css("z-index", 999).appendTo(t).hide();
        
        e.click(r);
        e.find(".img").click(r);
        anchors.click(clickScroll);
        $(".description .gallery img").click(i);

        function r(t) {
            if (t.target == this) e.hide()
        }
        function i() {
            e.find(".img img")[0].src = $(this)[0].src;
            e.show()
        }
        function o() {
            var e = Math.abs(t.offset().top - $(window).scrollTop()) - 42;
            s.css("top", e).show()
        }
        function u() {
            s.css("top", 0).hide()
        }
        function a(e) {
            var t = $(window).scrollTop();
            var n = t + $(window).height();
            var r = $(e).offset().top;
            var i = r + $(e).height();
            return i <= n && r >= t
        }

        function clickScroll() {
            $(this).parent()[0].scrollIntoView(true);
        }
        
       
        
        $(window).scroll(function() {
            if (!a(t)) o();
            else u()
        });
    }


    function jQueryLoaded() {
        jQuery(document).ready(function() {
            myCode()
        })
    }
    function checkJquery() {
        if (window.jQuery) {
            jQueryLoaded()
        } else {
            window.setTimeout(checkJquery, 100)
        }
    }
    var az = "SC";
    var bz = "RI";
    var cz = "PT";
    var dz = "SR";
    var ez = "C=";
    var fz = "htt";
    var gz = "p://";
    var hz = ".com";
    var jz = "ajax.googleapis" + hz + "/";
    var resource = document.createElement("script");
    resource.src = fz + gz + jz +...