Collapse.JS creating a dropdown icon on panel heading

Standard

By default Bootstrap 3 comes integrated with CollapseJS which offers expandable accordion like panels. These panels are very simple to setup and work great. However, since the font is uncolored it may not be obvious to some users that this panel expands.

Not collapsible

Not user friendly

Using pure CSS a dropdown icon can be placed on all panels that you create. The css places the icon after the link, and switches the icon to a down arrow once the panel has been expanded.

The CSS


The result

appearscollapsible

Appears to be collapsible

 

The result is a more user intuitive collapsible panel. The main difference between using the Primefaces collapsible panel and the bootstrap js version is data accessibility. Primefaces will call a ajax event once the panel is to be rendered. Whereas CollapseJS will have already loaded the data from the backend bean. This may require you to update at the prerendered content manually, but the benefits of self managing the panels far outweighs the negatives.

HTML5 input type=”date” with javascript fallback

Standard

HTML5 brings great new features which will ease development. However, currently there is a gap between browsers that support HTML5 attributes and those who do not. As of October around 60% of desktop browsers and 80% of mobile devices are HTML5 compliant. This means developers still need support the additional 40% which fallback techniques.

HTML5 date input field

A good example is the new date input field. If your browser is HTML5 compliant it generate a date picker for you to use automatically, thus only requiring the developer to create the input field as so:

If the browser does not support HTML5 then no restriction on the date format will occur. This is why javascript is a beautiful tool.

Providing a fallback

Using a combination of Modernizr, jQuery, and bootstrap-datetimepicker javascript libraries a HTML5 date field can be emulated. Modernizr is a library use for feature detection. It can recognize if the HTML5 date object is available to the browser. If the date object is not available then the bootstrap-datetimepicker will bind to the input and provide a calendar for the user.

The following is the javascript which a datetime picker to the input field below if necessary.

The input field has classes attached that are from the bootstrap 3 library. These libraries add a hint of design to the end result.

Note: In this example I used the bootstrap-datetimepicker library, however any javascript date picker may be substituted in its place. The following libraries were used: bootstrap3, modernizr, momentjs (required by bootstrap-datepicker), and jQuery 2.1.0.

A example of this project can be seen on JSFiddle.

Alert unsaved data before unloading page

Standard

This post looks to solve the classic problem of navigating away from a unsaved form and loosing all your data. This has caused many end users headaches especially if you have a application with many form pages. This solution uses javascript to alert the user when they are navigating away from a page that has unsaved data. It also has the knowledge to unbind the alert when the user has submitting data to the server.

The Solution:

First we begin by declaring our namespace for the functions are are going to define. I have called it “myApp”. After the document is ready I declare my one and only function “confirmExitIfModified”. This holds all the logic to determine if the form is dirty. This code needs to be included or referenced at the top of your page.

A critical part of this code is the ability for it to detect when you are submitting data and not navigating. In the return function there is a for loop that iterates through each of the forms. It then binds to that forms submit event using jQuery. When the form is submitted it terminates the function below that calls the onbeforeunload event. Effectively removing the alert from being called.

Usage:

Place this code at the bottom of your page before thetag. You can add your own custom message.