Archive for March, 2015

14 Top Calendar and Date Picker jQuery Plugins

Calendar and date interfaces are widely used among developers and is one of the most important parts of web designing. Building a website using these open source jQuery plugins is really simple. Here are 14 of the top calendar and date picker jQuery plugins for web designing:

1. FullCalendar

This jQuery plugin provides an interactive atmosphere by offering drag and drop function. It also provides optional connectivity with Google Calendar.

best-jquery-calendar-plugins

2. CLNDR.js

This plugin provides specific details and dates that make it the dynamic event viewer. This plugin is easy to match or fit any website and is responsive (every screen size) too.

best-jquery-calendar-plugins

3. Simple Event Calendar

With Simple Event Calendar, visitors can read every event through bots or crawlers, as they are coded into HTML. It also provides a clean design for a compatible interface.

best-jquery-calendar-plugins

4. Zabuto Calendar

This jQuery plugin has traditional CSS classes which lands it on the top of Bootstrap. You can pull external data through AJAX or JSON.

best-jquery-calendar-plugins

5. e-Calendar

The content contained in this calendar is managed by JSON. This plugin also offers the date and time for individual events. You can also navigate easily to previous and future months.

best-jquery-calendar-plugins

6. GoogleCalReader

Google Calendar provides developers with quick API connection and pre-built structural elements.

best-jquery-calendar-plugins

7. jQM Calendar

This is the best full screen calendar for a jQuery mobile. The content and themes for events are easily customized.

8. glDatePicker

With this plugin, developers are offered a wide number of custom options. One brilliant feature of this jQuery plugin is that it offers navigation to limited months.

best-jquery-calendar-plugins

9. Pickadate.js

Pickadate.js has simple JavaScript initiation.

10. DateTimePicker

With DateTimePicker, developers can access different formats of date and time all with a single line of code (JS code).

best-jquery-calendar-plugins

11. Timepicker

This plugin provides more features with time, including duration. It also supports a number of formatting styles for you to choose from.

12. Datepair.js

This jQuery plugin is mainly built for selection among two date time periods. Apart from jQuery this plugin can also work on Zepto and Bootstrap.

13. Rome

This plugin supports almost every browser, as old as IE7. It provides both date and time pickers in one window.

best-jquery-calendar-plugins

14. PickMeUp

You can select multi-dates as a separate entity or as a range with this plugin. PickMeUp also offers many configuration options (like multi-month interface) which changes the experience of the user.

best-jquery-calendar-plugins

15 Top jQuery Chart Plugins for Developers

Graphics in programs like Photoshop can be created both statistically and dynamically. Creating graphics using statistical methods is a bit difficult when compared to dynamical methods. Here are the few jQuery chart plugins that will help you generate charts or tables:

1. Dynatable.js

Dynatable is a interactive table plugin that uses HTML5, jSON and jQuery.

best-jquery-chart-plugins

2. Chartist.js

With this jQuery plugin developers can generate customizable responsive charts.

best-jquery-chart-plugins

3. HighchartTable

Using this jQuery chart plugin developers can automatically convert HTML tables (which contain data) into graphs. HighchartTable jQuery plugin is simple to use, as no extra efforts are required.

best-jquery-chart-plugins

4. Bootgrid

jQuery Bootgrid is sleek and intuitive. It is a control designed for bootstrap.

best-jquery-chart-plugins

5. Pizza Pie Chart

Using this jQuery chart plugin developers can create pie charts representing pizza, which is different and attractive.

best-jquery-chart-plugins

6. jqTimeline

This jQuery Timeline plugin is a simple plugin which displays a set of dates or events in a timeline.

7. Scatterplot.js

Using this jQuery chart plugin develperrs can create scatter plot charts.

best-jquery-chart-plugins

8. jsPlumb

This jQuery plugin provides a path for web developers to connect elements visually on their web pages.

best-jquery-chart-plugins

9. ReStable

ReStable is a lightweight jQuery chart plugin (1 Kb). This plugin makes tables responsive by collapsing them in the ul lists.

best-jquery-chart-plugins

10. Peity

It is a simple jQuery plugin that converts the content or data into simple donut, pie, line and bar chart. This jQuery chart plugin is supported by almost every browser.

11. jqPlot

jqPlot is a versatile charting and plotting plugin that provides beautiful bar, line, pie and other charts.

best-jquery-chart-plugins

12. JavaScript InfoVis Toolkit

With this plugin, Interactive Data Visualizations can be created for the web.

best-jquery-chart-plugins

13. Sheetrock

This jQuery plugin is used for displaying, querying and retrieving data from Google Spreadsheets.

14. jChartFX

With this jQuery plugin developers can create commercial dashboards and business intelligence applications.

best-jquery-chart-plugins

15. Chart.js

This jQuery chart plugin provides web developers and designers with clean, simple and engaging charts.

Top 15 jQuery Plugins for Website Designers

jQuery is the first choice for website designers because it is simple to use and has plenty of benefits and features. jQuery plugins enhance the front-end user experience to an entire new level. With jQuery , designers can change the font style, borders, background images, color contrast, and add animations, music or videos. Here are the top 15 best jQuery Plugins web developers can use:

Read the rest of this entry »

Create a Simple Popup Window HTML5 Dialog Tag

In this tutorial, We’ll see how easy it is to create dialogs using the <dialog> tag.
Modal dialogs (also known as dialog boxes) are pop-ups that open within your website or application. Pop-ups are used frequently on websites, such as a confirmation box asking you if you want to close a tab in a browser. These modal windows are some of the most common UI elements that we can find in websites. Oftentimes, we use jQuery plugins like jQuery UI Dialog, Twitter Bootstrap Modal, or Foundation Modals to create a dialog box. But recently, HTML5 has introduced a new tag called <dialog> that allows us to create a native modal window in an easier way. The only thing to keep in mind, however, is that the <dialog> tag is only supported by Google Chrome, Safari and Opera browsers. IE and Firefox still don’t support the

tag.

Setting The HTML Markup:

<dialog id="window">  
    <h3>Sample Dialog!</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>  
    <button id="exit">Close Dialog  
</dialog>  
<button id="show">Show Dialog</button>  

Using the HTML markup above, the dialog will start in a hidden state, and given the above HTML structure, we will only see the Show Dialog button. To show the dialog window we can use its JavaScript API .show(), and use .close() to hide it. We can achieve that doing the following:

jQuery:

(function() {  
    var dialog = document.getElementById('window');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('exit').onclick = function() {  
        dialog.close();  
    };  
})();

Clicking on the show dialog button will show the dialog box in the middle of the browser window. You probably noticed that the dialog looks so dull and unattractive.

Dialog1

The good news is that we can style that dialog using normal CSS, and that’s what we’re going to do now!:

dialog {  
    width: 500px;  
    background:#e8e8e8;
    border: 1px solid #dadada;
    font-family:sans-serif;
    padding: 5px 10px 20px 20px;
}  

Using the very simple CSS above we were able to achieve a better looking dialog box as shown below:

Dialog2

Another interesting thing about the dialog element is that it will soon support a new pseudo-element called ::backdrop. It is used to style that typical dim background that we commonly find behind a dialog window. It lets visitors focus more on the dialog and hide everything else behind it.

Wrapping Up:
That’s it! We’ve created a popup dialog without plugins using only HTML and very simple Javascript. Because HTML has evolved so much in the last couple of years, it’s no longer only for constructing a web page. We can even build interactive UI with new HTML elements like

. I hope you enjoyed this quick tutorial.

You can also check the working example here.