20 Awesome jQuery Enhanced CSS Button Techniques With all the talk of CSS3 at the moment, its easy to overlook the impact Javascript, especially jQuery, can have on the appearance of the basic web button. As such, we have collected 20 useful CSS buttons techniques that have all been improved and enhanced by the sooper-dooper power of jQuery. Creative Button Animations with Sprites and jQuery This tutorial will show you how to build creative hover animations for buttons using sprites. Part 1 of this tutorial explains the design process in Photoshop and in, in part 2 you will learn how to convert it to XHTML + CSS, and finally adding a fading hover effect with jQuery. View the Tutorial » GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript) GitHub seems to understand that most repo sites are usually boring so they’ve spiced their site up with some catchy CSS and great JavaScript features. View the Tutorial »View the Demo » Cross-Browser Rounded Buttons with CSS3 and jQuery View the Tutorial »View the Demo »
jQuery plugin: Validation This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales. If you want to support the development of this plugin, please donate to the ongoing pledgie.org campagin. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. Current version: 1.11.1License: MIT Files: DownloadChangelogDemosDocumentationGitHub RepositoryGitHub 1.11.1 Tag 1.11.1 files on Microsoft’s Ajax CDN (hotlinking welcome): Dependencies Required Support Donate
Using Ajax to Validate Forms There’s two types of validation: Simple, server-independent validation, i.e. checking email address are the right format, password and confirm password matches, etc.Server-based validation, with can be delivered with a page refresh, or live (as this tutorial will explain), i.e. for checking whether a username is taken. What can we do? Live username checkingPassword confirmation and strengthChecking if an email address is already registeredURL validation, i.e. So why do it? It makes the user’s experience quicker, or arguably betterIt’s not much extra work to put in place (explained below) Examples in the wild Howto As with all these tutorials, I expect that you have built your solution to the point where it works, but now we want to add our splash of JavaScript magic. In our baseline example, my requirements are: Username validation kept in separate functionServer side does the it’s normal jobI can detect an Ajax request and return something different Username validation Markup jQuery var t = this;
30 Pro jQuery Tips, Tricks and Strategies Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional. Getting Started These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. #1 – Delay with Animate() This is a very quick, easy way to cause delayed actions in jQuery without using setTimeout. For instance, let’s say that you wanted to open a dialog and then fade it away after 5 seconds. Don’t you just love jQuery chaining? UPDATE: jQuery 1.4 has eliminated the need for this hack with a method called delay(). #2 – Loop through Elements Backwards Voila!
jQuery Form Plugin The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks. AJAX response will replace this content. The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form. This page gives several examples of how form data can be validated before it is sent to the server. The following login form is used for each of the examples that follow. Form Markup: <form id="validationForm" action="dummy.php" method="post"> Username: <input type="text" name="username" /> Password: <input type="password" name="password" /> <input type="submit" value="Submit" /> </form> First, we initialize the form and give it a beforeSubmit callback function - this is the validation function. Validate Using the formData Argument Validate Using the jqForm Argument Validate Using the fieldValue Method Note You can find jQuery plugins that deal specifically with field validation on the jQuery Plugins Page. <? <? <?
Web Form Validation: Best Practices and Tutorials | How-To Advertisement Ideally, users will fill the web form with necessary information and finish their job successfully. However, people often make mistakes. This is where web form validation comes into play. The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. Validation methods User’s input can be validated on the server and on the client (web browser). Server-side validation In the server-side validation, information is being sent to the server and validated using one of server-side languages. The exception is validation using Ajax. This diagram shows differences between client-side and server-side validation and other techniques. Client-side validation Server-side validation is enough to have a successful and secure form validation. With client-side validation, form never gets submitted if validation fails. Main drawback of client-side validation is that it relies on JavaScript. Help hints
Best jQuery Plugins of 2010 For our “Best of 2010″ series we’ve already shown your our picks for best free WordPress themes and free fonts. So for this week the focus in on jQuery. This javascript framework continued to grow in popularity during 2010, which meant an abundance of plugins being released. Nivo Slider A super smooth slider with loads of settings including 9 transition effects. Quicksand Reorder and filter items with a nice shuffling animation. Spritely Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. Colortip Colortip converts the title attributes of elements withing your page, into a series of colorful tooltips. Masonry Masonry is a layout plugin for jQuery. gvChart gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. Animated table sort YoxView Read More
SheepIt! - Un plugin jQuery pour cloner des éléments de formulaires SheepIt! est un plugin jQuery permettant de cloner facilement des éléments de formulaires HTML (Ajouter un site web, nouveau numéro de téléphone ...) Vous avez sans doute du développer des formulaires dans lesquels vos visiteurs doivent avoir la possibilité d'ajouter dynamiquement plusieurs champs comme ajouter un nouveau site web, ou téléphone ... Grâce à SheepIt!, vous pourrez facilement mettre en place des formulaires aux champs dynamiques pour que vos visiteurs puissent facilement ajouter de nouvelles infos. Son utilisation est simple, et plusieurs options sont disponibles pour configurer à votre guise l'ajout dynamiques de champs: 01. 03. var sheepItForm = $('#sheepItForm').sheepIt({ 04. separator: '', 05. allowRemoveLast: true, 06. allowRemoveCurrent: true, 07. allowRemoveAll: true, 08. allowAdd: true, 09. allowAddN: true, 10. maxFormsCount: 10, 11. minFormsCount: 0, 12. iniFormsCount: 2 Et côté HTML: 01.<! 02. 04. <! 05. 06. 07. 08. 09. 10. 11. 12. <! 14. <! 15. 16. <! 18. <! 19. 20. 21. 22. 23. 24.
35 More Useful jQuery Plugins and Techniques - Noupe Design Blog Oct 29 2009 Do you ever think "Ugh" when it is time to update or redesign your site? jQuery has a fantastic library of plugins and tutorials that can speed the benefits of developing your site while demanding less time and improving workflow constraints. To present a better user experience, we often need to take good care of the little details like the functionality and interactivity of tables, forms, images or other media resources; excellent navigation and security is also a must. So here are 35 more useful jQuery resources covering those topics as well as many more. Hopefully, you’ll find them helpful for your next web project. You may also want to consider our previous posts: 35 Fresh and Useful jQuery Plugins is our previous list of useful jQuery plugins featuring navigation, gallery and calendars jQuery plugins. 45+ New jQuery Techniques For Good User Experience which lists over 45 impressive jQuery plug-ins and techniques. jQuery Resources for Tables Forms jQuery Plugins
5 jQuery Must Have Code Snippets « A Love For Design » Web Design & Graphic Design Tutorials If you haven’t heard of jQuery yet, than you are definitely missing out on one of the most dynamic and stable JavaScript Libraries. With thousands of plug-ins and added widgets it makes jQuery one of the leaders in javascript frameworks. jQuery is designed to cut all hand-code in half if not more simplifying HTML document traversing, event handling, animating, and Ajax interactions for more streamlined web development. If you don’t already have a copy of javascript, one way that is growing fast is hot linking through Google – Which the idea is that it might already be cached in the users browser so there would be no downloading thus making a page load quicker. Downloading jQuery To do this, link google’s jQuery link (Note: T his one might be out dated so make sure you get the most up to date one). If you would like to manual download you can vist the link here to download. Now that you have jQuery installed correctly and working we can start adding functions for our website. Adding the CSS