Twitter Bootstrap-maxlength

This Jquery plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. It uses the HTML5 attribute “maxlength” to work.

Lets take a look at it (Wait for the animation to appear)

Demo Download Tutorial

STEP 1.
Import 2 JS Files into your HTML Header

<script src="jquery.min.js"></script> // FOR INITIATING JQUERY
<script src="bootstrap-maxlength.js"></script> // FOR INITIATING COUNTER

STEP 2.
Add Text Field or Text Area with ID and Name Attribute. Don’t forget to specify MAXLENGTH.

<input type="text" maxlength="25" name="alloptions" id="alloptions" />

<textarea id="textarea" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>

STEP 3.
Declare Maxlength BootStrap in Header

<script>
$(document).ready(function(){

Insert Different functions as per the requirement here
Click Demo Button above for CODE

$('input#YOUR ID').maxlength() //This is basic without any properties
           
});
</script>

 If you have any difficulties implementing it, Do let me know in comments below

The post Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin appeared first on Amazing Things.

Smallipop is a customizable jQuery plugin for displaying tooltips. This is so far one of my favorite tooltip plugin using jquery.

Features:

• Pure css for the design. Fallbacks for older browsers and no images.
• CSS Animations are supported.
• Custom themes for different use cases.
• The popup trigger can be positioned anywhere. The popup will be displayed at the body root, so the position won’t be affected by your layout.
• Automatic orientation whereever the popup appears. The popup will try to stay in the visible area of the screen, even when scrolling or at the edges.
• Only a single popup element in the document. Some plugins create a hidden popup for each trigger.
• Custom options for each trigger. You can have 20 different popups with 20 different themes on one page if you like.

[box type=”info” align=”alignleft” width=”620″ ]The demo below includes Installation instructions, How to create tooltip tour, How to display mandatory field in html form using tooltip and other minute information[/box]

Demo Download Tutorial

The post Smallipop – The Best Jquery Toolptip Plugin appeared first on Amazing Things.

Note : Click the screens for the Demo’s

MAKISU 3D DROPDOWN MENU

An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.

WINDY: A PLUGIN FOR SWIFT CONTENT NAVIGATION

This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm.

UNIQUE CSS3 CONTACT FORM

This is an effect of a letter sliding out from an envelope on mouse hover.It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.

EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD

An experimental page layout that let’s you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.

PRODUCT COLORIZER

It is a light-weight solution for users to quickly preview a product in different colors. The plugin uses only two images per product to create the effect and it is built on top of the robust and popular Javascript framework jQuery, providing you with an easy setup. The plugin works in all major browsers including IE7+ (will work with IE6 if you use a png fix)

CONTACT FORM WITH SOME FANCY 3D EFFECTS

In this tutorial we will use css3 3D transforms to create a contact form that mimic a regular letter. You’ll have to flip the envelope, note your (sender’s) coordinates on its back lid, open the envelope, unfold the paper and write your message.

We’ll also make use of the :target pseudo-class so that no javascript is necessary.

 CSS3 3D TEXT ANIMATION EFFECT

jQuery Destaque Plugin

A slide prestentation plugin with a built in paralax effect.

 MLENS JQUERY PLUGIN-THE MAGNIFYING GLASS

ROUNDABOUT

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

REAL SHADOW

 jQuery Plugin that casts photorealistic shadows. Perfect for eye-catching demos and landing pages.

 A COOL INSTAGRAM GRAVITY GALLERY JQUERY PLUGIN

REFINESLIDE

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations).

 UNFOLDING 3D FOLDING CONCEPT

The idea is to reveal thumbnails using a neat effect: the current image will be “opened” in the middle and the thumbnails view will unfold in 3D.

TILT SHIFT

BUILD A PARALLAX SCROLLING EFFECT WEBSITE

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.

IVIEW SLIDER

iView Slider is an easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. It allows you to easily add an unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even as a presentation.

 ImageMapster

A jQuery plugin that activates HTML imagemaps so you can highlight and select them. It has lots of other features for manual control, tooltips, resizing, and more. It is designed to be compatible with every common platform, and is tested with Internet Explorer 6-10, Firefox 3.0+, Safari, Opera, and Chrome. It works on mobile devices and doesn’t use Flash.

GRIDSTER DRAGGABLE LAYOUT

gridster.js is a jQuery plugin that helps you to build intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

BOOK BLOCK

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

BACKGROUND STRETCHER II

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area.

ANY LIST SCROLLER-JQUERY PLUGIN TO SCROLL LISTS

Any List Scroller (ALS) is the jQuery plugin to scroll any list, of any dimension, with any content.

ADAPTIVE THUMBNAIL PILE EFFECT WITH AUTOMATIC GROUPING

This experimental jQuery plugin allows the automatic grouping of thumbnails using a pile effect. The thumbnails will group according to their shared data-pile attribute and once clicked, the pile will disperse and its thumbnails fly to their positions. The thumbnails can be slightly rotated or positioned with a delay.

SLIM SCROLL – PLUGIN FOR SCROLL BARS

slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar – similar to the one Facebook and Google started using in their products recently.

slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

 ADAPTOR JQUERY CONTENT SLIDER

JSIGNATURE

jSignature is a jQuery plugin that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger on touch enabled devices (e.g. iPhones, iPads or Android devices).

CIRCLE HOVER EFFECTS WITH CSS TRANSITIONS

JQUERY WEB TICKERS

Not enough for you ? check out “Amazingthings Jquery Archive“.I hope year 2013 brings more awesome plugins for web designers.

The post 27 unforgettable Jquery Plugins Of 2012 appeared first on Amazing Things.

1.Pure CSS3 accordion image gallery
The very popular “accordion or toggle” effects can now be easily implemented using only CSS!

Article Source-Speckyboy Click the Image for live Demo

2. Impressive Product Showcase with CSS3

A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive.Now its possible with only css3.

Article Source-TutorialZine Click the Image for live Demo

3.Flux Slider using CSS3

Experimental attempt to enable Nivo style image transitions but instead of using the traditional Javascript timer based animations to utilise the newer, more powerful CSS3 animations.

Article Source-Joelambert Click the Image for live Demo

 

4.A Pure CSS3 Cycling Slideshow

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

 

Article Source-Smashingmagazine Click the Image for live Demo

5.CSS3 3D Unfolding Menu

This menu has 3D unfolding sub list with animation. Just hover the top level link to see this in Firefox, Safari and Chrome.

Article Source-cssplay Click the Image for live Demo

6.CSS3 3D Flipdown Menu

This menu has 3D flip down sub lists with animation. Just hover the top level links to see this in Firefox, Safari and Chrome.

Article Source-cssplay Click the Image for live Demo

 

7.A Bunch of Soft, Customizable Pressure Buttons in CSS3

You can use or edit these as much as you like without any credit. They’re compatible with the latest version of all the major browsers.

Article Source-inserthtml Click the Image for live Demo

 

8.Content Navigator with CSS3

Responsive content navigation using CSS3 transitions and :target pseudo-class.

 

Article Source-codrops Click the Image for live Demo

9.CSS3 ordered list styles

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.
Article Source-redteamdesign Click the Image for live Demo

10.Fancy Social Menu with CSS3!
Today we’ll learn how to code a fancy social networks menu with HTML5 and CSS3 and absolutely no images. Yup, that’s right! No images at all. We’ll also learn how to convert a normal font to a web-font.

Article Source-dirtekdesigns Click the Image for live Demo

11.Stylish Image Content Slider in Pure CSS3
Yet another image content slider using pure css3.This will work in chrome and firefox.
Article Source-Designmodo Click the Image for live Demo

12.CSS3 Image hover effects
Five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.

Article Source-alessioatzeni Click the Image for live Demo

13.CSS3 Skill Bar Animation
Article Source-alessioatzeni Click the Image for live Demo

14.Cross browser pure CSS3 buttons
The result is this set of buttons created entirely from CSS (no images used at all).

Article Source-midwinter Click the Image for live Demo

15.Sliding image panels with CSS3
Some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label.

Article Source-tympanus Click the Image for live Demo

Thats all folks for now.Do leave me a comment if possible

The post 15 Fresh and Pure CSS3 Tutorials 2012 appeared first on Amazing Things.

After my last article 17 Unforgettable Jquery plugin Round Ups 2011 , let us take a look at some of the best and innovative jQuery plugins of 2012 probably.

 

New version of unforgettable Jquery plugins is available.Click here to open in new tab while to check out this one.

Creating “Next Level” Search Form Using jQuery & CSS3

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”

jQuery and CSS3 Sliding Horizontal Parallax

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Slide wooden blocks into place to fill letters

It’s the digital version of a puzzle that allows you to slide wooden blocks into place to fill letters. When you click on a block it slides down, and if you click it again it slides back up.

Isometric interactive interior guide

During browsing internet, I have noticed new interesting thing – it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery. 

Jmpress.js to build a website on the infinite canvas

A jQuery port of impress.js based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

 

Jquery Scroll Path
It lets you define a custom path for the window to follow when scrolling up and down, and you can also throw rotations into the mix. You draw the path with methods that work exactly the same way as the canvas methods for drawing lines and arcs.

PromptuMenu
A jQuery plugin that allows you to display list items in a similar way like a iPhone home screen. If item count exceeds the displayed items on one screen, users can swipe through screens.

Slabtext

The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Minimit Gallery
It is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states, in less than 10KB.rcarousel – a continuous jQuery UI carousel

Examples

• simple carousel
• carousel with margin between elements
• vertical carousel
• carousel with custom step and visible elements
• carousel with the auto mode
• elements loaded on demand
• multiple carousels on one page
• carousel with custom navigation
• carousel wrapped with links
• carousel with HTML content
• carousel + lightbox

Sliding Image Panels

Page Scroller
It is a powerful JavaScript based smooth scrolling navigation system that utilizes the robust jQuery library. Created entirely with ease of use in mind, the plugin will work on any website. 

Hover Card

A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

Layer Slider The Parallax Effect Slider (Must check effects)

This is a jQuery content slider using the parallax-effect. You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

Turn.js

is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Color Thief
A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.

youRhere jQuery plugin – Help your readers read!
“youRhere” is a great Chrome extension which give you a chance to mark your article reading- progress by just clicking it.

Fast and Simple Links Box Navigation Menu: BoxyMenu

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.

Blur (Must Check)

blur.js is a jQuery plugin that produces psuedo-transparent  blurred elements over other elements.

Metro JS

Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web. This release focuses on Live Tiles, the Application Bar and Theming. It’s early in the development phase, but all features should work on at least IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera, and Safari(OSX/iOS).

Adipoli jQuery Image Hover Plugin

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

The post New Jquery Plugins 2012 appeared first on Amazing Things.

Today we are going to have a look at different Horizontal News Ticker’s using css3 And Jquery that can be implemented straight on your blog.News ticker’s are also referred as Scrolling text or Marquee text effects.For people wondering what are they check out below they are very familiar to all of us.I have collected some of the best News Tickers available with their Sources And Download Files.

Please allow some time for the live demo’s to load completely Google Chrome User’s Preferred

1.Smooth CSS3 ticker jQuery plugin is a beautiful News ticker inherited from 24 Hour news channel.

• Check out the original Tutorial for different options available and an interesting story about this ticker.

2.Javascript News Ticker (outdated)

3.News Ticker in 4 lines of jQuery
There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ? 
Check out the original article for more Demo’s and Downloads

4.Featurify Marquee jQuery plugin!

Extremely easy to use jquery plugin that allows you to create simple slider with auto playing and hover managing.

• My Favorite so far.
• Check out the original article for more Demo’s and Download

5.Simple Jquery Ticker using Jquery

This plugin is very simple, all it does is takes an unordered list with child li’s and hide all but the first list item and then rotate each list item on a set interval of time

Check Out Original article

6.CSS3 Marquee Ticker

This one is purely done with just css3 styling, but only for Safari, Chrome and Firefox 5+ at the moment.

• Check out the Original article

7.Code Canyon Javascript Scrolling Ticker

A jQuery based scrolling ticker for displaying real time updates from a twitter account.

Scalable width for easy integration with your specific application.

Includes a sleek, low-profile default style. Easily customizable by enabling the the “tickerOnly” option.
Live Preview

7.1 Jnews Ticker
jNewsticker is about giving you choice. Out of the box, it comes with three styles of news ticker:Fade between news items (one is displayed at a time)Continuously scroll between news items Reveal news items, one character at a time (also known as the typewriter effect)And if you understand Javascript and jQuery, you can create your own news ticker styles to sit on top of jNewsticker.

Live Preview

8.Other Resources

• Jquery News Ticker
• Jquery
• Marquee jQuery Plug-in

Download Ticker’s

Any help or confusion regarding implementation,you can surely drop down a comment with your queries

The post 8 Great Horizontal News Ticker Using Jquery and CSS3 appeared first on Amazing Things.

Check out the Jquery demo’s below and i am pretty sure that it will inspire you or surprise you in every aspect of your imagination.The demo are the most downloaded and appreciated jquery plugins world-wide make sure you dont miss any of them.

 

[box type=”shadow” ]      Recommended Reading : 27 unforgettable Jquery Plugins Of 2012[/box]

 

Firefox and Chrome users are preferred 

Just click the image and it will open a demo page for you

 

 

 

 

Thats it… I hope you enjoyed it.Any problems or reviews , Drop me a comment and i will come back to you

The post 17 Unforgettable Jquery plugin Round Ups appeared first on Amazing Things.

Originally developed by Professor Cloud, this new version (from V2.0) has been completely re-engineered to fulfil the demands of modern websites and touch-enabled devices.

Now fully touch-enabled, more features, faster, smoother, WC3 valid, and with a developer’s API.

Click the images for live examples and get stunned..

The post Cloud Zoom jQuery image zoom plugin appeared first on Amazing Things.