Dynamically change position of footer with jQuery after content changes

Question

I have a menu composed of 4 images in a unordered list, each one with text in it (info), initially hidden. When the user clicks on any of these images, the corresponding info text is either shown or hidden with a jQuery animation function.

I have a footer which I intended to always be 40px up from the bottom of the page. The problem is: when the menu is clicked and some of the info text is shown, it makes the body increase in height, thus displaying the vertical-scroll bar on the browser window.

However the footer remains in the same place, ignoring the new height of the body element.

How do I get it to follow the animation of the menu, moving up/down but always at 40px from the bottom of the browser window?

This JSFiddle replicates the essence of the problem: http://jsfiddle.net/bmscmoreira/6r4K9/8/

My HTML is like this:

 <body>
    <div id="menu">
        <ul class="accordion">
            <li>
                <img id="menu-item-1" src="img/menu-item-1.png"  alt="1">
            </li>
            <li class="info">
                <p>here goes full text for menu item 1</p>
            </li>
            <li>
                <img id="menu-item-2" src="img/menu-item-2.png"  alt="2">
            </li>
            <li class="info">
                <p>here goes full text for menu item 2</p>
            </li>
            <li>
                <img id="menu-item-3" src="img/menu-item-3.png"  alt="3">
            </li>
            <li class="info">
                <p>here goes full text for menu item 3</p>
            </li>
            <li>
                <img id="menu-item-4" src="img/menu-item-4.png"  alt="4">
            </li>
            <li class="info">
                <p>here goes full text for menu item 4</p>
            </li>
        </ul>
    </div>
    <div id="footer">
        <p>footer text</p>
    </div>
</body>

jQuery animation function which displays or hides full text of the menu items:

<script type="text/javascript">
$(document).ready(function($) {
   $('.accordion > .info').hide();
   $('.accordion > li > img').click(function(){

      if ($(this).hasClass('selected')) {
           $(this).removeClass('selected');
           $(this).parent().next().slideUp();
      } else {
           $('.accordion > li > img').removeClass('selected');
           $(this).addClass('selected');
           $('.accordion > .info').slideUp();
           $(this).parent().next().slideDown();
      }
      return false;
   });
});
</script>

CSS:

html {
background-color: #666666;
}

#footer {
position: absolute;
bottom:40px;
}

#menu {
position: relative;
margin-left:55px;
margin-top:75px;
}

This question seems too specific. You could have tried to investigate the root cause and provided more related code and information to the question, so it could be applicable to other people looking for the same problem that you are in. — falsarella, May 16 '14 at 23:05
Furthermore, placing code for reference is much better than placing a link because it indexes google searches and it is permanent (a link might become broken in the long-term, and in this case, your question would also become useless to the knowledge base). I kindly recommend you to fully read the StackOverflow help. It is located on the right of your reputation score and badges. — falsarella, May 16 '14 at 23:24
I have edited this question and tried to make it better explained. Please consider revising the usefulness of this question. Thanks. — BMM, May 17 '14 at 21:43
A greatly improved question, +1. Also, you may find a JS Fiddle to replicate the essence of the problem will help attract good answers. — halfer, May 17 '14 at 21:48

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Try:

$('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);

You want to put this code inside your .click() listener so that the pages to a corresponding element.

Source

edited May 23 '17 at 11:50

Community

1
1

answered May 16 '14 at 22:53

martynas

12,120
3
55
60

Thanks for trying to help. I wasn't clear enough, hope it is now. – BMM May 17 '14 at 22:42

falsarella · Answer 2 · 2014-05-18T00:13:51.453

0

The position: absolute; combined with bottom: 40px; will keep the #footer 40px above the browser bottom edge:

#footer.bottomApproach {
    position: absolute;
    bottom: 40px;
}

The margin-top: 200px; combined with margin-bottom: 40px; will keep the #footer following the content text:

#footer.followApproach {
    margin-top: 80px;
    margin-bottom: 40px;
}

Use jQuery to dynamically handle the approach strategy with something like that:

$('.accordion > li > img').click(function(){
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        $(this).parent().next().slideUp();
    } else {
        $('.accordion > li > img').removeClass('selected');
        $(this).addClass('selected');
        $('.accordion > .info').slideUp();
        $(this).parent().next().slideDown();
    }
    if ($(document).height() > $(window).height())  {
        $("#footer").removeClass("bottomApproach").addClass("followApproach");
    } else {
        $("#footer").removeClass("followApproach").addClass("bottomApproach");
    }
    return false;
});

Finally, by default, start using the bottomApproach, since all the menuitems will be collapsed:

<div id="footer" class="bottomApproach">
    <p>footer text</p>
</div>

edited May 18 '14 at 00:13

answered May 16 '14 at 23:00

falsarella

12,217
9
69
115

1

@martynas Yes, you might, but his question is also vague and specific (it might not have guided us to the correct understanding), so the only way to solve is accessing the link and trying to see what he is talking about. – falsarella May 16 '14 at 23:14
I have edited this question and tried to make it better explained. Please consider revising the usefulness of this question. Thanks. – BMM May 17 '14 at 21:37
Your question is better, but my answer remains the same. I have editted it to enhance the explanation of my proposal. Please read it fully and, please, give some feedback if it solved your problem or not. – falsarella May 17 '14 at 22:16
1

I had already tried your suggestion, that makes the footer follow the animation of the text, but I need the footer to always by 40px from the bottom of the body of the page. With your suggestion, on big screens, the footer displays in the middle of the screen (200px from the last menu item). – BMM May 17 '14 at 22:41
1

Thank you for pointing out what was going wrong with my answer! I've updated it to better fit your needs, please, review it accordingly. – falsarella May 17 '14 at 23:26
Still not there, but I understand the principle... I've added a fiddle to replicate the problem: http://jsfiddle.net/bmscmoreira/6r4K9/8/ – BMM May 17 '14 at 23:52
Corrected my answer's logic, see `if ($(document).height() > $(window).height()) { $("#footer").removeClass("bottomApproach").addClass("followApproach"); } else { $("#footer").removeClass("followApproach").addClass("bottomApproach"); }`. The further I can help you with from now is giving you this url: http://api.jquery.com/slideup/ so you can use the `slideUp()` callback to have the animation smoother, if you want. – falsarella May 18 '14 at 00:16

Dynamically change position of footer with jQuery after content changes

2 Answers2