SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    If I remove all of the code you slashed out then the menu stops working.
    Then something is obviously going wrong with what you changed. Put up a test page, link to it, and we'll find out the fault and fix it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I'm trying to work on now - I need to be able to change the starting position of the menu inside the container... like move it left/right up/down - then I need to be able to adjust the distance between the menu and the top of the browser once I start scrolling... the menu should start moving until it's about 5px from the top of the browser.. and then it should stay 5px from the top as you scroll - is this possible?

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    Here's what I'm trying to work on now - I need to be able to change the starting position of the menu inside the container... like move it left/right up/down - then I need to be able to adjust the distance between the menu and the top of the browser once I start scrolling... the menu should start moving until it's about 5px from the top of the browser.. and then it should stay 5px from the top as you scroll - is this possible?
    Yes it is, you have the code changes to achieve all of that in post #22
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here be the code that dont be working i removed the parts you said to remove

    function fixedSection(nav, container) {
    var scrollTop = $(window).scrollTop() + offsetTop,
    topOfContainer = $(container).offset().top,
    position = '',
    top = 0;
    if (scrollTop >= topOfContainer && topOfContainer + $(container).height() >= scrollTop +

    $(nav).height()) {
    if ($.browser.msie && $.browser.version < "8") {
    position = 'relative';
    top = scrollTop - topOfContainer;
    } else {
    position = 'fixed';
    top = Number($(container).css('padding-top').replace('px', ''));
    }
    } else {
    position = 'relative';
    top = topOfContainer + $(container).height() <= scrollTop + $(nav).height() ?

    $(container).height() - $(nav).height() : 0;
    }
    $(nav).css({position: position, top: top + 'px'});
    }





    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>floating menu test</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="fixedSection.js"></script>
    <script type="text/javascript">
    $(function () {
    var updateSection = function () {
    var nav = $('.menu'),
    container = $('.content');
    fixedSection(nav, container, elementAboveContainer);
    };
    window.setInterval(updateSection, 50);
    });
    </script>
    </head>
    <body>
    <div class="header">Header</div>
    <div class="content">
    <div class="menu">menu</div>
    <div class="text">Some text</div>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    here be the code that dont be working i removed the parts you said to remove
    I can still see a reference to elementAboveContainer in your code there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I could see a couple of things wrong

    fixedSection.js
    Code JavaScript:
    function fixedSection(nav, container) {
        var scrollTop = $(window).scrollTop() + $(window).offsetTop,
        topOfContainer = container.offset().top, position = '', top = 0;
     
        if (scrollTop >= topOfContainer && topOfContainer + container.height() >= scrollTop + $(nav).height()) {
            if ($.browser.msie && $.browser.version < "8") {
                position = 'relative';
                top = scrollTop - topOfContainer;
            } else {
                position = 'fixed';
                top = Number(container.css('padding-top').replace('px', ''));
            }
        } else {
            position = 'relative';
            top = (topOfContainer + container.height() <= scrollTop + $(nav).height()) ? 
                container.height() - $(nav).height() : 0;
        }
     
        $(nav).css({position: position, top: top + 'px'});
    }

    • $(window).scrollTop() + offsetTop is not a valid method, offsetTop needs either $(document) or $(window) attached to it

    General JavaScript
    Code JavaScript:
    $(document).ready(function() {
        var updateSection = function() {
            var nav = $('.menu'), container = $('.content');
            fixedSection(nav, container);
        };
     
        window.setInterval(updateSection, 50);
    });

    • Calling out $('.menu') and $('.content') within the <head> tags cannot be done as the DOM has not loaded yet, using $(document).ready() fixes this
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Calling out $('.menu') and $('.content') within the <head> tags cannot be done as the DOM has not loaded yet, using $(document).ready() fixes this
    You'll be please to note that jQuery provides an updated technique for document ready

    These two sections of code perform the same identical task:

    Code javascript:
    $(document).ready(function () {
     
    });

    Code javascript:
    $(function () {
     
    });

    The jQuery(callback) page has details about it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the abovecontainer in the code below and it still doesn't work

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>floating menu test</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="fixedSection.js"></script>
    <script type="text/javascript">
    $(function () {
    var updateSection = function () {
    var nav = $('.menu'),
    container = $('.content');
    fixedSection(nav, container);
    };
    window.setInterval(updateSection, 50);
    });
    </script>
    </head>
    <body>
    <div class="header">Header</div>
    <div class="content">
    <div class="menu">menu</div>
    <div class="text">Some text</div>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>

  9. #34
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tested this because it doesn't work

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>floating menu test</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="fixedSection.js"></script>
    <script type="text/javascript">
    $(function () {
    var updateSection = function () {
    var nav = $('.menu'),
    container = $('.content');
    fixedSection(nav, container);
    };
    window.setInterval(updateSection, 50);
    });
    </script>
    </head>
    <body>
    <div class="header">Header</div>
    <div class="content">
    <div class="menu">menu</div>
    <div class="text">Some text</div>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>

    function fixedSection(nav, container) {
    var scrollTop = $(window).scrollTop() + offsetTop,
    topOfContainer = $(container).offset().top,
    position = '',
    top = 0;
    if (scrollTop >= topOfContainer && topOfContainer + $(container).height() >= scrollTop + $(nav).height()) {
    if ($.browser.msie && $.browser.version < "8") {
    position = 'relative';
    top = scrollTop - topOfContainer;
    } else {
    position = 'fixed';
    top = Number($(container).css('padding-top').replace('px', ''));
    }
    } else {
    position = 'relative';
    top = topOfContainer + $(container).height() <= scrollTop + $(nav).height() ? $(container).height() - $(nav).height() : 0;
    }
    $(nav).css({position: position, top: top + 'px'});
    }

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    Have you tested this because it doesn't work
    Yes, the advised changes have been tested.

    There is for example a " + offsetTop" section that still needs to be removed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #36
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the note pmw57, guess i should do more reading then coding.

    @Gitman: No i didn't test it because all i saw was that main error i found, do you have any CSS styles for this as using plain text really isn't good for testing.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    do you have any CSS styles for this as using plain text really isn't good for testing.
    The code (CSS, HTML, JavaScript) is all in post #18 with the requested tweak adjustments in post #22
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Yes, the advised changes have been tested.

    There is for example a " + offsetTop" section that still needs to be removed.
    You edited your old post and added that! lol, so I removed it and it's looking good... but what about the IE issue? I need a fix for that... if I change the IE number to something less than 8 in that code, it is smooth in ie7, however the starting position is centered in the middle of the page and not to the left.

    is there anyway to fix this, because I think I almost have what I need now!

  14. #39
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    You edited your old post and added that! lol
    That was actually performed somewhat earlier. The most recent edit of that post was to change "he" to "the".

    Quote Originally Posted by Gitman View Post
    I need a fix for that... if I change the IE number to something less than 8 in that code, it is smooth in ie7, however the starting position is centered in the middle of the page and not to the left.
    Someone who knows more about CSS than I would have to wade in to offer a solution, if available.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #40
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works pretty good... but I need to be able to specify the starting position of the menu in the container... right now it starts out at the top of the container, and I would like it to start, for instance, 300px from the top of the container... and also, I don't want the menu to start moving until the distance between the top of the menu and the top of the browser is a certain height, say 5px. I would also need to adjust left/right placement inside the container.

    Oh yea, and in IE7 and below, it's jerky when you scroll - I need that fixed somehow... does anyone know if all of these things are possible by modifying this code or if I will need to do this a different way?

    Thanks!

    style.css
    Code css:
    body {
        margin: 0;
        padding: 0;
    }
    .header {
        height: 100px;
        background-color: darkred;
        text-align: center;
        color: #fff;
        font-size: 3em;
    }
    .content {
        padding: 10px;
        width: 900px;
        margin: 0 auto;
        background-color: #f1f1f1;
        position: relative;
    }
        .content .text {
            height: 1000px;
            background-color: #ddd;
            margin-left: 250px;
            text-align: center;
            color: #333;
            font-size: 2em;
        }
        .content .menu {
            position: absolute;
            float: left;
            width: 240px;
            height: 450px;
            background: green;
            text-align: center;
            color: #fff;
            font-size: 2em;
        }
    .footer {
        height: 500px;
        background-color: blue;
        text-align: center;
        color: #fff;
        font-size: 3em;
    }

    demo.html
    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>floating menu test</title>
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" src="fixedSection.js"></script>
        <script type="text/javascript">
        $(function () {
            var updateSection = function () {
                var nav = $('.menu'),
                    container = $('.content'),
                    elementAboveContainer = $('.header');
                fixedSection(nav, container, elementAboveContainer);
            };
            window.setInterval(updateSection, 50);
        });
        </script>
    </head>
    <body>
        <div class="header">Header</div>
        <div class="content">
            <div class="menu">menu</div>
            <div class="text">Some text</div>
        </div>
        <div class="footer">Footer</div>
    </body>
    </html>

    fixedSection.js
    Code javascript:
    function fixedSection(nav, container, elementAboveContainer) {
        var offsetTop = $(elementAboveContainer).height(),
            scrollTop = $(window).scrollTop() + offsetTop,
            topOfContainer = $(container).offset().top,
            position = '',
            top = 0;
        if (scrollTop >= topOfContainer && topOfContainer + $(container).height() >= scrollTop + $(nav).height()) {
            if ($.browser.msie && $.browser.version < "8") {
                position = 'relative';
                top = scrollTop - topOfContainer;
            } else {
                position = 'fixed';
                top = offsetTop + Number($(container).css('padding-top').replace('px', ''));
            }
        } else {
            position = 'relative';
            top = topOfContainer + $(container).height() <= scrollTop + $(nav).height() ? $(container).height() - $(nav).height() : 0;
        }
        $(nav).css({position: position, top: top + 'px'});
    }

  16. #41
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? Anyone? Bueller?!

  17. #42
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FINALLY got this code integrated and working on site, OH YEEEEEEA... nice code - 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
  •