Introducing a new jQuery emotions plugin, This helps you to convert text symbols to emotion images like how social chat editor works. This plugin developed by 9lessons using javascript regular expression match rules. In first version we providing facebook emotion theme, next release we are going to include some more better emotion icons.
jQuery plugin: Simplest character count for textareas & input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.
The first thing that this plugin do is create a sibling element (it adds is immediately AFTER the form element), the “counter”, where the remaining character info is stored. On each key up event or text field value change the counting function is triggered and the contents of this “counter” element is changed accordingly. If the remaining character count reaches the “warning” zone (gets close to zero) the CSS class is added. We use this class to change the color of the character count info. If the count reaches zero and goes beyond it another class is added so we can use another style for exceeding the limit.
jQuery Top Black Menu Bar of Google Search with Demo
Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously), Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.
I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.
Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :
- Creating the red ribbon like effect for the current page
- creating the drop down menu when more button is clicked
- keeping the bar fixed even when the rest of the page is scrolled
- Styling the elements of the menu exactly to those found on Google
jQuery Audio Slideshow with jPlayer
Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.
Quake Slider : jQuery Image / Content Slider Plugin with Demo
If you are the guy who likes to focus on real business and don’t want to re-invent the wheels. Quake image slider is perfect for you. Quake image slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.
With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks.
Interactive menu with CSS3 & jQuery
In this article you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.
Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.
Fotorama : jQuery Image Slider with Thumbnail Display
Fotorama is powerful yet flexible image gallery plugin for jQuery that is compatible with all type of computers, iPhones and any mobile devices. Fotorama allows users to include thumbnails, prev- next buttons, swiping, slideshows or bullet navigation. Fotorama assists users to arrange the dimension and position of the slider and thumbnails and also users can define captions to images.
jQuery Frontier Calendar with Demo
Full month calendar jQuery plugin that looks like Google Calendar.All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. These are to be created by you so you can control how they look. Use the API hooks in your form elements to control the calendar.
You may change the background image via the CSS file. By default all day cells have a linear fade png image for their background.