SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top Slide Down Bar

    Hi everybody,

    I'm currently trying to implement a "Top bar that slides down" when a user scrolls down on a page. An exact example can be seen in the link below

    Code:
    www.shoplet.com
    Scroll down to see the bar appear on top of the page!


    I've tried coping the codes from that site but I can't get it to work exactly like that. Below is the HTML and CSS I've copied from the site. Can someone point to me what I'm missing? How can I get the html below to work like the top bar on the site above?


    HTML CODE
    [/CODE]

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="utili.css" rel="stylesheet" type="text/css" />
    
    <script>
    var myVerticalSlide = new Fx.Slide('utility-nav');
      $('exit').addEvent('click', function(event){
        event.stop();
        myVerticalSlide.slideOut();
    	(function (){
    	Cookie.write('Hide', 'hidden');
    	$('utility-nav').setStyle('display', 'none'); }).delay(1000, this); 
      });
    
    /*Quick Track */
    window.addEvent('domready', function() {
    	$('track').addEvent('mouseover', function(){
        $('trackdrop').setStyle('display', 'block');
    	});
    	$('track').addEvent('mouseout', function(){
        $('trackdrop').setStyle('display', 'none'); 
    	}); 
    });
    
    </script>
    
    </head>
    
    <body>
    
    <div style="margin: 0px; visibility: visible; opacity: 1;" id="utility-nav">
    <a id="exit" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Hide']);"><p>X</p><span>HIDE</span></a>
    	<div id="utility-wrap">
        <!--<div id="utility-pink-ribbon"><a href="/promotions/cityofhope.html" onClick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Pink']);"></a></div>-->
    		<div id="utility-logo"><a href="/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_home']);"><span></span></a>
    		</div>
    		<div class="utility">
                        <form action="http://www.shoplet.com/search/search/" name="main_search" method="post">
                            <div id="utilsearchfield"><span></span>
                                <input class="input_placeholder" value="" placeholder="What does your business need today?" id="utilsearchtext" name="text" autocomplete="off" type="text">
                                <script type="text/javascript">new PlaceholderInput($('utilsearchtext'))</script>
                            </div>
                            <button type="submit" id="utilgo" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_search']);return submitGo(utilsearchtext);"></button>
                        </form>
    		</div>
    		<div id="utility-links">
    		<a href="/cart/view/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_editCart'])">Edit/View Cart</a> |
    		<a href="https://www.shoplet.com/checkout" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_checkout'])">Checkout</a> |
    		<a href="/account/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_myAccount'])">My Account</a> |
    				<a onclick="boldChat(); return false;_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Livehelp']);" target="_blank" href="http://livechat.boldchat.com/aid/1530656560879384919/bc.chat?cwdid=836829135506329118&amp;vr=&amp;vn=&amp;vi=&amp;ve=&amp;vp=&amp;iq=&amp;curl=">LiveHelp</a>
    		        
    		</div>
    	</div>
    </div>
    
    </body>
    </html>


    CSS

    Code:
    body {
        line-height: 1;
    }
    
    
    #searchBar {
        background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll 0 0 transparent;
        float: left;
        height: 50px;
        width: 540px;
    }
    #searchBar form {
        height: 100%;
    }
    #searchfield {
        background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -7px -55px transparent;
        border: 0 none;
        float: left;
        height: 37px;
        margin: 7px 0 0 7px;
        position: relative;
        width: 417px;
        z-index: 50;
    }
    #searchfield.focus {
        background-position: -7px -105px;
    }
    #searchfield span {
        background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -17px -60px transparent;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        left: 10px;
        position: absolute;
        top: 5px;
        width: 25px;
    }
    #searchfield.focus span {
        background-position: -17px -110px;
    }
    #searchtext {
        background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
        border: 0 none;
        font-size: 18px;
        left: 38px;
        line-height: 20px;
        outline: medium none;
        padding: 6px 2px 0;
        position: absolute;
        width: 360px;
        z-index: 20;
    }
    #searchfield b {
        font-size: 18px;
        font-weight: 400;
        left: 40px;
        padding: 10px 2px;
        position: absolute;
        z-index: 19;
    }
    #searchfield b.overlay span {
        background: none repeat scroll 0 0 transparent;
        opacity: 0.8;
        position: static;
        width: 350px;
    }
    .input_placeholder {
        color: #444444;
    }
    button#go {
        background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") repeat scroll -430px -55px transparent;
        border: 0 none;
        float: left;
        height: 37px;
        margin: 7px 0 0 6px;
        width: 102px;
    }
    button#go:hover {
        background-position: -430px -105px;
    }
    button#go:active {
        background-position: -430px -255px;
    }
    input[type="submit"] {
        outline: 0 none transparent;
    }
    #utilsearchfield {
        background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll 0 0 transparent;
        border: 0 none;
        float: left;
        height: 37px;
        margin: 10px 0;
        position: relative;
        width: 358px;
        z-index: 50;
    }
    #utilsearchfield.focus {
        background-position: 0 -40px;
    }
    #utilsearchfield span {
        background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll -10px -5px transparent;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        left: 10px;
        position: absolute;
        top: 5px;
        width: 25px;
    }
    #utilsearchfield.focus span {
        background-position: -10px -45px;
    }
    #utilsearchtext {
        background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
        border: 0 none;
        font-size: 16px;
        left: 38px;
        line-height: 18px;
        outline: medium none;
        padding: 6px 2px 0;
        position: absolute;
        width: 320px;
        z-index: 20;
    }
    #utility-nav {
        background-color: #E4EEFC;
        border-bottom: 1px solid #999999;
        box-shadow: 0 1px 5px #777777;
        height: 70px;
        left: 0;
        position: fixed;
        text-align: center;
        top: -20px;
        visibility: hidden;
        width: 100%;
        z-index: 99999999;
    }
    #utility-wrap {
        float: none;
        margin: 20px auto auto;
        position: relative;
        text-align: center;
        width: 960px;
    }
    #utility-logo {
        float: left;
        height: 30px;
        margin: 10px 40px 0 0;
        width: 86px;
    }
    #utility-logo span {
        background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll 0 -80px transparent;
        border: 0 none;
        display: block;
        height: 30px;
        width: 86px;
    }
    #utility-links {
        color: #999999;
        float: right;
        font-size: 11px;
        font-weight: 700;
        line-height: 30px;
        margin: 10px 40px 0 0;
        text-align: right;
    }
    #utility-links a {
        margin: 0 5px;
    }
    .utility {
        float: left !important;
        margin: 0 auto !important;
        position: relative;
        text-align: center !important;
    }
    #exit {
        bottom: 7px;
        color: #0187C5;
        height: 14px;
        position: absolute;
        right: 7px;
        width: 50px;
    }
    #exit span {
        float: right;
    }
    #exit p {
        background-color: #0187C5;
        border: 1px solid #0187C5;
        color: #FFFFFF;
        float: right;
        font-size: 8px;
        height: 12px;
        line-height: 11px;
        margin: 0 0 0 4px;
        text-align: center;
        width: 12px;
    }
    button#utilgo {
        background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll -363px 0 transparent;
        border: 0 none;
        float: left;
        height: 37px;
        margin: 10px 0 0 5px;
        width: 102px;
    }
    button#utilgo:hover {
        background-position: -363px -40px;
    }
    button#utilgo:active {
        background-position: -363px -40px;
    }
    input[type="submit"] {
        outline: 0 none transparent;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone fancy to help me tackle this one?

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Fx.Slide is a MooTools function, which is not included in the code above, but that should give you part of what you are trying to accomplish

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    Fx.Slide is a MooTools function, which is not included in the code above, but that should give you part of what you are trying to accomplish
    thanks for taking the time to help out - problem solved.

  5. #5
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What was the solution?

    Can you tell us what the solution was? I have a test page here http://beta.heartfeltcreations.us/testslide.php
    The only way i can make the bar show is if i style the div like this <div id="utility-nav" style="visibility: visible;">
    I only want it to slide down when the user scrolls.

  6. #6
    SitePoint Zealot irishman's Avatar
    Join Date
    Dec 2011
    Location
    London
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, its seems fairly simple. http://net.tutsplus.com/tutorials/ht...rop-down-menu/

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by irishman View Post
    I'm sorry i mean't the bar that drops don when you scroll down the page not the menu bar. Visit shoplet.com and scroll down the page and a bar will drop out from the top of their site with a search box and helpful links.

    Thanks!

  8. #8
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ended up using a different MooTools js package and it works now.

    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •