<pedrocorreia.net ⁄>

<Extending CSS with jQuery - A New Year's Guide ⁄ >

clicks: 3453 3453 2010-01-06 2010-01-06 goto programacao myNews programacao  Bookmark This Bookmark This

Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn't been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author - my original online source didn't include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up. This revised version of the article gives full credit to Chris who is indeed the man that gave the original presentation and was kind enough to give his permission for his slides to be used. I and this article would like to thank him for being the main inspiration behind this topic.

Having viewed Chris's presentation, I thought I'd write a post around it to help my readers see how jQuery helps us to extend CSS in ways that make our jobs a whole lot easier. I've always thought that jQuery was extraordinary framework - allowing both web developers and designers an easy way to harness the full visual capabilities of JavaScript. One of the nicest advantages of jQuery has been ability to extend CSS beyond what was previously capable with simple mark-up alone. In this post, I'm going to show you how to use jQuery to fix cross browser compatibility issues, solve some shortcomings with CSS, do things CSS just can't do on it's own and we'll finally also go through some real-world problems that will be useful to both those new to the framework and those coders who've been using it for a while. I hope you find it helpful!.

Before we leap in, let's take a look at why jQuery has come to be the most widely adopted of JavaScript frameworks. First, it's extremely designer friendly. In Chris's slide below you'll see some standard CSS mark-up - hover conditions, list elements - defining styles is very much a static process, but jQuery allows you to easily and instantly add or remove classes, conditions, functions and more to any element on your page so that it takes CSS to the next level - interactivity. jQuery also has a very short learning curve (which as some of us know) has meant that creating effects like boxes sliding up or down a page child's play.

este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:


Subscribe News RSS  Subscribe News Updates by E-mail

myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 19485 19485 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao

Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 19034 19034 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao

HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 30347 30347 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao

Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 19189 19189 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao

Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 18871 18871 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao

Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 18926 18926 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao

Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 19449 19449 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao

15 Handpicked jQuery Drop Down Menus Tutorials new ...

Here we are presenting another brilliant collection of 15 jQuery navigation menu that you can downlo (...)

clicks: 17767 17767 2012-05-10 2012-05-10 goto url (new window) smashingapps.co... goto myNews programacao