I’m proud to launch our first ever Premium tutorial, exclusive to members. For this flagship tut, veteran developer/writer Dan Wellman – author of the recently released jQuery UI 1.6, from Packt publishing – will teach you how to build an advanced “poll” jQuery plugin. Not only will you have a lengthy tutorial to study, but we’ll also provide a companion video tutorial to assist.
To celebrate our first Premium tutorial, I also have some free books to give away, courtesy of Packt!.
A Wonderful, and In Depth Tutorial That Will Take You From A-Z
In this tutorial we’re going to be creating a jQuery plugin from start to finish; this plugin will allow us (or other developers) to easily add a simple poll widget to a web page or blog. By poll widget, I mean an area in which a question is posed which visitors are encouraged to answer. Once they have answered the question the results of the poll will then be displayed.
Sign up for a PLUS membership now!
Free Books!
To help celebrate the launch of our new plus program, I have some books, courtesy of the folks over at Packt publishing, that we’ll be giving away!!
Whatcha Got?
I have a few copies of Dan’s new “jQuery UI 1.6″ book, as well as “The Jquery Reference Guide”. All you have to do is leave a comment with a quick jQuery tip. We’ll then randomly choose several winners! I’ll go first.
If, within a function, you find yourself repeatedly calling “$(this)”, consider caching it.
$(this).click(dosomething); ..... $(this).somethingElse(); ...... $(this).evenMoreSomething();
can become…
var $this = $(this); $this.click(); ..... $this.somethingElse(); ..... $this.evenMoreSomething();
Join Tuts Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at NETTUTS, PSDTUTS, and VECTORTUTS! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Dan Wellman
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I wish I had a plus account. Why don’t you have a give-away “Plus account” promotion?
Tip:
Use .stop() when you use .animate()
I have a jQuery Reference Guide, so I want a jQuery UI 1.6 if I win this.
Thanks.
Guyz the video is too big! It doesnt fit my browser at 1280 by 760 px. Please fix it!
If we want this book, doesn’t that imply we don’t know a lot about jQuery, therefore we wouldn’t have any tips to share?
The only tip I can offer is practice, experiment and try things out, eventually you will know a lot about jQuery. :)
Binding events to dynamically created elements made easy by the live query plugin! http://plugins.jquery.com/project/livequery
Create your own functions to extend jQuery.
$.fn.myNewFunction = function() {
return $(this).addClass(‘works’);
}
Use it like this:
$(‘#div’).myNewFunction();
Need to queue your css effect until after the animation has finished?
$(function(){
$('#box').click(function(){
$(this).animate({left:300}, 700, function(){
$(this).css('backgroundColor', '#333');
});
});
});
And that’s my little tip :)
jQuery allows you to create custom filter selectors. This can be incredibly useful if you ever need to re-use certain filters. For example:
$.expr[':'].external = function(elem,index,match) {
var url = elem.href || elem.src,
loc = window.location;
return !!url.match(new RegExp(‘^’ + loc.protocol + ‘//’ + ‘(?!’ + loc.hostname + ‘)’ ));
};
// You can now use it within your selectors:
// Find all external anchors:
$(‘a:external’);
// Find all external script elements:
$(‘script:external’);
// Determine if link is external:
$(‘a#mylink’).is(‘:external’); // true/false
need jquery to serialize form checkbox which are checked…very simple :)
$(“input [@type='checkbox'][@checked]“).serialize();
My jQuery tip is make sure you have jQuery
Very important aspects in jQuery plugins authoring is the closure for protecting your variables
and “return this.each();” for Chaining capability
(function($) {
$.fn.pluginName = function() {
return this.each(function(){
// Your code goes here
});
};
})(jQuery);
I hope i can get jQuery UI book
I’ve already got the UI book but would love the other one :D
My tip is that remember in jQuery 1.2.6 it was impossible to interact with elements jQuery created for you?
The old way:
$(“p”).click(function(){
$(this).after(“Another paragraph!”);
});
If you clicked on the new paragraph, it would not create a new paragraph. Nothing would happen.
Using jQuery’s new live event (V 1.3 up) we can do this:
$(“p”).live(“click”, function(){
$(this).after(“Another paragraph!”);
});
And now if you run that, click on the paragraph, then click on a newly created paragraph, and it will create yet another paragraph! Voila!
ANd I’ll be subscribing to tuts+ this evening :D Can I pay via paypal?
I’ll dive into net+
.
.
tip: Open external links in a new window:
$(‘a[rel=external]‘).click(function(){ $(this).attr(’target’, ‘_blank’) })
I signed up for a + account this morning. Great Tut. I dont have a jQuery tip, but I really want to learn it. One of those books would be awesome to have. I dont know which would be better for me since I know next to nothing about jQuery, so either would be good to have along with the net.tutplus jQuery tutorials.
i dont has any tip but i want the book.
If you need to add a lot of attributes to something like an anchor tag, the example below will save a lot of time:
$(‘a’).attr({
href: ‘link/to/blog’,
id: ‘link’,
class: ‘highlight’
});
JQuery tip:
You can load both jquery and jquery UI in your pages using google ajax libraries, with google.load() method or direct linking:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
and
http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js
It decreases load from your server by downloading the libraries from google.
jQuery Tip:
Add a class to all external links to have them open in a new window.
$(‘a.external’).click(function(){
window.open(this.href);
return false;
});
From the looks of things, the best tip for us newbies might be to get a Plus account and get stuck into the tutorials. Practice makes perfect and all that. :)
I want to change the text of an element contained in a iframe :
I got this code :
…
…
…
And this loaded in the iframe :
…
Hi !
…
To change the text of the h1, I do this :
$(‘#myIframe’).contents().find(‘h1′).text(“Hello iframe !”);
Et voilà.
The comments are broken… I can’t insert some HTML code…
I want to change the text of an element contained in a iframe :
I got this code :
…
<iframe id=”myIframe”>…</ iframe>
…
And this loaded in the iframe :
…
<h1>Hi !</h1>
…
To change the text of the h1, I do this :
$(‘#myIframe’).contents().find(‘h1′).text(“Hello iframe !”);
Et voilà.
To bad I don’t have a plus account… :( :( :(
This is great. Thanks.
Sorry, new to jquery, so I don’t have a good tip to share :( I would love the UI 1.6 book though! And I am a Tuts Plus sub :)
What a crock – build a blog with a big user base, then start publishing posts for a premium service. Why post +TUTS on this blog?
Build a large user base to ATTEMPT to extract $9 / month while generating nearly $10,000 per month in revenue.
Should this post be in NetTuts? Net Tuts is Ad supported!
@Neil, totally agree. Sorry to be a complainer but I wish there was no such thing as plus!
@Neil, @Meshach – If you don’t want to sign up for our Plus service, you don’t have to. Absolutely nothing will change with this regular site. I’m not sure how there can be anything negative with such a system.
@Neil – Do you have any idea how much money we spend on this site every day? We put a HUGE amount of effort into making this such a high quality site. …and where did you get the $10k figure from?
i dont really have jQuery tips to offer. My skill is very basic like to add class remove class.. etc.. etc.. but i need the book… :)
@Jeffrey, $10K – I’m close right, its probably more like $7k but still, Net Tuts is ad supported so it should not be redirected to a premium blog, pluttuts should be a totally separate entity promoted MAYBE once a month in a brief +TUTS roundup post . And yes, I understand that you have staff and guest writers to pay but my opinion is not going to change.
Thanks everyone for the jQuery tips. We’ll be choosing some of you at random on Monday morning!
My tip: the “show” funtion with a parameter will apply a nice transition, but may also give you an incorrect positioning. use “show” with no parameters or use absolute positioning to avoid this.
jQuery = Cool !
ah , i m newbie and need the book !
Its great site really to learn the web development tutorials.
I’m a beginner in jquery ui, don’t have any tip, but I want to read the ui book. :)
Howz this for a tip?
Show only the first 10 comments and add a link underneath to expand the rest of comments. This will allow users to add their own comments without having to scroll all the way down.
And oh, just to make my tip relevant – use jQuery to expand the rest of the comments :)
who’s are selected for the free jquery books.
My poll will not submit the answer to mysql database ?!!!!:@:@
http://www.fifa-tricks.co.uk/poll/pollTest.html
I got it to submit to my database but when i press submit the page does not refresh, allthought it is added to the database ,,, Can someone please help me and tell me what could be the problem!?
i wish i had a plus account.