Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas

sábado, 3 de marzo de 2012

All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

All About jQuery: Fresh and Useful jQuery Plugins and Tutorials:



Every designer knows that jQuery is not only a handy tool, but it is also very popular and widely implemented. Thus, they try to master their jQuery skills. If you fit into this category then this post of over 40 fresh and cool jQuery plugins and tutorials is for you. This showcase should allow you to grab some of the techniques required for developing a more interactive and visually appealing website with jQuery and harness the power of this tool.

When you come out the other side of this collection and have finished learning all that these plugins and tutorials throw at you, we hope that using jQuery will be a much simpler task. Which will hopefully translate into more satisfied clients and users. Enjoy!

jQuery Resources


Password Strength Verification with jQuery ( Demo | Tackle the Tutorial )
In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Screenshot

Create a Windows-like Interface with jQuery UI ( Demo | Visit the Source )
In this tutorial, you will learn how to utilize jQuery UI to create a highly-functional user interface without using anything else. By the end, you should be familiar with jQuery UI, some of its components, and basic understanding of jQuery UI’s customization.

Screenshot

Akordeon ( Demo | Visit the Source )
Akordeon is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space. For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category’s data displayed in a separate panel.

Screenshot

Fast and Simple Links Box Navigation Menu: BoxyMenu ( Demo | Visit the Source )
BoxyMenu is a simple and fast navigation menu plugin that renders smoothly in all major web browsers. It is simple to customize and can be plugged in to any website or web application.

Screenshot

Item Blur Effect with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up.

Screenshot

jQuery Clean and Simple Tooltips: Gips ( Demo | Visit the Source )
Gips is a clean and simple jQuery plugin. Fully customizable, and easy to use. It also supports CSS themes.

Screenshot

Fullscreen Image Blur Effect with Html5 ( Demo | Visit the Source )
With this jQuery plugin you can create a fullscreen image display with small thumbnail navigation and a blur transition effect for smooth image changes.

Screenshot

jQuery Plugin for On-demand Search Box: SeacrhMeme ( Demo | Visit the Source )
This jQuery Plugin is called SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website. Clicking on search button expands it to show a text box where you can type your search terms.

Screenshot

Multi-Level Hierarchical jQuery Menu: jQSimpleMenu ( Demo | Visit the Source )
jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menus in your website without writing a single line of code.

Screenshot

Making a jQuery Countdown Timer ( Demo | Visit the Source )
With this jQuery plugin you can display a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates every second.

Screenshot

Awesome jQuery scrolling decks plugin ( Demo | Visit the Source )
A jQuery plugin for making scrolling presentation decks with complete ease.

Screenshot

jQuery List Items Menu Like iPhone Display ( Demo | Visit the Source )
A jQuery plugin that allows you to display list items in a similar way to an iPhone home screen. If the item count exceeds the number of displayed items on one screen, users can swipe through screens.

Screenshot

3D Gallery with CSS3 and jQuery ( Demo | Visit the Source )
With this jQuery plugin you can create an outstanding 3D Gallery with CSS3.

Screenshot

Shiny Knob Control with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a shiny knobbed control, with CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.

Screenshot

Arctext.jp – Curving Text with CSS3 and jQuery ( Demo | Visit the Source )
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Screenshot

jQuery Plugin For Rotating Image ( Demo | Visit the Source )
With this jQuery plugin you can create an amazing rotating image with the simple click of the mouse.

Screenshot

Thumbnail Proximity Effect with jQuery and CSS ( Demo | Visit the Source )
With this jQuery plugin you can create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance.

Screenshot

Creating Your Own Ajax Poll System ( Demo | Visit the Source )
In this tutorial we will be creating our very own polling system (AJAX) for your projects with PHP.

Screenshot

Lateral On-Scroll Sliding with jQuery ( Demo | Visit the Source )
With this jQuery plugin you can create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, now you can have it on yours.

Screenshot

Elastic Image Slideshow with Thumbnail Preview ( Demo | Visit the Source )
With this jQuery plugin you can create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and users can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Screenshot

More on Page Two


We are just about halfway through the post, but don’t move on just yet, there is still more jQuery goodies on page two.


miércoles, 28 de septiembre de 2011

40 New jQuery Plugins

40 New jQuery Plugins:

Advertise here with BSA

Every six months or we do like to take a look at some of the greatest and freshest jQuery plugins from within that time. Each time we do this the jQuery community never ever fails to let you down. Constantly releasing plugins that are not only useful and problem solving, but also releasing plugins that can aid you with new technologies like HTML5 and CSS3.
Hope you enjoy this selection.
So without further ado, here are 40 new jQuery plugins:

Plugins for Forms

ComboGrid


ComboGrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. ComboGrid provides keyboard navigation support for selecting an item.
ComboGridView the Demo

Recurly.js


Recurly.js is a JavaScript library for customizable transaction forms. It helps you make secure, PCI-compliant transaction forms with fully customizable CSS.
Recurly.jsView the Demo

Ideal Forms


Ideal Forms is a small framework to build powerful and beautiful online forms. It’s very easy to use and requires minimal html syntax. Absolutely everything is stylable with CSS, no images needed. Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+. Degrades gracefully with JavaScript disabled.
Ideal FormsView the Demo

MotionCAPTCHA


MotionCAPTCHA is a jQuery CAPTCHA plugin. It requires users to sketch the shape they see in the canvas in order to submit a form.
MotionCAPTCHAView the Demo

Smart Validate


Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction. Smart Validate supports the following credit cards: American Express, MasterCard, Visa, Diners Club, and Discover.
Smart ValidateView the Demo

TagBox


TagBox is a jQuery plugin to help add tags like input in your forms.
TagBoxView the Demo

Power PWChecker


Power PWChecker is a free jQuery plugin to ensure secure passwords for users. This simple jQuery plugin can be integrated seamlessly with any online form (sign up form/user registration form) to check password strength and give users clues for creating strong and secure passwords.
Power PWCheckerView the Demo

Video Plugins

Cuepoint.js


Cuepoint.js is an open source plugin for adding cue-points and subtitles to your HTML5 video.
Cuepoint.jsView the Demo

FitVids.js


FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
FitVids.jsView the Demo

Map Plugins

jVectorMap


jVectorMap is a jQuery plugin employed to show vector maps and visualize data on HTML pages. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML.
jVectorMapView the Demo

Gmap3


Gmap3View the Demo

Web Typography Plugins

Shuffle Letters Effect


This is a short tutorial that shows how to make a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.
Shuffle Letters EffectView the Demo

jFontSize


The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content.
jFontSizeView the Demo

Lettering.js


Lettering.js is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. Lettering.js solves that: it’s a jQuery plugin to give you that control. Kerning type, editorial design, manageable code, and in general complete control can all be easily done with Lettering.js.
Lettering.jsView the Demo

Sliders, Galleries & Carousel Plugins

Skitter


Skitter is a plugin for creating great-looking slideshows. You can customize every aspect of your slideshow.
SkitterView the Demo

Mosaiqy


Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.
MosaiqyView the Demo

Diapo


Diapo is a free and open source jQuery slideshow plugin. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (donations are not required but asked to be considered in this case).
DiapoView the Demo

Blueberry


Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
BlueberryView the Demo

Craftyslide


Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different by providing a simple, no-frills method of displaying images packaged into a small, clean and efficient plugin.
CraftyslideView the Demo

jmFullWall


jmFullWallView the Demo

Elastislide


Elastislide is a responsive jQuery carousel plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.
ElastislideView the Demo

FlexSlider


FlexSlider is an awesome, fully responsive jQuery slider plugin. It has simple, semantic markup, slide and fade animations, and is supported in all major browsers so you won’t have any compatibility issues. Flexslider is built for beginners and pros alike.
FlexSliderView the Demo

Circular Content Carousel


Circular Content Carousel is a jQuery carousel that has content boxes that you can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
Circular Content CarouselView the Demo

Dynamic Carousel


Dynamic Carousel is a dynamic content slider and carousel, as the name implies. The way it’s dynamic is it uses percentages instead of pixel values, so it can be easily used on a responsive/flexible layout.
Dynamic CarouselView the Demo

Mobile Plugins

Overscroll


Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. OverScroll runs best on Safari 5+, Chrome 5+, and Firefox 3+ but should run just fine on most modern browsers.
OverscrollView the Demo

PhotoSwipe


PhotoSwipe is a jQuery image gallery that specifically targets mobile devices.
PhotoSwipeView the Demo

Mobiscroll


Mobiscroll is a wheel scroller user control optimized for touchscreens to easily enter date and/or time. The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list). It is designed to be used on touch devices as an alternative to the jQuery UI date picker.
MobiscrollView the Demo

Touchy Boilerplate


Touchy is a mobile boilerplate that goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more.
Touchy BoilerplateView the Demo

jQuery.fracs


jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.
jQuery.fracsView the Demo

Uncategorized Plugins

grumble.js


grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.
grumble.jsView the Demo

Timelinr


Timelinr is a simple jQuery plugin that helps you to give more life to boring timelines. It supports horizontal and vertical layouts, and you can parameterize the majority of attributes: speed, transparency, etc.
TimelinrView the Demo

Elycharts


Elycharts is a pure JavaScript charting library, easy to use and completely customizable. It helps you create good looking interactive charts on you web pages or web applications, with a lot of useful features: legend and label support, mouse tracking, tooltips, templates, animations, and more.
ElychartsView the Demo

Flexible Nav


Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article, or just any web page.
Flexible NavView the Demo

deck.js


deck.js is a tool for making modern HTML presentations. Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state looks like and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don’t.
deck.jsView the Demo

headjs


headjs is a tiny script that speeds up, simplifies and modernizes your site. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Basically, headjs is a concise solution to universal issues.
headjsView the Demo

Simple Overlay


Simple Overlay is a jQuery plugin for easily adding lightweight, flexible overlays to your projects. Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.
Simple OverlayView the Demo

spin.js


spin.js is an animated CSS3 loading spinner. You can adjust every single parameter: number of lines, length and width of lines, radius, trail, speed of spinning, and whether there’s a shadow or not.
spin.jsView the Demo

leanModal


leanModalView the Demo

Ninja UI


Ninja UIView the Demo

…and finally…

jQuery Boilerplate


jQuery Boilerplate is, as the name says, a jQuery boilerplate for jump-starting jQuery plugins development. It contains lots of comments to help you get going easily. It is truly object-oriented, it implements public and private methods as well as public and private properties, making it the ideal candidate for when building both simple and complex jQuery plugins.
jQuery BoilerplateView the Demo

You might also like…

20 jQuery Image and Multimedia Gallery Plugins →
40 jQuery and CSS3 Tutorials and Techniques →
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation →
15 CSS3 Navigation and Menu Tutorials and Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →
22 CSS Button Styling Tutorials and Techniques →
50 Fundamental jQuery Controls, Components and Plugins →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
20 Awesome jQuery Enhanced CSS Button Techniques →
15 jQuery Plugins for Better Web Page Element Layouts →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →


Advertise here with BSA