• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5984
  • Last Modified:

Twitter Bootstrap: How To Make A Div Slide Up From Footer Area?

I'm new to Twitter Bootstrap and need an example of a hiding/showing a div at the footer area.
I would like the div to be 100% wide, hidden until I click on it's handle, and smoothly slide up to 100px or so.

It's been done in jQuery, but I need a Twitter Bootstrap version.
jQuery(function ($) {
    var open = false;
    $('.checkBoxSelect').change(function () {
        if (($('.checkBoxSelect:checked').length > 0) &&
        (open === false)) {
            if (Modernizr.csstransitions) {
                $('#appBarContent').addClass('open');
            } else {
                $('#appBarContent').animate({
                    height: '50px';
                });
            }
            $(this).css('backgroundPosition', 'bottom left');
            open = true;
        } else if (($('.checkBoxSelect: checked').length == 0) &&
        (open === true)) {
            if (Modernizr.csstransitions) {
                $('#appBarContent').removeClass('open');
            } else {
                $('#appBarContent').animate({
                    height: '0px';
                });
            }
            $(this).css('backgroundPosition', 'top left');
            open = false;
        }
    });
});

Open in new window

0
GenericCog
Asked:
GenericCog
  • 4
  • 2
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If your talking about a modal, the choices are for to just appear or for it to slide down from the top.  http://twitter.github.io/bootstrap/javascript.html#modals

If you are talking about an actual footer type div to be hidden and slide up from the bottom, then you need to use query.
0
 
Eddie ShipmanAll-around developerCommented:
Check out the mb.Extruder: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
While it is not Bootstrap specific, it does what you need and can be styled using the Bootstrap styles.
0
 
GenericCogAuthor Commented:
@padas,  thanks again for the info! I suppose jQuery will have to do.  Is there no way to customize bootstrap to display the handle at the bottom of the screen and on-click slide up the div?

@EddieShipman, I've already got a couple of thrid party plugins going off inside my project... I would rather not add another one.  That link is good but their demo has a broken footer/header flyout.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
GenericCogAuthor Commented:
Ok making some headway here...
This StackOverflow example uses Twitter Bootstrap to show/hide a Div.
http://stackoverflow.com/questions/13465221/is-it-possible-to-make-a-twitter-bootstrap-modal-slide-from-the-side-or-bottom-i
0
 
Eddie ShipmanAll-around developerCommented:
Don't see anything broken here: http://pupunzi.com/mb.components/mb.extruder/demo/demo.html

But why reinvent the wheel?

Since you are using Bootstrap, you can try to modify the Collapse component here to fill the entire bottom:
http://angular-ui.github.io/bootstrap/
0
 
GenericCogAuthor Commented:
@EddieShipman my preference is to avoid including another 3rd party add on.  I've already got Twitter Bootstrap.  I do not wish to download and include more files to my project.  I understand it makes life easier if I do, but I'm really looking for a working example of the stated requirement in my original question.  That said, I actually appreciate the links as I will consider using them in a future project!

I've decided to simply rely on good ol' jQuery as I cannot find a working example of Twitter Bootstrap meeting my needs.  For reference, here is my final code:
$(document).ready(function () {
    var open = false;
    $('#appBarHandle-NEW').click(function () {
        if (open === false) {
            $('#appBarContent-NEW').slideToggle("slow");
            open = true;
        }
        else if (open === true) {
            $('#appBarContent-NEW').slideToggle("slow");
            open = false;
        }
    });
    $('.checkbox-patientTiles').change(function () {
        // check if Delete & Discharge icons should show/hide
        if (($('.checkbox-patientTiles:checked').length == 1)) {
            $("#lblPatientDisplayName").html(getSelectedPatientName());
            $("#appBar-StayDelete").fadeIn("slow");
            $('#appBar-Discharge').fadeIn("slow");
        }else if (($(".checkbox-patientTiles:checked").length > 1)) {
            $("#appBar-StayDelete").fadeOut("slow");
            $('#appBar-Discharge').fadeOut("slow");
        }
        // check if tiles are selected and show/hide as needed
        if (($('.checkbox-patientTiles:checked').length > 0) && (open === false)) {
            $('#appBarContent-NEW').slideToggle("slow");
            open = true;
        }        else if (($(".checkbox-patientTiles:checked").length == 0) && (open === true)) {
            $('#appBarContent-NEW').slideToggle("slow");
            open = false;
        }
    });
});

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's hard on this end to understand what you are actually trying to do.  I thought of the modal option too but it's a modal.  From that example you can make it look less like a modal by adding data-backdrop="false".
0
 
GenericCogAuthor Commented:
The solution was simply to use the bootstrap's built in functionality.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now