Solved

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

Posted on 2013-06-18
8
5,487 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 53

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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

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 53

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Call a VB.net function in Javascript 6 52
Ajax success not firing alert 6 45
Dropdown animation to normal dropdown 6 28
Jquery syntax 12 30
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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 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…

751 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