2

I need a box that slides up from the bottom of my page. I will use the box to show important information to new users. So for example, immediately after signup, the box will slide up with a welcome message.

I've made this jsfiddle that to some extend exemplifies the desired behaviour. It's just a div that gets slided up from the bottom:

$('.foot').addClass('slide-up', 500, 'easeOutBounce');

However, the code is only to exemplify, because the implementation is insufficient for the following reasons:

  1. The bottom box has a pre-determined 500px height, because it's initially hidden 500px below the browser. Instead, I need just the box height to fit its content. The content will vary, and will even be changed through javascript once loaded.

  2. The bottom box emerges on top of other elements. Instead, I want to split the screen in 2. A bottom half that has as much height as the box content needs. And a top half that behaves just like a regular web page, i.e. if there is too much content the user can just scroll down. To exemplify the described effect you can check this jsfiddle (the code has no relevance though)

How could achieve the described behaviour?

scottheckel
  • 9,106
  • 1
  • 35
  • 47
Cjoerg
  • 1,271
  • 3
  • 21
  • 63
  • Rather than move the info-div, put it at the bottom of the main-div, then shrink the main-div - this will "move-up" the info-div automatically. – freedomn-m Sep 13 '16 at 13:41
  • But this would require me to shrink the main div a certain number of pixels. It seems much more clean to have the bottom div determine how much space it takes, based on what's inside it. – Cjoerg Sep 13 '16 at 13:51
  • Correct, you determine the size of the info-div, then shrink the main-div by that amount. – freedomn-m Sep 13 '16 at 14:13
  • I'm open to see a suggestion that uses this approach, but I have to admit I'm a bit sceptical :-) – Cjoerg Sep 13 '16 at 14:18
  • It's just an expansion on your reason 2. So body=100% if you want to show a bottom box "split" then body+bottom=100% (by definition), so body=100%-bottom – freedomn-m Sep 13 '16 at 14:59

2 Answers2

0

I have updated your Fiddle. Look below for details.

You don't need to use position: fixed for the .foot section, you could use position: relative instead. Since I noticed you were using flex, I took the liberty to fix this using the same.

Changes made

  • Firstly I suggest adding a div container, giving a class name say - container.
  • Make the container display: flex & change the default direction to flex-direction: column.
  • Now since you want the main-content to be scroll-able depending on its contents, you need to first set a height to this section with height: 200px; and then make it scroll-able using overflow-y: auto;

Let me know if you have any doubts.

Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44
  • Are you sure you linked to your latest jsfiddle iteration? The bottom div slides up, still on top of the top div. And instead of the top div being scrollable, all of it is. – Cjoerg Sep 13 '16 at 15:37
  • The comments i added was not executing the codes after them. Weird ! Check now. Add more content to see how scroll appears. FYI: The "whole section scroll" is the jsFiddle's scroll not the code :-) – Nikhil Nanjappa Sep 13 '16 at 16:01
  • Thanks. However, it seems that the top div now starts with a height that assumes the bottom div will slide up and take up space. This would not be a viable solution, because first of all it will create a blank spot just after page load. Secondly, if the bottom div is changed after page load the top div will keep the same height. I need the top div to initially have full height, and adjust to the height of the bottom div as it changes. – Cjoerg Sep 13 '16 at 16:12
  • Hmm then yours is a whole different chapter, basically you want "dynamically set the heights of the div without actually knowing the height of the div while page load" ? :-/ – Nikhil Nanjappa Sep 13 '16 at 16:33
0

After experimenting with several methods, I ended up with a solution that combines some ideas given in freedomm-n's comments (modify the size of the main div) and in Nikhil's answer (use a flex container). You can see the result in this jsfiddle.

For the following markup:

<div id="divContainer">
    <div id="divTop">
        Main content
    </div>
    <div id="divFooter">
        Footer content
    </div>
</div>

And these styles:

html, body, form 
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}
#divContainer
{
    width: 100%;
    height: 100%;
}
#divTop
{
    overflow-y: auto;
    padding: 8px;
    height: calc(100vh - 16px); /* Accounts for padding and border (if any) */
}
#divFooter
{
    padding: 12px;
    text-align: center;
    border: 1px solid black;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.containerEnd
{
    display: flex;
    flex-direction: column;
}
.topEnd
{
    height: auto;
    flex-grow: 1;
}

This Javascript code is used to animate the div elements:

function slideUpFooter() {
    var currentHeight = $('#divTop').height();
    var footerHeight = $('#divFooter').outerHeight(true);
    $('#divTop').animate(
        { height: currentHeight - footerHeight },
        2000,
        'easeOutBounce',
        function () {
            $('#divContainer').addClass('containerEnd');
            $('#divTop').addClass('topEnd');
        });
};

The function called at the end of the animation sets the flexbox parameters, to ensure that the footer sticks to the bottom of the page.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146