JQuery Blog Posts

Top Drawer - jQuery Dropdown Menu for Responsive Design

22 August 2014
1171 Views

Top Drawer is a smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.

Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters the translate value to bring it into view. Modernizr will detect whether the user’s device is capable of CSS transforms, if it isn’t we simply show and hide the menu after the button is pressed – no point in animating if it isn’t going to work smoothly.

Top Drawer - jQuery Dropdown Menu for Responsive Design

A Fully Responsive & Lightweight jQuery Dateinput Picker

22 August 2014
1066 Views

Pickadate.js is a fully responsive and lightweight jQuery dateinput picker. It looks pretty neat and simple. It is easy to use. And alos, you can have different themes for it as well.

It has been tested on IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser. The pickadate.js script supports all modern browsers and IE 9+. To support IE 7+ and other old browsers, include pickadate.legacy.js instead. It is released under MIT License.

A Fully Responsive & Lightweight jQuery Dateinput Picker


Flexible & Good-Looking Share Button jQuery Plugin

25 February 2014
1835 Views

All the major social networks have their own share buttons but they are slow-loading, and inject a lot of extra javascript onto your page that’s not needed which makes your page slower. They don’t look sexy and fit nicely with your site like you want, and you can’t change how they look.

Share Button is a simple, light, flexible, and good-looking share button jquery plugin. It doesn’t load any iframes or extra javascript and overall load time is tons faster. It looks simple and clean by default, and can be customized in any and every way. It’s tiny and compact, expanding only when the user actually wants to share something.
Flexible & Good-Looking Share Button jQuery Plugin

How to Create a Justified Gallery with jQuery

11 February 2014
1571 Views

Justified Gallery is a jQuery plugin that allows you to create a high quality justified gallery of images. Fill all the spaces. It automatically align images to a justified gallery keeping their original aspect ratio.

The plugin is based on the concept that you have various thumbnails for a single image. In fact, you can configure the gallery to show your images in different sizes, and also the plugin may decide to resize some images to fill the remaining empty space. Hence, the plugin needs thumbnails with different sizes to guarantee high quality pictures.
How to Create a Justified Gallery with jQuery

OriDomi Folds Up DOM Elements Like Paper

16 January 2014
1568 Views

The web is flat, but now you can fold it up. OriDomi is an open source JavaScript library that folds up DOM elements like paper. OriDomi does plenty of DOM manipulation behind the scenes to create what you see. OriDomi compositions adapt to dynamic dimensions just as well as normal elements. This means that if your OriDomi composition’s size is changed by percentage-based sizing, media queries, CSS transitions, scripting, et cetera, the panels will resize themselves relative to their parent container. OriDomi requires a modern browser with support for CSS3 transforms, particularly preserve-3d support. You may notice that OriDomi looks significantly worse in Firefox compared to WebKit browsers.
OriDomi Folds Up DOM Elements Like Paper

A Simple & Lightweight Dashboard jQuery Plugin

16 January 2014
1975 Views

sDashboard is a simple & light weight dashboard jQuery plugin that converts an array of objects into a dashboard. Each object in the array would be rendered as a dashboard widget that can be rearranged by dragging around.

sDashboards has built in support for rendering datatable’s and flotr2 charts. It also has support to listen for events such as table row click, chart data click and data selection built-in. sDashboard depends on the following libraries: jQuery, jQuery UI, Datatables and Flotr2 charts (required for charting widgets).
A Simple & Lightweight Dashboard jQuery Plugin

A Handy CSS3 Animation Cheat Sheet

04 October 2013
1997 Views

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10). Using CSS3 @keyframes, you don’t have to worry about positioning the element to accomodate the animations – it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn’t trigger.
A Handy CSS3 Animation Cheat Sheet

Creative and Modern Button Styles and Effects

14 June 2013
2092 Views

Codrops has shared some Creative Button Styles for our inspirations. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.
Creative and Modern Button Styles and Effects

Create Modal Windows with PopEasy jQuery Plugin

09 June 2013
2052 Views

PopEasy is a light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window. To use multiple modals on one page, you must sync the href attribute of the trigger to the id of the div you wish to open. This works the same with transitioning from one open modal to another. Just place a link in the modal you wish to leave with an href attribute matching the id of the next modal.
Create Modal Windows with PopEasy jQuery Plugin

Add Conversations to Any Site with Moot Forums

20 May 2013
2852 Views

Moot is a radically different discussion platform, unencumbered by the weight of unnecessary features and distractions. It places the conversation back to the forefront. Clean user interface, persistent content and deep integration into the site will allow a more natural and meaningful discussion to take place. People will focus on topics they care about. You can add conversations to any site with a few lines of HTML. Gorgeous discussions, yours for free.
Add Conversations to Any Site with Moot Forums