SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Novice to Ninja Chap 3: Floating Nav

    I'm having trouble with Sitepoint's jQuery book, coding a floating sidebar that following the user as he scrolls down the page. As far as a can see I've replicated the necessary HTML, jQuery and CSS. But it's still not working...

    PHP Code:
    <html>
    <
    head><!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" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <
    style>
        
    #container {
            
    width:650px;        
            
    margin0 auto;
        }
        
        
    #nav {
        
    position:relative;
        
    float:right;
        
    top:0px;
        
    width:150px;    
        }
        
        
    #leftContent {
            
    width:500px;
            
    height:1000px;
            
    padding:5px;
        }
    </
    style>

    <
    script type="text/javascript" language="javascript">
        $(
    document).ready(function(){
              $(
    window).scroll(function () { 
                $(
    '#nav').css('top', $(document).scrollTop()); 
              });
            });
    </script>

    <script type="text/javascript" src="../jqueryCode/code/lib/jquery-1.4.min.js"  ></script>
    <script type="text/javascript" src="../jqueryCode/code/lib/jquery-ui-1.7.2.custom.min.js"></script>
    <body>
    <div id="container">

    <div id="nav" style="top:0px;">
        <ul>
            <li>Home</li>
            <li>Test</li>
            <li>Test</li>    
        </ul>
    </div><!-- nav -->

    <div id="leftContent">
    <p>Test test test test test test test test test test test test test test test test test teser ttest
    Test test test test test test test test test test test test test test test test test teser ttest</p>

    <p>Test test test test test test test test test test test test test test test test test teser ttest
    Test test test test test test test test test test test test test test test test test teser ttest</p>
    </div><!-- leftContent -->

    </div><!-- container -->

    </body>
    </head>
    </html> 

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You are trying to use $ before jQuery is even loaded.

    Move your custom jQuery code down below the script tags that load in the jQuery library.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I knew it would be something dumb.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the answer to my question. I do have one more question about this technique which I expect should also have a simple answer, how do you keep this floating navigation div from overlapping with your footer and header divs.

    I've tried setting css's bottom and top attributes. But the floating nav is not responding to these commands. -Thanks

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maestro360 View Post
    how do you keep this floating navigation div from overlapping with your footer and header divs
    Ahh, that gets more complicated.

    Take a look at a special jQuery plugin called sticky float, which does that for you and more. The demo page
    shows you much of what it can do.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice. This is exactly what I was looking for. The documentation page for the plugin links to the demo so apart from the code comments there aren't any instructions to get it to work, but I think I can get it working with a little tinkering. Thank you, Paul.


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
  •