Solved

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

Posted on 2013-06-18
8
5,337 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 52

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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
A great marketing strategy is diverse.  Read about the not so popular, yet effective, marketing tactics you can start using today!
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now