background preloader

jQuery for Designers - Tutorials and screencasts

jQuery for Designers - Tutorials and screencasts
Featured Simple use of Event Delegation Posted on 14th June 2011 — Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation. View Tutorial Tutorials – It’s the age old (well, in webby terms) issue of how to populate one select box based on another’s selection. It’s actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax.

http://jqueryfordesigners.com/

Related:  jqueryUrban PreferGeradores & Códigos

SlideDown Animation Jump Revisited Watch Watch Animation Jump Revisited screencast (Alternative flash version) QuickTime version is approximately 20Mb, flash version is streaming. View the demo used in the screencast Understanding the Problem Effortless Full Screen Background Images With jQuery Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size. We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

Depth And Nice 3D Ribbons Only Using CSS3 we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills. Sure? Yes, it’s possible to create a simple and nice (3D) layout playing with some CSS3 properties, only using code and without the help of Photoshop. First of all we set up our files. We create a new folder with index.html and style.css.

jQuery Reel Plugin verb ... the room reeled GO ROUND, go round and round, whirl, spin, revolve, swirl, twirl, turn, swim. Try dragging this area or roll your mouse wheel over it Now even on Android 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.

Animated fullscreen background image slideshow using jQuery Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.

Multiple Backgrounds with CSS3 Home / CSS3 Previews / Multiple Backgrounds with CSS3 CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. download DataTables is open source software, free available for you to use and modify. The DataTables distribution include a wide range of examples, the source files (including compressed versions) and all first class plug-ins. Download using the button below: Interested in trying out the next generation of DataTables?

Animated Buttons with CSS3 Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. View demo Download source The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are.

25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available JavaScript frameworks like jQuery, prototype (and script.aculo.us), Dojo and mootools have become very popular because they are making the creation of dynamic effects much easier without using fx. flash. jQuery has become one of the most used JavaScript libraries today and can be found in the core of popular products like WordPress and Drupal.The community is providing a huge amount of free plugins making it possible to find good solutions to nearny any need you may have. This article will introduce you to more than 25 jQuery plugins providing enhancements to how you can display images on your web pages. This is essential for creating dynamic state of the art web solutions. Lets get started!

Related:  hygune