Wednesday, August 21, 2013

Create Fly Over Notification Messages with Bootstrap

Twitter Bootstrap provides a very solid foundation for structuring a page. Even if there is not a specific component available in the framework's library, you can usually adapt something to meet your needs. Additionally, the framework establishes patterns that are worth understanding as you construct new types of content. If you look at how a modal dialog is transitioned into the view, you'll notice it uses all CSS3 to perform the animation. It does this by using a "fade" class defining the initial positioning and transition to use. An additional "in" class is defined which contains the final position of the modal box. By toggling the "in" class on and off, you can animate the modal in and out of the visible page. When I wanted to create notifications that would fly into view, I thought I could leverage that concept to do a similar thing. Additionally, the Jumbotron class provided the layout structure I wanted for the content so I figured I would build on that to create my fly over message.

When this page loaded, I flew in a quick greeting message to demonstrate what I'm building. Before defining the fly over class, let's take a quick look at how the Bootstrap Modal fade/in classes are defined:

.modal.fade .modal-dialog {
    transform: translate(0px, -25%);
    transition: transform 0.3s ease-out 0s;
}
.modal.fade.in .modal-dialog {
    transform: translate(0px, 0px);
}


The "fade" class is really there to allow the animation effect to be optional. Since I always want to have my fly over animate in and out of the view, I will add the transition directly to the main class definition:


.flyover {
   left: 150%;
   overflow: hidden;
   position: fixed;
   width: 50%;
   opacity: 0.9;
   z-index: 1050;
   transition: left 0.6s ease-out 0s;
}

.flyover-centered {
   top: 50%;
   transform: translate(-50%, -50%);
}



Notice that the transition is on the "left" property and the panel will start at 150% which will be off the screen. Also note that I used fixed positioning so it won't matter where you are scrolled on the page, the fly over will always be positioned the same and in view. Finally, split out the main fly over class from the positioning and used a centering trick I found to position the element properly on the page. I did this so I could define other positioning classes in the future as I needed them. Once that is done, I can define the "in" class to change the "left" property to 50% which will show it centered on the screen:

.flyover.in {
   left: 50%;
}


Since the transition is defined, it will animate into view. Now I can add the flyover class to the jumbotron class to modify it for the effect:



The only Javascript required is to toggle the class on and off:


   $('#message1').toggleClass('in');





The advantage of this technique is the minimal amount of Javascript required to make it work. Obviously, the disadvantage is that it only works completely in newer browsers. It will still appear in older browsers - you just don't get any animation and the centering trick won't work in older IE versions resulting in an off-center placement.

You can take this further by adding alternatives for alert colors instead of the basic gray. Additionally, you could style it to be fixed to the bottom, top, or anywhere on the page. Here's an example of using the alert component mixed with the flyover to show important information briefly on the screen. I added another class to move the alert to the bottom of the screen as well:

.flyover-bottom {
   bottom: 10px;
}




You can see its pretty easy to complement the already great work done in Bootstrap. By sprinkling a few classes here and there you can take existing components with an already define look and feel and create other variations for different uses.