Solved

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

Posted on 2013-06-18
8
5,290 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)
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…

758 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

17 Experts available now in Live!

Get 1:1 Help Now