14 Helpful jQuery Tips

Nettuts blog has a post with 14 very useful and easy to implement jQuery tips for your projects. They are aimed at the beginners and are quite easy to understand. Will surely make your projects look better.

Top 10 jQuery Tips and Tricks

Additional 10 tips which will help you to add more dynamic effect to your web sites.

20 Simple jQuery Tricks

How to create rounded corners for your pictures? Scrolling menus or WordPress and jQuery contact forms? You will find all these covered in this tutorials list, without much complexity. Everything is in simple and beginner friendly fission.

Very Easy jQuery Tricks

As the name says, these jQuery tips will be easy to implement and a good learning exercise.

51+ jQuery Examples

This is great collection of jQuery tutorials, examples and tricks you can use for projects. Covering all the best online resources and well written tutorials. Highly recommend to go through this list.

Queness jQuery tips

Again some lightweight but much effective and useful tips and tricks from jQuery land. You will learn how to check for errors and make sure that your code is running on Internet Explorer browser.

jQuery4You Tricks

This site has some great tutorials. For example – how to create video player with jQuery or how to create a chat room. These are little bit more advanced but if you followed our first seven links you are now well prepared to jump in and check out these example tutorials.

If you have any questions related to all these tutorials or want to suggest some other great resources for learning and understanding jQuery please leave your comments under the post and we will respond and answer your questions. Good luck with learning!

The post Getting started with jQuery. Best tutorials and examples appeared first on ENFEW.

jRating

jRating is flexible and easy to work with AJAX based star rating system.
It allows customization and setup of all elements visitor sees on the screen. Free to use and Open Source.
Live demo site with many implementation examples lives here.

jQuery Raty

We featured jQuery Raty plugin on Enfew two years ago and it remains as one of the most liked 3rd party rating plugins for jQuery out there. It has good support from developer community on GitHub (456 likes!).
Worth to give it a go if you are looking for time proven solution.

Colour rating system

Colorful rating system created by Marco Kuiper  from Macrofolio.  This system is using jQuery colour plugin  and CSS3.
Even if its not released as stand alone jQuery plugin we think this example is very nice and can be great help for your projects. It makes web rating look nice!

 jQuery Star Rating

?rfan Durmu? has created this jQuery plugin for adding star ratings to your web projects. On the plugins home you’ll find his clear instructions on how to implement and make best use of it.

jQuery Bar Rating

Great bar rating plugin for jQuery created by Kazik (Netboy).
It takes much different approach on look and feel for rating elements within web projects which makes them more user friendly and innovative. Personally, we are loving it and might even use in our site redesign project!
Check the plugin code on GitHub and example implementations on demo site.

Mobile Star ratings with Mobiscroll

And here is something for your mobile application projects with jQuery rating systems in them.
Mobiscroll is an open source and free to use JavaScript library which works well with jQuery, jQuery Mobile and some other JavaScript frameworks. It allows you to build elements and components for mobile applications with great look and feel. Give it a try and see if this is something you have been looking for.

The post Top jQuery rating plugins you should use in projects appeared first on ENFEW.

1. Uploadify – JQuery File Upload Plugin Script

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.

2. jQuery.upload – A simple ajax file upload plugin

jQuery upload is jQuery plug-in to upload files by the Ajax style. It is possible to upload files simply and easily in the same way as jQuery.post and the jQuery.get.

3. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

4. SWFUpload jQuery Plugin

• Native jQuery event handling using .bind()
• Ability to assign multiple callbacks per event
• Makes multiple SWFUpload instances on a single page easier to manage
• Ability to completely separate SWFUpload object from UI code (callbacks)
• Assign event handlers before SWFUpload instance is even created!
• No global functions or variables needed!
• A nice, chainable solution!

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

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

6. jQuery Form Plugin

This page demonstrates the Form Plugin’s file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.

7. Really simple jQuery Ajax File Uploader plugin.

This jQuery plugin creates a hidden iframe and sets the form’s target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server’s response from the iframe.

This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.

8. Get User Facebook Albums and Pictures

getFacebookAlbums is a plugin that allows the user to connect on Facebook and choose a picture among his/her own albums. It’s an alternative to the simple upload form the hard drive disk.

9. File Style Plugin for jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

10. jQuery Multiple File Upload Plugin v1.47

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

11. jQuery File Upload

The maximum file size for uploads in this demo is 5.00 MB (default filesize is unlimited).
Files uploaded in this demo are not publicly accessible and will be deleted after 5-10 minutes.
To be able to view your uploaded files Cookies have to be enabled.

12. Plupload

Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

The post Best jQuery File Upload Plugins appeared first on ENFEW.

Increasing your webpage usability is not that easy, you have to consider a lot of things. One of the necessary element is to be able the user to easily back to the top most of the page especially when the content is long enough. This plugin will add an elegant scroll top effect and functionality to you page in just a few line of JavaScript.

2. jQuery topLink Plugin by David Walsh Blog

Last week I released a snippet of code for MooTools that allowed you to fade in and out a “to the top” link on any page. Here’s how to implement that functionality using jQuery.

3. Disappearing “Scroll to top” link with jQuery and CSS

Seen in many forms, such as “Back to top,” “Top of page,” or “Scroll to top,” these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.

This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You’ll need to download jQuery if you aren’t using it already.

4. UItoTop jQuery Plugin

Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ). Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

5. jQuery Scroll to Top Control v1.1

If your pages are long winded, it’s a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page. That’s where this script comes in. It displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top. And instead of always being visible on the user’s screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control. Nifty!

6. Scroll To Top Plugin [WP Plugin]

Scroll to top is a button that hovers in the bottom right corner of your screen that allow users to smoothly scroll right to the top of page, making a website more user friendly.

The post 6 Scroll to Top jQuery Plugins & Tutorials appeared first on ENFEW.

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

• Clean: Designed to compliment your content.
• Fast: Smart image preloading.
• Easy: Customizable without having to know CSS.
• Rounded: Adjustable rounded corners, no PNG images required.
• Smart: Content resizes to always fit on your screen.
• Slideshow: One button slideshow.
• Works on all modern browsers.

2. Lightbox Gone Wild! By Chris Campbell

In user interface design, a modal window (sometimes referred to as a modal dialog) is a window that blocks input to other windows. It has to be closed before the user can continue to operate the application and are frequently an element of Multiple Document Interface (MDI) applications or desktop applications like Windows or OS X. One of their purposes is to prevent the software from being operated in an ambiguous state.

3. jQuery lightBox plugin by Leandro Vieira

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.

lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

4. FancyBox

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

• Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
• Customizable through settings and CSS
• Groups related items and adds navigation.
• If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
• Support fancy transitions by using easing plugin
• Adds a nice drop shadow under the zoomed item

5. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

6. ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal

7. Slightly ThickerBox

Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

8. FancyZoom meet jQuery

This works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css

9. Facebox v1.3

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.  It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

10. NyroModal v2  jQuery Plugin

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design.
The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not fully true. The default CSS works fine, but most of time it’s a mix between required elements and optional. That mean you have to be very careful when editing it.
The other problem is the animation. That’s the worst point. I never found one plugin allowing to redefine easily the animations.

11. PIROBOX EXTENDED V.1.0 – jQuery plugin

12. PrettyPhoto

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.

It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.

It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

13. Litebox

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

14. ColorBox

A light-weight, customizable lightbox plugin for jQuery 1.3, 1.4, and 1.5

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: 9KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.
• Tested In: Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet Explorer 6, 7, 8, 9.

The post 14 Image Lightbox Plugins For jQuery appeared first on ENFEW.

1. jQuery Effect toggle() Method

The toggle() method toggles between hide() and show() for the selected elements. This method is also used to toggle between custom functions.

2. Jquery Tutorial : Toggle Effect on Hover/Click by Vikas Ghodke

Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output. Check out the demo before getting into the tutorial.

3.  Simple Toggle with CSS & jQuery

I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state.

After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had gone through.

4. How To jQuery Toggle

jQuery was made to change the way that you write JavaScript. jQuery has tons of really nice effects that you can experiment with. One of my favorite things to do with jQuery is to do a toggle this is a really simple effect to do but will make people go WOW when they see it. You can use the toggle effect in multiple different way most of the time people just use the toggle up to down or toggle left to right. But some people don’t know that you can use jQuery toggle to go from your upper left or right corner to the opposite corner. Well here is some code that you can reference on different ways to toggle.

5. How to expand collapse (toggle) div layer using jQuery

In almost all of my projects, I have been using jQuery to toggle the layer. So, I thought of sharing how easy it is to expand div layer and collapse panel using jQuery. When user clicks on the header, the content gets displayed by sliding down and when you again click on the header, the content collapses.

6.  How to: show/hide a widget in WordPress with jQuery

In a previous post I talked about how to show/hide a single div html code with a search inside. Today I’d like to show you how I implemented jQuery into my new theme.

7. Basic Show and Hide

As promised in my last entry, I’ll be showing you a simple effect that you can do using jQuery: showing or hiding something, or a group of things, on the page. The two functions that let us do this are, not surprisingly, show() and hide().

jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible. So, let’s get down to business. We’re going to start with our $(document).ready() function.

The post 7 Tutorials Using jQuery’s .toggle() Function [For Newbies] appeared first on ENFEW.

Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

2. Abusing jQuery.animate for fun and profit (and bacon) at Acko.net

The days of static UIs that only have jarring transitions between pages are pretty much over. With frameworks like CoreAnimation or jQuery, it’s easy to add useful animations to applications and webpages. In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles.

3. Understanding jQuery animate() function at ViralPatel

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

4. Basic jQuery Tutorial: Animate div and image at DesignGala

n this article, I will be showing you how to animate image and div.

By animation, I just mean basic animation. This is a basic tutorial. So, please don’t expect it to be so complex animation :). It will simply be increasing the width of the image and div with animate effect. This is a base for starting animation with jQuery.

5. How to Load In and Animate Content with jQuery at NetTuts+

In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

6. jQuery Animation Tutorial at ThinkVitamin [Video Tutorial]

Author: Jim Hoskins Level: Beginner Length: 6:36

In this video we look at how to create your own custom animations using the .animate() method.

The post jQuery’s Animate() Function – Everything You Need To Know About It appeared first on ENFEW.

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

2. jQuery UI Sortable Tutorial

Here’s a simple tutorial showing how to use jQuery UI’s sortable plugin to update a database table’s sort order field on the fly using ajax.

3. Tablesorter – Flexible client-side table sorting

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

• Multi-column sorting
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
• Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
• Extensibility via widget system
• Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
• Small code size

4. Explaining jQuery sortable

Sortable lists are a flexible way to let your visitors customize a webapp and can be used in numerous ways. They are a design component that should be in your developer’s toolkit.

Next time we are serializing our sortable list and sending it over to the PHP back-end using ajax.

5.  Using jQuery or MooTools For Drag, Drop, Sort, Save By David Walsh

This table shows only the important fields per this functionality: ID, Title, and Sort Order. Your table will likely have many more columns.

6. Sortable lists with JQuery in Rails

Drag ‘n Drop sortable lists are a great way to provide a UI for sorting, well, lists of things. Most Rails examples out in the wild use prototype/scriptaculous and the built in Rails javascript helpers. In this walkthrough we’ll provide the same functionality using JQuery instead. We will not be using the built in Rails javascript helper. Instead we’ll write Unobstrusive Javascript using JQuery.

7. jQuery UI Sortable with TABLE

Drag and drop sorting on a web application? This thought is so far fetched several years ago – and now everybody is or can do that easily with jQuery. Looking at the tutorials and documentation in jQuery’s website, it lays out a simple method to call to make our list to become sortable.

8.  sorttable: Make all your tables sortable

While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data.

9. Sortable Lists Using jQuery UI

Unordered lists have a number of useful applications. They are commonly used to structure a site’s navigation. I have found, in a number of web applications, that the ability to reorder (sort) such lists would be extremely useful. So, how can this be achieved?

10. jQuery UI sortable with Ajax

I just finished a session of intense jQuery hacking and here are some notes with regards to an interface making use of jQuery UI.

The post 10 jQuery UI Sortable Tutorials & Plugins That Will Explain Everything You Need To Know appeared first on ENFEW.

Replacing standard tooltips is easy: Just include the script on the page, add a stylesheet, select the elements to tooltip and call the tooltip plugin.

2. qTip Jquery Plugin

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

3. jQuery TOOLS – Tooltips done right

This tool has all the features and configuration options you’ll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.

4. jQuery (mb)Tooltip 1.6

Now you can replace the ugly default tooltip with this smart and nice one!

5. jQuery plugin EZPZ Tooltip

• Clean and semantic HTML. This tooltip does not rely on putting a bunch of crap in the title attribute. The content is defined in its own HTML element.
• Convention over configuration. The content element is inferred from the name of the target element.
• Flexible appearance. Since the elements are just plain old HTML, they are styled by using CSS. If you want stems or rounded corners, just give the content element a background image.
• Flexible content positioning. The position of the content can be customized by specifying one of the built in positions, but if you’re feeling ambitious you can write your own positioning algorithm if you need something more customized.
• Simple and lightweight. This tooltip doesn’t try to do everything for you, but if you want it to do something you can make it happen.
• Custom effects. fadeIn and fadeOut (or any other effect) can be achieved by defining the showContent and hideContent callbacks.

6. jQuery Horizontal Tooltips Menu Tutorials

As usual, it’s a good practise to use UL List for menu. For the menu images, you need to put the caption in the ALT attribute, because jQuery will look at the ALT for it.

7. tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

8. clueTip: A jQuery Tooltip Plugin

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

9. BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

10. Hovertips – easy and elegant tooltips

The hovertip plugin is quite flexible. With a little javascript, you can customize which nodes become the tooltips and which targets activate them. As a little demonstration, I’ve abbreviated all the comments below. To read the comments, click on the titles and the text will expand. Its using the same engine that drives the clicktips above. If the comments have the ‘new’ tag next to them, I don’t collapse them. Something like this would be handy for returning to long threads and quickly seeing only the posts you haven’t seen before. All the necessary javascript is embedded in this post. So this is the only page on my site with this behavior.

11. BetterTip Created By Edgar Verle

To use BetterTip you first have to obtain the jQuery Library. Next you’ll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.

12. jQuery Ajax Tooltip

This is very much based on the Coda Popup Bubble example for jQuery that’s been going around with a few important differences:

• The information is requested via AJAX, so you don’t have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it.
• When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you’d end up with a weird streaking animation since there’s a delay before the div is hidden.
• Works in IE (just turned off the fade animation)

13. Build a Better Tooltip with jQuery Awesomeness

Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute. But, in this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.

14. Prototip2

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

• Style: Easy to customize.
• Position: Complete control over tooltip positions.
• Round: Configurable rounded corners, no PNG images required.
• Speech bubble effect!
• Works on all modern browsers.

15. Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

16. TipTip jQuery Plugin

This plugin is yet another product from my development work on Build It With Me. I wanted a sweet & simple custom tooltip, but nothing I found seemed to be smart enough for what I needed. I needed a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does!
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin.  It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb

17. Vertigo Project: vTip

vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

18. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

19. Create a Digg-style post sharing tool with jQuery

20. Easiest Tooltip and Image Preview Using jQuery

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

21. BsTip

With easy HTML that’s how.
The set up offers endless configurablity. User your own css and tags (as long as you don’t use the “q” tag anywhere) to style your tab panel. It’s easy to do, easy to set up, easy to style because Tab World does all the hard work.

The basic setup is a ul with a specific ID – IT HAS TO BE AN ID – You don’t want two tabs duplicating – If you do… your not so good at this stuff — anyway, then your li tags and then your q tags. IMPORTANT! After that long sentence it is important that you understand, everything not in that q tag will be the tag title, while everything inside of it will be the content. Don’t use q tags in your actual content other than to wrap it because it is a) bad practice anyway and b) it won’t even show up. That may change in later versions but its not a really good idea.

— If you know any other Jquery Tooltip plugin then please let me know.

The post 21 Best jQuery Tooltip Plugins & Tutorials appeared first on ENFEW.

View Demo

Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions.

2. Create Flipping Content Tabs Using jQuery

Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. Today I am going to show you how to create content tabs with nice flipping effect.  For this, you will need the QuickFlip jQuery Plugin by Jon Raasch and of course, the latest version of the incredible jQuery library.

View Demo | Download The Files

3. jQuery Sliding Tab Menu for Sidebar Tutorial

This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I’m using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive change in jQuery script.

We will be using a famous plugin called jQuery.scrollTo. jQuery scrollTo is an amazing plugin and doing sliding menu has never been so easy! Please continue reading, As usual, this tutorial is separated into 3 sections: HTML, CSS and Javascript. View Demo | Download The Files

4. JQuery Tabs Tutorial

In this demo we’ll be creating a simple tabbed interface using html and css and utilising the power of JQuery to control the appearance of the content. The mechanics of this tutorial are to have a tabbed interface that when a link is clicked displays the corresponding information in the content area below. The interface will degrade gracefully if the user has javascript disabled. View Demo

5. How to create Tabs with CSS and jQuery from scratch

Another feature that is often added to Web 2.0 sites is tabbed content. I’m not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked.

The post 5 Best LightWeight & Simple jQuery Tabs Tutorials appeared first on ENFEW.

jQuery Star Rating Plugin

The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.

• It turns a collection of radio boxes into a neat star-rating control.
• It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
• NEW (12-Mar-08): In read only mode (using the ‘readOnly’ option or disabled property), the plugin is a neat way of displaying star-like values without any additional code.

How to Build a Star Ratings jQuery Plugin

Almost all controls and features within jQuery are now built using the plugin architecture. It’s actually a very simple system, and jQuery provides some pretty good documentation to get you started. Like always, let’s start with an example of what we’re going to build. Below I’ve got two star ratings controls with differing amounts of stars – one with 10 and one with 5.

Star Rating Plugin for jQuery

An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.

jQuery Raty

jQuery Raty is a plugin for creation of voting systems (Star Rating) in a simple and automatic way, writing just two lines. And today I’ll talk a little about it.

When the jQuery wasn’t famous, I started my first rating system using pure JavaScript. It was good, but it wasn’t a plugin. By passing the technologies, I tested some plugins, but were not satisfactory. The most of time were too much code to write, or so many CSS to customize or incompatible with Internet Explorer. Then I decided to create the jQuery Raty.

New jQuery Rater Plugin

The jQuery Star Rating widget is a neat control to add to your website. It has many options that allow you to easily customize it. However, it’s usage is based on a fully degradable form submission model which means you must use markup containing an option list. Unfortunately, this means it becomes quite complex to support a rating model that fires off an ajax request to submit a new rating. Therefore, the developer is left to worry about:

• Writing code on the server to generate the option list only for users that have not already rated
• If the user has already rated, the server must generate different markup, or set the widget to disabled
• The developer must write javascript to handle the widget callback and build an ajax request
• No built in support for rating count and updated rating result
• No built in support for a failed rating

jQuery Star Rating Plugin beta

Here is my quick and dirty re-creation of a star rating plugin. This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure. I would love to hear your suggestions on how this could be made better. Feel free to contact me wil[dot]stuckey[at]gmail[dot]com, thanks!

jQuery Star Ratings Plugin

I needed a very simple jQuery Star Ratings Plugin, and what I found available out there just seemed too cluttered and complicated, so I came up with my own. The idea was to create something with the small amount of code possible, that would have two features: show rating, and allow for adding star rating to any type of form simply taking over a input filed

Favorite Rating with jQuery and Ajax

how to implement Show the love rating system like amypink.com

Simple Voting for WordPress with PHP and jQuery

Pretty basic script using PHP and jQuery to allow members who are signed in to click on a simple link to add their vote to a post.

Star Rating plug-in

This jQuery plugin is based on Wil Stuckey’s and John Resig’s work. The basic star rating plugin they came up with was great, but there were just afew things missing from it. There are a few other great jQuery rating plugins already available, but they weren’t exactly what I was looking for. They either don’t degrade gracefully or they use radio buttons for the form elements. Beyond that, I have never written a jQuery plugin before, so I thought this would be a excellent learning experience. I certainly know much more about jQuery and plugins now.

This sample keeps track of the number of submissions and binds the stars accordingly. This is just a simple session store, so it is quite basic. The ASPX pages for the example are included within the zip file. If you don’t use .NET, you may be able to recreate the pages quite easily (in PHP, ASP classic, JSP, whatever) as they really are quite basic. I simply wanted to recreate a data store but without all the intracacies to show how the plugin would work.

I added some options to the plugin:
– cancelSubmit: true (default) – determines whether or not cancel submits the form.
– disabled: false (default) – determines whether or not the form is read-only. You can also set the select lists disabled attribute to make the form read-only.
– position: “-16px -16px” (default) – this is the default CSS position of “on” stars. I don;t know if this is will be used much by anyone, but I thought if another image was to be – – used (rather than the stars provided) that exposing this may be a good idea. Maybe it isn’t? Who knows…
– success – this has a default callback function that throws up an alert message. You’ll definitely want to override this option.
– disableOnSubmit: false (default) – determines whether or not the form is disabled after submitting. This is useful if you only want users to vote once.

RateIt – a jQuery (star) rating plugin

Fast, Progressive enhancement, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

Minified size: 3.35KB (1.15 bytes when gzipped).  Tested on: IE7-9, Chrome 7, Firefox 3.6, Opera 10.63

The post 11 Best jQuery Star Rating Plugins & Tutorials appeared first on ENFEW.

There are many snippets on the Internet that show you how to get total Twitter followers of an user, most of them are written in PHP or other server-side script languages. But do you know that we can do that with only pure Javascript by using ajax in jQuery?

2. Twitter Followers Count Snippet for WordPress

Here’s a short snippet to grab and display your twitter followers count in WordPress. You can use this anywhere, sidebar, posts, header, footer. We’ll be firing an anonymous call to the Twitter API for a user profile. This method does not require authentication, unless you’re trying to view a protected profile. To make this slightly easier I’ve used the JSON functions which are available in PHP 5, but you can easily get them to work in PHP 4 (and as Alex mentioned in the comments below, WordPress comes with it’s own JSON functions for PHP 4 users, which is awesome).

3.  Twitter API and jQuery Showcase: Display your Followers or Friends

Today I was playing around with the Twitter API and created this little “widget” using jQuery and PHP. I know, there are already plenty of them, but I wanted to improve some details.

Some of the features are:

• You can get your most recent 100 followers or friends
• Followers or friends are shown in sets of 25 per widget page
• The images of the users are preloaded (unlike in Twitter)
• You can navigate through the set
• You can refresh the entire set
• More information on the user can be seen using a tooltip when hovering over his picture

4. Combined Facebook, Twitter & RSS Social Stats with jQuery, PHP & YQL

As we increasingly depend on more and more social services, there rises the need to provide a simple way to let our website visitors take part of our diverse social presence.

In this tutorial we are going to create a simple widget, which combines the number of your RSS readers, twitter followers, and fans of your facebook fan page, to give a rough estimate of your social popularity.

We are using jQuery and the tipTip plugin, object-oriented PHP, and Yahoo’s YQL, while demonstrating a number of interesting web development techniques.

5. Cool Tweet/Twitter Follower Counter Using jQuery

In the current time of social networking social bookmarks have become lifeline of any website that needs to attract traffic ( including webspeaks.in :P). Everyone wants to show the number of subscribers/follwers of  is/her site. This task has been oversimplified by jQuery, where a single line of code can ease your life a lot. In this post I am showing how to display ‘Number of tweets’ and ‘Number of Twitter followers of your
website’.

6. Tricks: Display Total Twitter Followers as Text on WordPress

Everybody blogging everybody using Twitter for Microbloging tools. On this tips, I will show you how to display your total twitter followers on your sidebar or whatever and displaying as text. All need to do is add little bit code on your header.php or footer.php or sidebar.php files. and done.

7.  Twitter Friends & Followers Widget – A jQuery Plugin!

There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?!
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.

By featuring your Twitter friends or followers on your blog, you will encourage others to become friends too..

8. jTwitter, jQuery and getting the number of followers

It just is a very small wrapper around the Twitter API and it returns the json document that the api uses. It is very easy to use, once you know how ;-).
i’m really excited to see how you use in your projects and stuff, Don’t forget to subscribe. :0

The post 8 Ways To Display Your Twitter Followers Counter With jQuery appeared first on ENFEW.

1. ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

2. jQuery Fancy Custom Radio-button and Checkbox

It’s fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.

3. Fancy checkboxes and radio buttons

Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).

4. jQuery checkbox v.1.3.0 Beta 1

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

Features:

1. only inline elements used, just like default checkoxes
2. cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
3. work with radio buttons too
4. supports inline and jQuery attached click events
5. supports “label hovering”: when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)
6. dynamic skin changing
7. adds new checkbox events “check”, “uncheck”, “disable”, “enable”, ready to use in jQuery.bind() method

5. iPhone Style Radio and Checkbox Switches using jQuery and CSS

You need just two things for this to work correctly: JQuery 1.3.2+ and the switch.gif image file used for the backgrounds (both included in the zip file). After you have those two files.

6. Create iPhone-style buttons with the iButton jQuery Plug-in

At work we just released another jQuery plug-in called the iButton jQuery Plug-in (which brings the total of open source jQuery plug-ins we’ve released to four.) This plug-in allows you to generate iPhone-style buttons from checkbox and radio elements. While there are several libraries out there that generated iPhone-style buttons, we couldn’t find one that did everything we needed, so I wrote one!

The users of our application are very keyboard centric, so it was very important that we supported keyboard entry. Keyboard support often seems to be overlooked in most UI plug-ins—developers get so focused on the mouse interaction, they forget completely about keyboard entry. So we always make keyboard support a key feature in the jQuery plug-ins we write.

7. iphone-style-checkboxes by tdreyno

8. Introducing iPhone-style Checkboxes

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then I’ve got something special for you. iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

The post 8 jQuery Plugins/Tutorials For Styling Custom Radio Button and Checkbox appeared first on ENFEW.

We have collected the best tutorial of jquery drag drop from internet.

1. Drag and Drop Example using jQuery JavaScript in HTML

Ever tried implementing Drag & Drop feature using JavaScript? Believe me it is quite tough and has lots of cross browser implementation issues. Using jQuery you can create simple Drag & Drop features easily and manage them well. jQuery UI provides with a vast suite of APIs that can be leveraged to create a UI with Drag Drop functionality.

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

2.  Tutorial: How to create a simple drag and drop with jQuery

Let’s face it, creating drag and drop functionality with JavaScript alone is tough. What would have taken me hours with JavaScript now takes me a matter of minutes with jQuery. Drag and drop is so beneficial for a web page because it makes it seem more like a desktop application and we all know that that’s where the internet is headed. So here is a quick tutorial to help you get up and running with jQuery drag and drop.

3. Dynamic Drag’n Drop With jQuery And PHP

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

4.  Using JQuery to Add Drag and Drop Support

Drag and drop support in a web application always get some attention. I used drag and drop support in one of my applications and I have to admit that it involved a lot of JavaScript code. You can check out the article “Browser Compatible Drag and Drop Shopping Cart”.

Today I had to create the same drag and drop approach so I decided to check out the drag and drop API’s of the JQuery library. I have to admit that JQuery is one of the best JavaScript library that exists today. I can go on and on with the praise but let’s take a look at the animation of the sample application.

5.  Drag & Drop with PHP & jQuery

The ability to drag and drop content on a page and have it save the order can make for a great user interface and is actually relatively easy to execute with a few lines of jQuery. You’ll need to include the jQuery user interface library which you can find here: Jquery Google API. All the files needed to get this up and running are in the download at the bottom of this post.

6. jQuery Example: Selecting items with drag and drop

Some time ago, I needed to take a list of items and select from them a subset, put that subset of items into a particular order, and then submit them to the server. A good example would be when you have a list of posts and you need to choose which ones (and in which order) you want to print them. Drag and Drop is a breeze with jQuery and jQuery UI.

7.  jQuery Sortable Lists With Drag Drop Handle

I’ve recently made use of a drag / drop style list that will remember the order of the list. If you use the standard jQuery sortable items, you’ll get the two following problems:

1. You won’t be able to click on any items in the sortable list you have
2. You’ll probably want an update of the order of the list after every change.

8.  jQuery: Customizable layout using drag and drop

Amazed by features like drag and drop, customizable content and AJAX? Learn how you can combine them to create a customizable website layout, saving preference using cookies.

Wanna cut to the chase? Check out the final example or download them all.

9.  Drag and drop reordering of database fields (sortables) with jQuery

This tutorial explains how to display a list of items from a database that can be reordered in real time by dragging and dropping, using the jQuery library. Moreover, no page reload is required on every reorder. If you want a bigger introduction to why you may want to do this I suggest reading my tutorial on how to achieve the same functionality using scriptaculous.

10.  jQuery Drag and Drop to sort Tree

I just finished off a nice interface where an arbitrary amount of nested lists are used to represent a tree. Any item can be dragged and dropped on any other item as a way of moving them and placing them as children beneath another item/branch. The functionality mimics that of any file browser that can display folder structures as a tree.

The post Tutorials On ‘How To Create Drag and Drop With jQuery’ appeared first on ENFEW.