SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you stop a floating menu like this?

    http://www.cyberpowerpc.com/system/X...e_S1_Notebook/

    See the menu on the left, how do you stop it so that it doesn't go over the footer when you scroll to the bottom of the page?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Investigate and find out.

    It's in a div with a unique id of "conf_form_tabs"
    You're likely to find a reference to that in one of the script files. It's referenced in the configurator.js script file.
    Search for conf_form_tabs, and discover that it's assigned to a.formtabs
    Where is formtabs used? It's used in the same file in three different places:
    • 1. where it's set to null
    • 2.It's assigned to the "conf_form_tabs" div
    • 3. It's referenced in the conf_nav_posit() function


    You can get the code for that function by following the above investigation.

    Code:
    function conf_nav_posit(){var g=conf_getUIs().formbox;var e=conf_getUIs().formtabs;var d=$(window).scrollTop();var c=conf_getUIs().menubar.height();d+=c;var a=g.offset().top;var b=e.offset().top;var f=0;if(d-a>=0&&a+g.height()-d-e.height()>=0){if($.browser.msie&&$.browser.version<"7"){f=d-a;e.css("position","relative").css("top",f+"px")}else{e.css("position","fixed").css("top",c+"px")}}else{f=a+g.height()-d-e.height()<=0?g.height()-e.height():0;e.css("position","relative").css("top",f+"px")}}
    That's not very useful though, so here's a version of it where I:
    • ran it through a javsacript beautifier
    • passed elements in to the function as arguments
    • renamed the variables to more meaningful names
    • and finished off by running it through www.jslint.com


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

    Beware: code is untested, here be dragons, do not pass GO, etc.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give me an html sample? What's the div called?! I need the menu to act just like the one on the page I linked to where it starts out in an absolute position and then switches to fixed and then stops at a certain spot from the bottom of the page.

    Here is the current code I use which does everything but stop at the bottom before it overlaps the footer:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test floating menu</title>
    <style type="text/css">
    div.banner {
        margin: 0;
        position: absolute;
        top: 100px;
        font-size: 80% /*smaller*/;
        font-weight: bold;
        line-height: 1.1;
        left: auto;
        width: 8.5em;
        right: 2em;
    }
    div.banner ol {
        list-style-type: none;
    }
    div.fixedBanner {
        position: fixed;
        top: 20px;
    }
    </style>
    </head>
    <body>
    <div id="myBanner" class="banner">
        <ol>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ol>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
    
    ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
    
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, 
    
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
    
    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
    
    consetetur sadipscing elitr,  At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita 
    
    ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
    
    Consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
    
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
    
    elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
    
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
    
    consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, 
    
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
    
    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
    
    consetetur sadipscing elitr,  At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita 
    
    ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
    
    Consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
    
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
    
    elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
    
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
    
    consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, 
    
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
    
    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor 
    
    sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
    
    consetetur sadipscing elitr,  At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita 
    
    ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
    
    Consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
    
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
    
    elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
    
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <script type="text/javascript">
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(ele, cls) {
        if (!this.hasClass(ele, cls)) {
            ele.className += " " + cls;
        }
    }
    function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }
    setInterval(function () {
        var el = document.getElementById('myBanner'),
        offset = document.documentElement.scrollTop || document.body.scrollTop;
        if (offset > 80) { // = 100 - 20
            addClass(el, 'fixedBanner');
        } else {
            removeClass(el, 'fixedBanner');
        }
    }, 50);
    </script>
    </body>
    </html>
    Is it possible to integrate the stop function into my existing code?!!!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's possible, but it's likely to take some time and effort in order to bring things to a successful completion.

    Are you coming to the mechanic for some advice, or do you want the mechanic to do the work for you. If it's the latter, we have a marketplace where you can have people do the work for you.

    As for me, it's getting very late now and my bed is calling for my attention. All the best.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    It's possible, but it's likely to take some time and effort in order to bring things to a successful completion.

    Are you coming to the mechanic for some advice, or do you want the mechanic to do the work for you. If it's the latter, we have a marketplace where you can have people do the work for you.

    As for me, it's getting very late now and my bed is calling for my attention. All the best.
    TEEEEEEEEEEEEEEEEASE!

  6. #6
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone else got any tips for getting either code working?! THANKS

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    TEEEEEEEEEEEEEEEEASE!
    To not leave you completely in the lurch, here's a jQuery plugin that does the job for you.

    Plugin: Smart Sticky Floating Box
    Demo: http://plugins.jquery.com/files/stickyfloat_0.htm
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but I don't like the way that one jerks as you scroll, the one with css and javascript is a lot smoother... how much would it take to implement the feature I am looking for into my code? Any idea? Thanksss

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    Yes, but I don't like the way that one jerks as you scroll
    That's why the plugin has a duration setting. The demo is set for 400 milliseconds, for it to animate its way in to place. You can set the duration to 0 for one that remains fixed in place and is as smooth as a babies bottom.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, when set to 0 it is still jittery. With the code I gave, the menu is absolutely still while scrolling. Just like the menu on this page: http://www.cyberpowerpc.com/system/X...e_S1_Notebook/

    Can anyone help with this? Thankssssssssssssssssss

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You have the code for that from my post, in post #2

    The easy-to-implement code is the Smart Sticky FLoating Box and the not-so-easy to implement, but closer to your requirements is in post #2
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can either one of those scroll as smooth as the menu on the link I provided... I changed the animation from 400 to 0 and that jquery sample isn't as smooth as the menu in the link I provided... I'm not sure about the other code if it would be as smooth, but I need it as smooth as the menu I linked to when scrolling - it's perfectly still no jitter at all.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    Can either one of those scroll as smooth as the menu on the link I provided...
    The exact code that your favorite web site uses is this:

    Code:
    function conf_nav_posit() {
        var g = conf_getUIs().formbox;
        var e = conf_getUIs().formtabs;
        var d = $(window).scrollTop();
        var c = conf_getUIs().menubar.height();
        d += c;
        var a = g.offset().top;
        var b = e.offset().top;
        var f = 0;
        if (d - a >= 0 && a + g.height() - d - e.height() >= 0) {
            if ($.browser.msie && $.browser.version < "7") {
                f = d - a;
                e.css("position", "relative").css("top", f + "px")
            } else {
                e.css("position", "fixed").css("top", c + "px")
            }
        } else {
            f = a + g.height() - d - e.height() <= 0 ? g.height() - e.height() : 0;
            e.css("position", "relative").css("top", f + "px")
        }
    }
    Converting that in to something usable and readable gives you this:

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

    Both of the above are in post #2, so take your pick.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Code javascript:
    function conf_nav_posit(nav, container, elementAboveContainer) {
        var offsetTop = $(elementAboveContainer).height(),
            scrollTop = $(window).scrollTop() + offsetTop,
            topOfContainer = $(container).offset().top,
            navPosition = 0;
        if (scrollTop - topOfContainer >= 0 && topOfContainer + $(container).height() - scrollTop - $(nav).height() >= 0) {
            if ($.browser.msie && $.browser.version < "7") {
                navPosition = scrollTop - topOfContainer;
                $(nav).css("position", "relative").css("top", navPosition + "px");
            } else {
                $(nav).css("position", "fixed").css("top", offsetTop + "px");
            }
        } else {
            navPosition = topOfContainer + $(container).height() - scrollTop - $(nav).height() <= 0 ? $(container).height() - $(nav).height() : 0;
            $(nav).css("position", "relative").css("top", navPosition + "px");
        }
    }

    Both of the above are in post #2, so take your pick.
    It looks like you took out the name of the div, so I don't know what to call the div so it utilizes your js, what is the html for this? what's the div called for this code to work with it? that's what I don't know.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    It looks like you took out the name of the div
    For ease of setting up, those elements are passedin as the function parameters.

    Code javascript:
    function conf_nav_posit(nav, container, elementAboveContainer) {
        ...
    }

    nav: the navigation element that slides up and down
    container: the area inside of which the navigation element slides up and down
    elementAboveContainer: the element which the navigation is not allowed to go up above of

    Quote Originally Posted by Gitman View Post
    I don't know what to call the div so it utilizes your js, what is the html for this? what's the div called for this code to work with it?
    It can be anything you like. It your page, your code. You decide.

    For example:

    Code html4strict:
    <div id="header">
        ...
    </div>
    <div id="container">
        <div id="sidenav">
            ...
        </div>
        <div id="content">
            ...
        </div>
    </div>

    Where something like this script is used to connect things together.

    Code javascript:
    conf_nav_posit(
        document.getElementById('sidenav'),
        document.getElementById('container'),
        document.getElementById('header')
    );
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the info but I need someone who knows what they're doing to write a sample html page... with the parameters keyed in for all the divs, which indicate the starting position from the top of the page and also where to stop at the bottom... am I suppose to specify the height of the container and the nested div just stays inside of that and that's why it stops at the bottom because it's the bottom of the container? I hope that's not how it works... because the pages will be different lengths and I need to use the same code.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    write a sample html page... with the parameters keyed in for all the divs, which indicate the starting position from the top of the page and also where to stop at the bottom...
    I'm afraid that I won't be able to dedicate my time towards crafting together for you a completely customized solution for you.
    If someone else feels like spending their time to do so, then now is the time to jump on in and do the work for you.

    Otherwise, there is a mostly acceptable fall-back solution that is easy to get going, in the Smart Sticky Floating Box plugin for jQuery.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's that demo page, where I've removed the plugin code and replaced it with scripting code similar to that in post #2.

    Feel free to modify it, so that you can work it in to your own page design.

    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'});
    }
    Last edited by paul_wilkins; Jan 18, 2011 at 15:39.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work, menu doesn't move at all.

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There was an issue with the HTML code that has since been found and fixed.

    Don't give up yet.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This baby is starting to take shape - where can I set the distance between the menu and top of browser once you start scrolling? th emenu shouldn't start moving right away it should wait until it's like 5px from the top of the browser before it starts moving, also the menu is still jittery in IE, any idea why? in ff and chrome it is smooth as a baby's bottom.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Gitman View Post
    This baby is starting to take shape - where can I set the distance between the menu and top of browser once you start scrolling?th emenu shouldn't start moving right away it should wait until it's like 5px from the top of the browser before it starts moving,
    The element assigned to the elementAboveContainer variable is the point at which it should stop scrolling. Let's get rid of that whole situation by removing the elementAboveContainer variable, and removing the offsetTop variable.

    Remove the elementAboveContainer from the in-page script:

    Code:
    var updateSection = function () {
        var nav = $('.menu'),
            container = $('.content'),
            elementAboveContainer = $('.header');
        fixedSection(nav, container, elementAboveContainer);
    };
    In the script, remove the elementAboveContainer and offsetTop parts:

    Code:
    function fixedSection(nav, container, elementAboveContainer) {
        var offsetTop = $(elementAboveContainer).height(),
            scrollTop = $(window).scrollTop() + offsetTop,
        ...
        top = offsetTop + Number($(container).css('padding-top').replace('px', ''));
    Now the menu section stops moving when it gets to the top of the screen.

    Quote Originally Posted by Gitman View Post
    also the menu is still jittery in IE, any idea why? in ff and chrome it is smooth as a baby's bottom.
    That's something that you just need to put up with in IE, because IE below version 7 completely fails to understand the "fixed" CSS setting. It's unavoidable. There's also a CSS issue that affects IE 7, and as a result, a different technique is used for IE 7 and below.

    You might get smoother results by increasing the frequency of the update from 50 milliseconds down to somewhere like 20, but it's not likely to be very noticable.
    Last edited by paul_wilkins; Jan 19, 2011 at 02:40.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the menu in the link doesn't stutter in IE like this one, I thought you used the same code basically?

  24. #24
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using IE 7, if I change this if ($.browser.msie && $.browser.version < "8") { to if ($.browser.msie && $.browser.version < "7") {

    the menu is smooth in IE7, is there a way I can specify multiple versions of IE?

  25. #25
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remove all of the code you slashed out then the menu stops working.


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
  •