반응형
반응형

jQuery Nested

For a complete gap free, 
multi column grid layout experience.

 

반응형
반응형
10+ jQuery Sticky Scroll Plugins

 

1. Sticky

A jQuery plugin that gives you the ability to make any element on your page always stay visible.

Sticky.jpg
Source + Demo

2. stickyMojo

A contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

stickyMojo.jpg
Source

3. Sticky Sidebar jQuery plugin

Allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll.

Sticky-Sidebar.jpg
SourceDemo

4. lockfixed jQuery plugin

A jQuery plugin which allows for DOM elements to be positioned anywhere on the page, and lock within the user’s viewport when scrolling.

LockFixed.jpg
SourceDemo

5. stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs.

StickyFloat.jpg
SourceDemo

6. Sticky Footer

This Sticky Footer can contain any kind of content and is ready to be used in your website. You can build your own menu and use from 1 to 12 columns to display your content.

StickyFooter.jpg
SourceDemo

7. Sticklr

Sticky Side Panel CSS3 + jQuery Plugin

Sticklr.jpg
SourceDemo

8. fixedposition

A powerful CSS attribute, that allows you to fix a HTML element to a position on the page, irrespective of user interaction. Put simply, if the user scrolls, it stays put.

FixedPosition.jpg
Source + Demo

9. jQuery Sticky Sidebar

Sticky sidebar for your content.

jQuery-Sticky-Sidebar.jpg
Source + Demo

10. jquery.fixer.js

Fix element like any other plugins it do.

jQueryFixerjs.jpg
Source + Demo

11. StickyScroll

A jQuery plugin for creating elements that ‘stick’ to the top of the window when scrolling down the page.

StickyScroll.jpg
SourceDemo

12. Sticky-Element

jQuery plugin to make an element scroll with the page inside the boundaries of a specified container or the window.

Sticky-Element.jpg
SourceDemo

반응형
반응형

http://jqueryui.com/slider/#side-scroll

 

jQuery UI

 

jQuery UI Demos


jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own. Play with the demos, view the source,build a theme, read the API documentation and start using jQuery UI today.

Interactions

Interactions add basic mouse-based behaviors to any element. You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines or code. Interactions also make great building blocks for more complex widgets and applications.

Widgets

Widgets are full-featured UI controls that bring the richness of desktop applications to the Web. All widgets provide a solid core with plenty of extension points for customizing behavior, as well as full theming support.

Effects

Effects add support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.

Utilities

Utilities used by jQuery UI to build interactions and widgets.

반응형
반응형

Collection of jQuery Drag and Drop Plugins

http://smashinghub.com/collection-of-jquery-drag-and-drop-plugins.htm

 

You May Like This Responsive jQuery Slider Plugins, jQuery Carousel Plugins, jQuery Parallax and Scrolling Effect Plugins, Zoom Effects with jQuery Plugins, jQuery Visual Effects Tutorials, Awesome jQuery Plugins and jQuery Tools/Tricks

 

Collection of jQuery Drag and Drop Plugins

jquery.event.drag

jquery.event.drag

jquery.event.drag is an awesome jQuery special event plugin which lets you add sophisticated drag interactions to any of the elements! Great, right?

How to mimic the iGoogle Interface

How to Mimic the iGoogle Interface

Everyone loves iGoogle interface and wants to imitate it. This one is a great tutorial in which you will be taught creating customizable iGoogle like interface with widgets. It is a really easy to follow tutorial and anyone can learn from it.

PPDRAG

PPDRAG

This one is a great plugin which imitates the interface of jQuery UI’s Draggable. Presently small subsets of its options are supported.

Resizable

Resizable

Resizable is a handy plugin which has the ability of resizing rectangles with content with ease.

Jquery Iviewer

Jquery Iviewer

It is a jquery UI widget which represents photo component which is used for loading and viewing photos. It allows zooming in a photo and dragging it to the container using your mouse.

Drag’n Drop With jQuery And PHP

Drag’n Drop With jQuery And PHP

Applying drag and drop was once very tough, but now thanks to JavaScript frameworks it is not that tough. Here it is given how you can do it using jQuery & jQuery UI.

MapBox

MapBox

This jQuery plugin lets you create small scale, zoomable, draggable maps with multiple layers of content. Applying the Framework to games, development plans, or any other layout is possible.

Table Drag and Drop JQuery plugin

Table Drag and Drop JQuery plugin

Making the rows within a table drag and drop is not an easy task and cannot be achieved through the usual drag and drop tools for many reason, such as the need to move the complete row and not only the cell which gets the mouse events. You are also required to have a certain code for re-parenting a row. Unfortunately the effects such as fade In/fade Out are not very compatible with table rows on all browsers, thus we are required to choose simpler effects.

Dragscrollable

Dragscrollable

This fabulous plugin allows mimicking the effect as in Google maps i.e., dragging the contents of a div acting as a viewport. Simple, yet amazing!

Interface plugin for jQuery

Interface plugin for jQuery

This plugin boasts a collection of amazing interface components that uses the JavaScript library jQuery. Using this plugin you can create web apps and interface with ease.

Draggable

Draggable

This one is a simple plugin which simply does what its name says: it allows making chosen elements draggable by mouse.

jQuery: Customizable layout using drag and drop [Examples]

jQuery Customizable layout using drag and drop

This one shows how and where the things would be positioned after being dropped..

NestedSortable

NestedSortable

This one lets you sort vertically and nest elements simultaneously by utilizing drag and drop. You can set it up like a regular Sortable. It allows using most of its options.

animaDrag

animaDrag

animaDrag is a fabulous plugin which is quite small. This drag and drop plugin is not dependent on the jQuery UI framework. Using this plugin you can ease the draggable by jQuery animation.

Ajax Upload; A file upload script with progress-bar, drag-and-drop

Ajax Upload- A file upload script with progress-bar drag-and-drop

This is a really nice plugin which utilizes XHR in order to upload multiple files with progress-bar

jqDnR

jqDnR

jqDnR is a really tiny jQuery plugin which allows dragging, dropping, and resizing elements easily.

(mb)ImgNavigator

(mb)ImgNavigator

This one offers a photo gallery which lets you view large photos by utilizing a navigator map and drag. Dragging the large photo in the display by the navigator or the photo itself is also possible.

Sortable Lists

Sortable Lists

This one is a really nice script which lets you rearrange a list by dragging and dropping.

Drag-and-Drop with jQuery: Your Essential Guide

Drag-and-Drop with jQuery Your Essential Guide

If you want to learn using jQuery, jQuery UI Draggable and Droppable plugins, then you should definitely check this one out. It also teaches creating drag-and-drop interfaces for your web pages. It also boasts a drag and drop card game example!

Ultra small code to drag everything in HTML pages

Ultra small code to drag everything in HTML pages

This one is a really simple and and quick script which you can use and customize.

$.event.special.drag

$.event.special.drag

As the name suggests, this one is a jQuery special event implementation of a drag event model. Developers who don’t want a complex script with a lot of different options will find this one really useful. It makes managing drag events easy as it takes care of the DOM events after you have bound a “drag” event handler, and it triggers other handlers at the right time.

jQuery mb.containerPlus

mb.containerPlus

This one is an amazing plugin which allows creating full featured containers. You can set the container to be draggable, resizable, collapsable and minimizable.

CropZoom

CropZoom

As the name suggests, this plugin allows cropping a selected part of a photo. Zooming in or zooming out, dragging or rotating a photo is possible too.

jQuery TextAreaResizer plugin

jQuery TextAreaResizer plugin

As the name suggests, this plugin lets you extend the text area where ever you want!

jQuery List DragSort

jQuery List DragSort

This one is a handy little plugin that allows sorting lists by dragging and dropping.

 

반응형
반응형

13 Very Useful jQuery Modal Plugins

http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html

 

Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Simple Modal

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content. SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

Lightview

Lightview was built to change the way you overlay content on a website.

jQuery.bPopup.js

bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

LeanModal.js

Bare bones modal dialog windows.

jQuery SuperBox!

jQuery Superbox! is a script which allows you display windows with the lightbox effect.

Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

Reveal: jQuery Modals Made Easy

Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it’s fast, sexy and just works. Now let’s see how easy is can be to get Reveal working!

jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

PrettyPhoto is a jQuery lightbox

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

Simplemodal

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.



Read more: http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html#ixzz2Nqjjf8ZL

반응형
반응형

30 jQuery UI Framework Plugins

http://designmodo.com/jquery-ui-framework-plugins/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+designmodo+%28Designmodo%29

jQuery, is it a popular buzzword or an effective JavaScript, what to say and how to define it? Yes, they both add values to the word jQuery. It is a popular JavaScript and a rocking word in the web industry nowadays. jQuery is being used by 40% of the websites nowadays. And, its demand is getting more and more because of its updated and feature content plugins. The functional boundaries are constantly getting pushed forward by the jQuery plugins because of the actual release of new plugins every now and then.

The web designer face the biggest challenge in their life about how to satisfy the customers with their websites and do you say it is not that much tough to make it possible? You can’t because you might have experienced the same. This popular JavaScript library is in the list of most commonly used script libraries that too by most popular websites.

It is needless to say that jQuery plugins increases performance and attractiveness of a blog. So since beginning we have been contributing informative articles about jQuery. We have previously published jQuery scrolling plugins, jQuery plugins for Responsive websites, jQuey plugins and coding techniques and many more. If you are a newbie you may find this guide to jQuery very helpful. In order to help you to find some of the freshest jQuery plugins, we have rounded up a list of 30 amazing jQuery plugins.

turnjs

This JavaScript library will make your web content look like a real time book. It has developed for HTML 5 applications. And, you can expect this to go well with other gadgets like tablets and even Smartphones. It’s a very less space occupying plugin, say something around 15 kilobytes.

dd Slick

It is one another small size JavaScript plugin which will let the users to create a dropdown box in their web pages and the thing is it not only allows the texts as dropdown lists, but also it lets you include images too.

Sparklines

You want to depict some graphs in your web pages? Here you go with this JavaScript plugin. Sparklines will let you create small inline charts. The input data for the charts should be provided through JavaScript or using inline in the HTML.

Slidesjs

As the name suggests, this query will provide you a way for creating a simple slideshow. The slideshow will contain all features like a normal one say the auto play, slide transition effects, fade etc.

Zoomy

Here again the name suggests the functionality of the plugin. This plugin will let you magnify the picture easily and quickly. You should be ready with two copies of the same pictures that you want to zoom.

Spritely

This jQuery plugin deals with creating animation characters and background animations using java script and HTML. It is one another light weight and simple jQuery. Make your website more animated and lively with the help of this plugin.

Hover intent

It’s a plugin where the main goal is to work based on the web user’s intent. It is similar to that of the function of jQuery’s built-in-hover functionality, but expresses some difference in terms of mouse movement.

gMap

You wish to embed the Google maps in your website? Make it possible using this plugin. You can customize it as per your needs and again, the size of this plugin is too small.

Jeditable

A plugin used for editing the contents. This functionality requires very few lines of JavaScript code.

prettyPhoto

If you want to support not only images, but also videos, flash and other image formats, then this plugin will be more useful for you. Almost all of the web browsers will accept this plugin and the setup is too simple.

Ajax fancy captcha

A big challenge for all web owners is to protect their website from bots and spams. And, this plugin helps you with that by providing you the way for creating captcha.

Star Rating plugin

As the name suggests, this plugin is for providing ways to create a rating functionality in your website. You can simply turn out your radio boxes into star ratings with very simple code.

Pagination

When you have so many pages in your website, there you will find this plugin very useful. The users can be easily navigated through pages, if you use this plugin to include page numbers on your website.

Tablesorter 2.0

This plugin will let you sort the tables, if you have any in your website in a sortable format. It is possible to sort even linked data in the table using this plugin.

Fullcalendar

It’s a plugin for developing full customized and useful drag-drop calendar. You can easily customize this calendar as per your needs and requirements. You can use your own feed format for the data for calendar.

Date picker

Selecting particular date ranges is possible with this jQuery plugin. It will provide you a standard form of input field. You will get either a popup or inline calendar with this plugin.

jLy1

Shortened URLs are really useful. Sharing your favourite links to others goes easier with the help of shortened URLs. And, that’s become possible with the help of lLy1 jQuery plugin.

Tocify

You could have seen table of contents in book front page. And, this became more common nowadays in websites too. And, the same can be achieved using this jQuery plugin. It makes user to navigate to the particular content topic or page that they wish to access.

Noty

Create warnings, ideas, errors, alert messages etc. using this plugin. It will be useful for almost all of the website owners because displaying error or warning messages is more needed now for user’s support and convenience.

jScrollbar

Do you have to more content in your website and want to add a customized scrollbar to your webpage? Just get it done through this plugin.

idTabs

You can add tabs to your website using this plugin. You will find similar type of plugins a lot, but this will be more useful and flexible.

Progress bar plugin

The name itself explains that this plugin is used to indicate the progress status of either loading your website or a particular topic or whatever progressing stages it is.

Color picker

The color picker which you will generally see available in photoshop or any photo editors can be added to you website using this jQuery plugin.

qTip

A tooltip plugin, more user friendly and at the same time more feature rich will have lots and lots of useful features. You will get tips in speech bubble format, rounded corner edges format etc.

jqGrid

This plugin will let you insert grids in your webpages or in a particular place in your website. It is possible to toggle between front and back of the webpage.

Kendo UI

Its programming interface, MVVM framework, Data Source, internationalization and many other features makes it the most desirable jQuery plugins for web developers.

Shadow

You can create shadow and drop shadows for images using this jQuery plugin. Such kind of shadow appearing images will generally look appealing and attractive.

Calx

This plugin will be helpful for creating calculation form using JavaScripts. This is the initially released version and lots of development has been made recently.

BackToTop

This phrase you could have seen in almost all of the websites. You may be at the bottom of the website and you can suddenly reach the top using the button ‘Back to Top’.

Autosize

This plugin allows automatic resizing of the text based on the text area space and height. When used this plugin, the text area will grow when the input length grows.

Conclusion

jQuery’s success and popularity is all because of the web development community globally and everyone deserves the full credit for it. It continues to grow more and it is more thriving. Just get informed about all jQueries and be a successful web developer!



Source: http://designmodo.com/jquery-ui-framework-plugins/#ixzz2LxmU3odk

반응형

+ Recent posts