Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Help stopping a fixed div at the footer div?

    Any suggestions how I can get the .floater-bar-single div on my site to stop at the footer div?

    Here is what it looks like www.michaelaubry.com

    As you can see there is a fixed div to the left, it's nice until you scroll down to the footer.

    I am great with HTML, CSS, but I am pretty sure this calls for a bit of java, I would like to learn a bit of java and fix my issue at the same time.

    Thanks to all you java whizzes! Pretty sure this is a piece of cake answer for ya!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I had something like this on a site I made (you can see it on http://tinyurl.com/c23pruw) and it is quite tricky if you ask me. First of all, you need to change the position type (fixed/absolute) depending on the scroll position. But you never know how long your page is (content height and footer height can change over time) and the height of the viewport (browser window) is also different for everyone so you also need to calculate the height of the content or document, the height of the positioned element, and the height of the viewport and need to add and subtract each other in various if/else conditions.

    You can find the function I used for that on http://tinyurl.com/cvtryjc from line 558 to line 639.

    And by the way: Java is not JavaScript. In fact, it’s something almost completely different.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by VIPStephan View Post
    I had something like this on a site I made (you can see it on http://tinyurl.com/c23pruw) and it is quite tricky if you ask me. First of all, you need to change the position type (fixed/absolute) depending on the scroll position. But you never know how long your page is (content height and footer height can change over time) and the height of the viewport (browser window) is also different for everyone so you also need to calculate the height of the content or document, the height of the positioned element, and the height of the viewport and need to add and subtract each other in various if/else conditions.

    You can find the function I used for that on http://tinyurl.com/cvtryjc from line 558 to line 639.

    And by the way: Java is not JavaScript. In fact, itís something almost completely different.
    Ah I see that on your site, I love that kind of functionality! Plus I like the minimal sleek design, looks great.

    Yeah that just shows ya how much I know about javascript, I have played with in on slideshows, it kinda makes sense but then at the same time it blows my mind lol.

    Let me try to use the link you provided and see if I can get this bad boy to function!

    Thanks.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code, since I am unfamiliar with javascript, to save myself the headache I need to figure out these questions.

    My div (.floater-bar-single) is the div that is fixed and floating to the left, what in the code below do I replace it with?

    Also the div that I want it to stop at is the #footerwrapper div, what do I replace that with?


    Code:
      $('#ueberblick .autor, #info div a.autor, #nebeninhalt .abschnitt .autor').append('<span class="rahmen" />');
            if($('#info').length) {
                // mitscrollender inhalt
                var el1 = $('#info .aktion');
                var el2 = $('#info #ueberblick');
                var els = $('#info .aktion,#info #ueberblick');
                el2.data("left", el2.css("left"));
                var c = $('#container');
                var cPos = c.offset();
                var abstand = 45;
                var eTop = el2.offset().top-abstand;
                var e2Pos = el2.position();
                var pad = parseInt(c.css('padding-left'),10);
                var elPos = function() {
                    cPos = c.offset();
                    if(win.scrollTop() > eTop) {
                        // begin el1
                        if(winHeight > el1.height()+abstand) {
                            if((win.scrollTop()+el1.outerHeight()+abstand) > ($(document).height()-$('#fuss').outerHeight()-parseInt($('#inhalt').css('margin-bottom'),10))) {
                                el1.removeClass('fixed').css({
                                    top: $('#info').outerHeight()-el1.outerHeight()+'px',
                                    left: '0'
                                });
                            }
                            else {
                                el1.addClass('fixed').css('top','45px');
                            }
                        }
                        else {
                            el1.removeClass('fixed').removeAttr('style');
                        } // end el1
                        // begin el2
                        if(winHeight > el2.height()+abstand) {
                            if((win.scrollTop()+el2.outerHeight()+abstand) > ($(document).height()-$('#fuss').outerHeight()-parseInt($('#inhalt').css('margin-bottom'),10))) {
                                el2.removeClass('fixed').css({
                                    top: $('#info').outerHeight()-el2.outerHeight()+'px',
                                    left: el2.data("left")
                                });
                            }
                            else {
                                el2.addClass('fixed').css('top','45px');
                            }
                        }
                        else {
                            el2.removeClass('fixed').removeAttr('style');
                        } // end el2
                        if(winWidth < c.outerWidth()) {
                            if(el1.is('.fixed')) {
                                el1.css('left',(pad-win.scrollLeft())+'px');
                            }
                            if(el2.is('.fixed')) {
                                el2.css('left',((pad+e2Pos.left)-win.scrollLeft())+'px');
                            }
                        }
                        else {
                            if(el1.is('.fixed')) {
                                el1.css('left',cPos.left+pad+'px');
                            }
                            if(el2.is('.fixed')) {
                                el2.css('left',cPos.left+e2Pos.left+pad+'px');
                            }
                        }
                    } // end if scrolltop
                }; // end function elPos()
                if(win.scrollTop() > eTop) {
                    el1.addClass('fixed');
                    elPos();
                    win.resize(elPos);
                }
                win.scroll(function() {
                    if($(this).scrollTop() > eTop) {
                        el1.addClass('fixed');
                        if(winHeight > el2.height()) {
                            el2.addClass('fixed');
                        }
                        elPos();
                        win.resize(elPos);
                    }
                    else {
                        els.removeClass('fixed').removeAttr('style');
                    }
                });
                // ende mitscrollender inhalt
                $('#info')
                    .find('div.mehr').after(
                    $('<a>', {
                        'class': 'link_mehr',
                        text: '+ mehr lesen'
                    }).toggle(
                        function() {
                            $(this).text('- weniger lesen').prev().fadeIn();
                        },
                        function() {
                            $(this).text('+ mehr lesen').prev().hide();
                        }
                    )
                )
                    .end()
                    .find('#ueberblick a.buch:not(.hart,.ebook)')
                    .append(
                    $('<span>', {
                        'class': 'blaettern',
                        text: 'Im Buch blättern'
                    })
                )
                    .hover(function() {
                        var me = $(this);
                        if(me.children('.info').length) {
                            me.children('.info').addClass('hover');
                        }
                        me.children('.blaettern').fadeToggle();
                    })
                    .end()
                    .find('#ueberblick .ebook img')
                    .parent()
                    .addClass('glanz')
                    .end()
                    .appendTo($('#ueberblick .ebook'));
            } // end if #info length
            // termin-tabelle
            $('table .mehr')
                .closest('table')
                .after(
                $('<div>', {'class': 'link_mehr'}).append(
                    $('<a>', {text: '+ mehr Termine'}).toggle(
                        function() {
                            $(this).text('- weniger Termine').parent().prev('table').find('.mehr,.mehr ~ tr').fadeIn();
                        },
                        function() {
                            $(this).text('+ mehr Termine').parent().prev('table').find('.mehr,.mehr ~ tr').hide();
                        }
                    )
                )
            );


  •  

    Tags for this Thread

    Posting Permissions

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