jQuery Quickie: Smooth animated quote display

jQuery Quickie: Smooth animated quote display

Here is the new way to display quote using jQuery.Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.

Pull Out Content Panel with jQuery

Pull Out Content Panel with jQuery

We will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through many items in the panel.Depending on how many items can fit to the user’s screen, we will adapt the item container in order make the maximum number of items fit, centering it horizontally.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

We’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

zClip: jQuery ZeroClipboard

zClip: jQuery ZeroClipboard

zClip is a lightweight jQuery “copy to clipboard” plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below.
Features:

  • Avoids built in browser security conflicts by using a 3rd party browser plugin (Adobe Flash)
  • Invisible overlay, no interference with page design
  • Support for CSS “:hover” and “:active” states
  • Preserves the targeted element’s “click” “mouseenter” and “mouseleave” events
  • Supplies callback functions for “before copy” and “after copy”

Autotab: jQuery auto-tabbing and filter plugin

Autotab: jQuery auto-tabbing and filter plugin

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element. Likewise, clearing out the text field’s content by pressing backspace eventually places the focus on the elements previous target.
Why jQuery Autotab and not some other auto-tab script?

  • Auto-tabbing behaves logically, in both tabbing forward and tabbing backwards.
  • It allows you to easily change your text in a tab that would otherwise auto-tab away.
  • It can filter text fields, ie. restrict a phone number fields to just numbers.
  • It’s small, fast, easy to load and built on the powerful jQuery library.

jQuery iTunes Like Slide Show Gallery

JQuery iTunes Like Slide Show Gallery

This example is not really the same like iTunes gallery like in the image left, but at least the basic behavior almost the same, I have played with JQuery UI Slider and Rotate3Di plugin.Actually I modified thejQuery UI slider scroll pane example.

How to Create a jQuery Confirm Dialog Replacement

How to Create a jQuery Confirm Dialog Replacement

We are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.

How To Create a Stylish Content Slider using CSS3 & jQuery

How To Create a Stylish Content Slider using CSS3 & jQuery

Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.

How to Mimic the iGoogle Interface with jQuery

How to Mimic the iGoogle Interface with jQuery

In this tutorial, I’ll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications!

First, let’s list exactly what we’ll be creating here and what features it’ll have:

  • This interface will contain several widgets.
  • Each widget can be collapsed, removed and edited.
  • The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).
  • The user will be able to edit the color and title of each widget.
  • Each widget can contain any amount of regular HTML content, text, images, flash etc.

gmap google maps plugin for jquery

gmap google maps plugin for jquery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3.