Showing posts with label jQuery. Show all posts

20 Fresh jQuery Plugins

20 Fresh jQuery Plugins
The jQuery developer community has to be one of the most wonderful programmers community of hardworking people on the web. They’re constantly churning out amazingly useful and completely free plugins and libraries that they share with anyone and everyone who wants to use them.

jQuery Plugins are very useful for designers & developers. jQuery plugins can save lots of time on any web or mobile apps project. I really thankful to jQuery Developers who give us fresh plugin day by day which are really helpful to make web apps more effectively and friendly.

AnimatedScroll: jQuery Plugin for Animating Scroll

AnimateScroll is a beautiful jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.
jQuery Plugin for Animating Scroll

Echo.js: Simple JavaScript Image Lazy Loading

Echo.js is a simple image lazy loading library, it’s less than 1KB minified. Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute.
Echo.js: Simple JavaScript Image Lazy Loading

Multi-Level Push Menu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
Multi-Level Push Menu

jQuery Flat Shadow: Create Long Shadows Flat UI

Long shadow effects are widely used to create a depth for any element in flat design. jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted.
jQuery Flat Shadow - Create Long Shadows Flat UI

tidyTime.js: Display More Friendly Time with jQuery

tidyTime.js takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6″ and more. By adding additional text before and after the time you are able to create powerful friendly interaction with users.
tidyTime.js: Display More Friendly Time with jQuery

Taggd: jQuery Plugin to Tag Images

Taggd is a jQuery plugin that help you create tags on images with, or without a popup!
Taggd: jQuery Plugin to Tag Images

UIKIT: Lightwight Front-end Framework

UIkit is a front-end framework, built by YOOtheme, for creating cross-browser and responsive layouts faster. It is lightweight, has a modular structure and uses LESS for styles + jQuery for the JavaScript.
UIKIT: Lightwight Front-end Framework

slimMenu: Multi-Level Responsive Menu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. It converts an unordered list with any depth into a menu with sub-menus and, for smaller screens, the menu becomes a drill-down navigation. It istouch-friendly and has several options for customization like the animation or its speed.
slimMenu: Multi-Level Responsive Menu

Tabulous.js: Create Tabs with Effects

Tabulous.js is a lightweight jQuery plugin that simplifies creating them with a plain HTML structure. The tabs created can be styled with CSS and multiple switching effects exist (slide, scale, scale up and flip).
Tabulous.js: Create Tabs with Effects

Owl Carousel: Touch-Enabled and Responsive Carousels jQuery Plugin

Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup.
Owl Carousel: Touch-Enabled and Responsive Carousels jQuery Plugin

Summernote: WYSIWYG Editor on Bootstrap

Summernote is a super simple WYSIWYG editor on Bootstrap. It’s open source and easy to install. Lightweight (Summernote: 30Kb), Smart User Interaction, Customize by Initializing options, Safari, Chrome, Firefox, Opera ,Internet Explorer 9+ (IE8 support coming soon)
Summernote: WYSIWYG Editor on Bootstrap

flipLightBox: Responsive Lightbox jQuery Plugin

flipLightBox is a responsive Lightbox that is extremely easy to implement and doesn’t require additional stylesheets, scripts or libraries.The coolest feature of flipLightBox is that it has optional flip effect as each lightbox image opens and closes.
flipLightBox: Responsive Lightbox jQuery Plugin

jquery.arbitrary-anchor.js: Smooth Scrolling For Any Element On Page With jQuery

With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.
Smooth Scrolling For Any Element On Page With jQuery

Minified.js: Lightweight JavaScript Library

Minified.js is a very strong alternative to these frameworks and it comes with an impressive size, less than 4kb minified. Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.
Minified.js: Lightweight JavaScript Library

RTP.Slider.js: Touch Enable and Responsive Slider Plugin

RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.
RTP.Slider.js: Touch Enable and Responsive Slider Plugin

Tabby: Lightweight and Mobile First Toggle Tabs

Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It’s style-light so you can easily modify it to fit your design.
Tabby: Lightweight and Mobile First Toggle Tabs

Sticky-Kit: jQuery plugin for Making Smart Sticky Elements

Sticky-Kit is a very handy jQuery plugin that simplifies creating/managing such sticky elements and comes with features for complex use.
Sticky-Kit: jQuery plugin for Making Smart Sticky Elements

S Gallery: Responsive jQuery Gallery Plugin with CSS3 Animations

S Gallery makes use of HTML5′s FullScreen API, and relies heavily on CSS3 animationsgoodness and CSS3 transforms, so it will work only in browsers that support these features. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.
Responsive jQuery Gallery Plugin with CSS3 Animations

On Scroll Effect Layout: Beautiful Scroll Effects

An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.
On Scroll Effect Layout: Beautiful Scroll Effects
Wednesday, 21 August 2013
Posted by Magnus

15+ Cool jQuery Scrollbar Plugins

Bored with the look of standard scrollbar of your website? with jQuery scrollbar you can transform it into a more attractive design. You can also use some pure CSS scrollbar if you don’t like to use jQuery plugins on your website.


1. jQuery Scroll Path


More Details

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

 2.Perfect-scrollbar


More Details

3. ClassyScroll


More Details

jQuery ClassyScroll can be used not only as replacement of native browser scrollbars, but you can use it even to create slideshows with external controls.

4. RollBar – jQuery ScrollBar Plugin


More Details

RollBar Responsive plugin can be used not only as replacement of native browser scrollbars, but you can use it even to create slideshows with external controls.

5. jQuery slimScroll


More Details

slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar.

6. jScroll: Stylable jQuery Scrollbar


More Details

jScroll is a stylable scrollbar built using the jQuery JavaScript framework. At only ~8kb, it is both lightweight and packed full of features.

7. VenScrollBar


More Details

VenScrollBar is a jQuery plugin that allows web designers to replace the ugly, default OS scrollbar with custom ones that they create.

8. Nicescroll


More Details

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.

9. jQuery custom content scroller


More Details

Custom scroll bar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support, scrolling buttons, scroll inertia with easing, auto-adjustable scroll bar length, nested scroll bars, scroll-to functionality, user defined callbacks and much more.

10. jScrollbar


More Details

jScrollbar is fully skinnable with CSS (you can use images instead) and can detect mousewheel event.

11. DZS Scroller


More Details

DZS Scroller jQuery is the ultimate scrollbar for your site which you can customize very easily via CSS if the 3 skins.

12. ShortScroll – A jQuery UI Google Wave style


More Details

13. liimeBar


More Details

LiimeBar is a jQuery plugin which removes the default browser scroll bar and replaces it with a sleek and modern.

14. Scrollbar for a DIV


More Details

15. Easy Scroll jQuery Plugin


More Details

This easy scroll application was made to simplify your work and save you time in developing any kind of web template or application, it can be easily inserted in any context and has a wide range of parameters that can make your scrolling unique.

16. Tiny Scrollbar


More Details

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library.

Thursday, 23 May 2013
Posted by Magnus

40 Awesome jQuery Plugins You Need to Check Out

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

Scrolling

jQuery Waypoints

Waypoints allows you to easily trigger JavaScript events at specific scroll points. Ever wonder how people build those amazing scrolling effects? This could be your answer.

skrollr

Parallax scrolling for the masses. Skrollr helps you with all kinds of different scrolling effects including transforms, color shifts and more.


Charts, Animations & Tables

Handsontable

A minimalistic approach to an Excel-like table editor in HTML & jQuery. The result is quite impressive, you should definitely give it a shot if you’re looking to build an interactive spreadsheet.

jQuery Sparklines

jQuery Sparklines helps you build little inline charts that are supplied with information via HTML or JavaScript.

Teamwork Gantt

Build incredible Gantt charts with jQuery. Seriously impressive for a free tool.

DataTables

A jQuery plugin for creating impressive, highly functional data tables. Multi-column sorting with data type detection, smart handling of column widths and more.

arbor.js

Build crazy looking, futuristic, animated and modular graphs. Really cool stuff.


Layout

Wookmark jQuery Plugin

Easily build a Msonry-like layout like the one seen on Wookmark.

jQuery Masonry

The original jQuery Masonry. Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

Isotope

An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered.

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

gridster.js

Gridster is a really amazing plugin that allows you to create flexible grid layouts that can be rearranged via drag and drop. You should definitely try this one.

Freetile.js

Another plugin for masonry-style layout. It allows for any size of elements to be packed without using a fixed-size column grid, so you don’t have to worry about specifying a column width appropriate to the size of your elements.

Text

jQuery TextExt Plugin

TextExt is a plugin for jQuery designed to provide functionality such as tag input and autocomplete. According to the developer, it was built on two main values: modularity and extensibility.

Jeditable

Jeditable allows you to set certain HTML elements to be editable by the user. You can even set up different types of events to trigger editing capabilities: hover, click, double click, etc.

FitText

A plugin for inflating web type. It actually makes it possible to have text that resizes with the viewport. Extremely useful for responsive web design.

Cool UI

jQuery Knob demo

This plugin allows you to create really cool circular knobs that spin or fill up as you scroll.

noty – A jQuery Notification Plugin

Noty is a jQuery plugin that makes it easy to create alert, success, error, warning, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

PageSlide

This plugin helps you build a hidden, slide-in sidebar that contains pretty much anything you want it to.

jQuery Collapse

“This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.” That’s fancy-speak for a plugin that allows you to make content collapsable.

Avgrund

Awesome and simple modal boxes with a really cool page animation effect.

jQuery One Page Navigation

Smooth scrolling navigation and animation for single page sites. Super simple, incredibly handy.

jqPagination

A great little pagination plugin. Instead of displaying a list of page numbers like traditional pagination methods, jqPagination uses an interactive ‘Page 1 of 5′ input that, when selected, allows the user to enter their desired page number.

jQuery Joyride Feature Tour Plugin

This plugin is from ZURB, which is really all the info I need to know that it’s great. It helps you build little callouts that walk users through the features on your site one step at a time.


Tooltips

jQuery PowerTip

A fairly robust and powerful jQuery tooltip plugin with plenty of options.

tipsy

Another great tooltip plugin. This one is loosely based on giving you the ability to create Facebook-style tooltips.


Slideshows, Images & Sliders

jQuery Slider Shock

A notably complete responsive jQuery / WordPress slider, with a wealth of options, settings, styles and functionality. Very well documented too!

Backstretch

Backstretch creates dynamically-resized, slideshow-capable background images for any page or element.

jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

jQuery Lightbox

A simple lightbox based on prototype and scriptaculous.

FlexSlider 2

FlexSlider is a responsive image slider from WooThemes with awesome features like multi-directional slide animations, semantic markup, touch support and the ability to include any HTML as a slide.

ColorBox

Another simple lightbox plugin. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

WOW Slider

Literally one of the best, most powerful and fully featured sliders on the web. It’s responsive, has lots of different transitions and is packed with everything you could need. Go get it.


Miscellaneous

Timeago

Quick, easy and auto-updating timestamps for jQuery. Example: About one day ago.

jQuery Validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

jQuery File Upload Demo

A pretty robust file upload plugin for jQuery. Multiple file selection, drag&drop support, progress bars and preview images for jQuery.

jQuery Instagram

Want to show an Instagram feed on your web page? With this little tool, you can.

jQuery Shadow Plugin

Easily add all kinds of different shadows to your HTML elements. Each shadow takes very little code to implement.

Naked Password

This one is ridiculous and potentially offensive, and a little hilarious. To encourage users to implement strong passwords, there’s a little, cartoony and non-detailed illustration (think NES) of a man or woman who gradually undresses as your password strength increases.

MotionCAPTCHA

I hate mangled-word CAPTCHAs so much that I wrote an article about why we should kill them. This plugin provides a unique alternative that allows the user to bypass security by drawing shapes.

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery. Rotate, perspective, skew, scale and more.


What Did I Miss?

There you have it, 40 outstanding jQuery plugins for everything from scrolling effects to charts and beyond. Leave me a comment below and tell me about the great plugins you’ve discovered, or better yet, built, lately. Be sure to leave a link so everyone can take a look.
Wednesday, 15 May 2013
Posted by Magnus

- Copyright © Bjonk Design -