JQuery Blog Posts

Animated Filtering & Sorting with MixItUp jQuery Plugin

16 February 2015
1240 Views

MixItUp is a jQuery plugin providing animated filtering and sorting. It is great for managing any categorized or ordered content like portfolios, galleries and blogs, but can also function as a powerful tool for engaging application UI and data-visualisation.

MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts. Rather than using absolute positioning to control layout, MixItUp is designed to work with your existing inline-flow layout. Want to use percentages, media queries, inline-block, or even flex box? No problem.

Animated Filtering & Sorting with MixItUp jQuery Plugin

Make Magical Scroll Interaction with Scroll Magic Plugin

16 February 2015
1006 Views

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar. It’s the plugin for you, if you want to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, pin an element at a specific scroll position (sticky elements).

You can easily add a parallax effect to your website with ScrollMagic. You can call functions when the user hits certain scroll positions or react in any other way to the current scroll position. ScrollMagic aims to support all major browsers in recent versions: Firefox 26+, Chrome 30+, Safari 6+, Opera 19+, IE 9+.

Make Magical Scroll Interaction with Scroll Magic Plugin


Creates Table with Infinite Scroll using Fattable

16 February 2015
1008 Views

Fattable is a javascript Library to create table with infinite scroll, with infinite number of rows and number of columns. Big table don’t do well with DOM. Your scroll will start getting choppy. Also big tables can rapidly grow in sizes. It is not always possible to have clients download or even retain all of the table data.

Fattable includes everything required to load your data asynchronously. The design is up to you. Style the table via css and use your painter to hook up events, and render your content in your cell.

Creates Table with Infinite Scroll using Fattable

Sticks Elements to the Top with Stickup jQuery Plugin

02 September 2014
1632 Views

Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

Although stickUp was made to work on any kind of website, it was originally designed for the “one-pager” style of websites. By using CSS the sticky navigation menu item will be highlighted as it’s correlating content is crolled in and out of view.

Sticks Elements to the Top with Stickup jQuery Plugin

CLNDR - A jQuery Plugin for Creating Calendars

26 August 2014
1158 Views

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can’t-it-do-what-I-want scenarios.

CLNDR is a jQuery calendar plugin. Unlike most calendar plugins, CLNDR doesn’t generate markup. Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.

CLNDR - A jQuery Plugin for Creating Calendars

Automatic Progress Indicator for Your Page Load

26 August 2014
1222 Views

Include Pace.js and the theme css of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. You can choose the color, and the effects like Minimal, Flash, Barbar Shop, Mac OSX, Fill Left, Flat Top, Big Counter, Corner Indicator and Bounce.
Automatic Progress Indicator for Your Page Load

Transform Your Website into One Page Scroll Website

26 August 2014
943 Views

One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers. For example, Apple’s iPhone 5S website uses the same technique.

You can customize the animation timing, the selector or even the animation easing using CSS3. Don’t forget to grab them for free on Github. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.

Transform Your Website into One Page Scroll Website

FancySelect – A Better Select Box for Web Developers

26 August 2014
1399 Views

FancySelect is a better select for discerning web developers everywhere. FancySelect is easy to use. Just target any select element on the page, and call .fancySelect() on it. If the select has an option with no value, it’ll be used as a sort of placeholder text. By default, FancySelect uses native selects and styles only the trigger on mobile devices.
FancySelect – A Better Select Box for Web Developers

Hide & Reveal Password Input Field with jQuery Plugin

22 August 2014
1080 Views

It’s easy to take the “masking” of passwords for granted. This practice increases login failures while providing little-to-no security benefit. Life’s too short to waste time re-typing passwords.

Hide/show Password plugin lets you easily hide and reveal the contents of a password input field. The coolest part about this plugin is the “innerToggle” option. When true, it will create a nifty hide/show control you can style as you like. It even maintains the input focus when tapped in a touch browser.

Hide & Reveal Password Input Field with jQuery Plugin

jQuery Plugin to Create 360 Degree Image Slider

22 August 2014
1291 Views

ThreeSixty Image Slider Plugin is a jQuery plugin to create 360 degree product image slider. The plugin is full customizable with number of options provided. The plugin have the power to display images in any angle 360 degrees. This feature can be used successfully in many use cases e.g. on an e-commerce site to help customers look products in detail, from any angle they desire.
jQuery Plugin to Create 360 Degree Image Slider