Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-06-18
8
Medium Priority
?
5,775 Views
Last Modified: 2013-07-25
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
Comment
Question by:GenericCog
  • 4
  • 2
  • 2
8 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39258446
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 39259369
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
 

Author Comment

by:GenericCog
ID: 39260200
@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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:GenericCog
ID: 39260806
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 39260908
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
 

Author Comment

by:GenericCog
ID: 39263599
@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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 total points
ID: 39263692
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
 

Author Closing Comment

by:GenericCog
ID: 39355952
The solution was simply to use the bootstrap's built in functionality.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question