Sponsor proxy Bar

for PDX

by mlhDevelopment

HTML

<div id="bodyContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sunt eligendi est voluptatem aliquid illum eius maiores explicabo ex cumque fuga saepe quaerat pariatur cupiditate reiciendis harum nesciunt porro totam. Laborum tenetur ut velit ratione reprehenderit quae dolore nisi modi molestiae placeat ab minima animi ex similique nostrum non nesciunt delectus quam deserunt ea minus vero fugit dolor asperiores possimus perspiciatis unde inventore. Minima distinctio placeat hic quia voluptates aperiam nemo dolor id soluta assumenda aut explicabo eius at iure saepe! Numquam cum iusto quia amet consequatur deserunt! Ipsum doloremque aliquid rerum exercitationem placeat. Distinctio ab deserunt iste ipsam repellendus unde vel eum. Sed tenetur ipsa soluta amet suscipit voluptatibus itaque ullam quibusdam cumque saepe nostrum harum pariatur sit cum excepturi porro velit? Placeat enim incidunt et reprehenderit magni quo veritatis mollitia libero sapiente provident iste sint aliquam eligendi similique officia excepturi modi error eius animi eveniet molestias commodi obcaecati? Quia fuga tenetur perspiciatis in doloremque. Magni ex et temporibus deleniti nobis debitis necessitatibus eaque quaerat cum quod obcaecati natus atque dolores delectus alias incidunt fugiat nemo! Amet alias similique vitae neque accusantium quibusdam asperiores unde quaerat ex voluptatibus ratione ipsam ab saepe eius reiciendis! Dolore animi fugit aut illo dolorum officia impedit odio ratione itaque pariatur quod maxime repellat dignissimos natus optio distinctio earum asperiores fugiat. Et similique obcaecati itaque dolore assumenda exercitationem perferendis vel corrupti perspiciatis ullam deserunt magni aperiam beatae odit quasi saepe possimus delectus quas necessitatibus hic quidem sed adipisci at fugit fuga totam minus sint ex labore iure. Sapiente aliquam et qui accusantium iure esse necessitatibus laboriosam consequuntur adipisci voluptatibus beatae ullam...

CSS

#bodyContainer {
    width: 500px;
    margin: auto;
}

#proxyBar {
    position: fixed;
    top: 50px;
    left: 0;    
    background-color: orange;
    border-radius: 0 5px 5px 0;
    height: 150px;
}
#proxyBar.collapsed {
    width: 50px;
    
}
#proxyBar.expanded {
    
    
}
#proxyBar .shortSummary {
    color: white;
    transform: translate(-50px, 50px) rotate(-90deg) ; 
    width: 150px; /* Same as #proxyBar height */
    height: 50px; /* Same as #proxyBar.collapsed width */
    line-height: 40px;
    text-align: center;
}
#proxyBar.expanded .shortSummary {
    display: none;
}

JavaScript

var proxyBar = $("<div id='proxyBar' class='collapsed'></div>")

var shortSummary = $("<div class='shortSummary'>Sponsor Access</div>");
proxyBar.append(shortSummary);
proxyBar.hover(function() {
    proxyBar.animate({ width: 150 }, { 
        queue: "proxyBar",
        done: function() {
            
        }
    })
    .dequeue("proxyBar");
    shortSummary.fadeOut({ queue: "proxyBar" }).dequeue("proxyBar");
}, function() {
    proxyBar.animate({ width: 50 }, { 
        queue: "proxyBar",
        done: function() {
            
        }
    })
    .dequeue("proxyBar");
    shortSummary.fadeIn({ queue: "proxyBar" }).dequeue("proxyBar");
});




$("body").append(proxyBar);