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.

Related:  jqueryGeradores & CódigosUrban Prefer

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 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.

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!

jQuery Vertical Slider - Digit Stack vertical Mar 19, 2014 Remove frame and shadows in vertical slider jquery Hi, we love the new WOW. We have one question. can you remove or make smaller the border around the picture? If so how? 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action. What Is jQuery?

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 campagin.

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. 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.

How-to: Create light box effect with jQuery & CSS Lightbox with CSS, HTML & jQuery As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality. So I created the light-box effect with a few lines of code using CSS and jQuery.

Automatic jQuery site subscription lightbox I’ve had many of you email me asking for a tutorial that shows how to create the subscription lightbox that activates for the first time you visit the site, and I’ve finally got around to writing it up. Getting Started You’ll need to include the jQuery library as well as the Colorbox lightbox JS and CSS which are included in the download below. The JS Code

Related:  Web Code How TojqueryTutorialJQuerypluginjquery教學design 13