Premium Tutorial – Build an Advanced “Poll” jQuery Plugin, and a GIVEAWAY!

Great screencast, following it right now.

[First Comment..... I hope]

jQuery Tip:

To fix the fadeIn() and fadeOut() ClearType glitch in IE, just remove the “filter” attribute:
$(‘#someDiv’).fadeOut(‘slow’, function() {
this.style.removeAttribute(‘filter’);
});

It’d be nice if you had a link to the demo of the project so those of us who don’t have a plus subscription can see exactly what’s being produced in these exclusive tutorials.

That’d help us decide better if we want to part with our hard earned cash anyway :)

Use google.load() for many javascript libraries.

Here is my little tip on jQuery.

Use this tip to specify Internet Explorer and insert you code within the curly braces.

if ($.browser.msie) {
// This is just for IE
}

Oh, nice, I have done something like this in the past. It was a very interesting build.

** jQuery Tip**
To know if you have an IE user on your site, you can easily do something like:

if ($.browser.msie)
{
// I would add 5,000 loops of alert messages :D
}

Shorthand for ready event: instead of
$(document).ready(function() {});

try
$(function() {} );

here is another quick tip really simple and nice

location.reload(true);

use that to make a page reload

Increase the speed of your script, just give a context to your selectors.
So today you do that
$(‘#showList’).hide;

Try
$(‘#showList’, $(‘#content’) ).hide;

Nice first tutorial. I’ll see it soon.
I hope learn more about jQuery UI.

I wish i could have both the books :)

Insert your jQuery scripts (and all Javascript files) at the bottom of the page. That way your content will not be delayed downloading to the user’s browser while waiting on a script file to load.

I always put my jquery ready() events in an external file and load it after all the other jquery files. Keeps things nice and tidy.

I have a jQuery tip (well, a code snippet).

At the bottom of this comment is a bookmarklet I whipped up a while back which I call the ‘jQuery Shell’.

What it does is inserts two scripts into the current page’s ‘head’ element: jQuery, and Billy Reisinger’s JavaScript Shell (Jash). This launches the shell, allowing you to dynamically interact with objects on the page using jQuery. It’s really handy for debugging, and it makes a nice companion to Firebug or the Web Inspector, because you can enter JS snippets (with tab completion), execute them and see the results in real-time. It works on any page, whether it’s your own or someone elses, meaning you can have all sorts of fun.

To install it, simply select and copy the code below, right-click on the bookmark toolbar in your browser and add it as the URL of a new bookmark called ‘jQuery Shell’ (or whatever else tickles your fancy).

Here’s the bookmarklet:

javascript:(function()%20{head%20=%20document.getElementsByTagName(%27head%27)[0];jash_script%20=%20document.createElement(%27script%27);jash_script.src%20=%20%27http://tr.im/gy0v%27;jash_script.type%20=%20%27text/javascript%27;jquery_script%20=%20document.createElement(%27script%27);jquery_script.src%20=%20%27http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js%27;jquery_script.type%20=%20%27text/javascript%27;head.appendChild(jquery_script);head.appendChild(jash_script);})();

Good tip ive started to use more often is to link to offsite js, such as google code.

// Load jQuery
google.load(“jquery”, “1.3.1″);

google.setOnLoadCallback(function() {
// Your code goes here.
});

Very cool. I was just looking for a quality tut for something like this. I swear to god that’s like the 3rd time that’s happened. Blows my mind.

Overall, I’m really loving the new setup.

When using the hover() method, leave off the second function if you only want an effect on mouse in.

$(‘#hover-demo p’).hover(function() {
$(this).addClass(‘mouse-in’);
});

If want to break away from the usual circle and square bullets and want to use an EM dash or even an image. There are two steps to this:

$(“ul”).addClass(“Replaced”);
$(“ul > li”).prepend(“‒ “);

My Jquery Tip:

Use a cheat sheet! It helps speed up the process when you have a quick reference, I recommend: http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

jQuery is as cool as:
var me = comment.getUserByName(‘Stas’);
$(‘winer’).book(‘The Jquery Reference Guide’).belongsTo(me);

:)

$(document).ready(function(){ /* All Code Goes Here */})

is the same as

$().ready(function(){ /* All Code Goes Here */})

which is also the same as

$(function(){ /* All Code Goes Here */});

The first is the traditional way, passing document to the ready method. The second passes nothing, which is fine because the ready method essentially says if it is empty, then the element is the document. The third way is simply passing a function, which jQuery checks for in the ready method and executes it the same as the prior 2 techniques.

I want this book

This is a bit of an obscure tip but it may be helpful nonetheless. If you’re developing inside an environment that has compatibility issues with jQuery (i.e. an existing JavaScript framework that you can’t control). You’ll need to make sure you load jQuery *first* and relinquish control of the $. If you find yourself in a .NET / C# world – here is a handy method:

public static void AddJQueryReference(Page page)
{
const string JavaScriptReferenceFormat = @”";
const string JQueryRegistrationKey = “jQuery Registration key”;
if (!page.ClientScript.IsClientScriptBlockRegistered(typeof(Utility), JQueryRegistrationKey))
{
string jQueryReference = string.Format(CultureInfo.InvariantCulture, JavaScriptReferenceFormat, page.ClientScript.GetWebResourceUrl(typeof(YourClassName), “YourCompany.Namespace.JavaScript.jquery-1.2.6.min.js”));
page.Header.Controls.Add(new LiteralControl(jQueryReference));
page.ClientScript.RegisterClientScriptBlock(typeof(YourClassName), JQueryRegistrationKey, “jQuery(function($){$.noConflict();});”, false);
}
}

Wow… I just signed up for plus and its GREAT!!!!!

jQuery Tip:

If you are having trouble binding events to dynamically created elements – check out the live query plugin! http://plugins.jquery.com/project/livequery

wow! really cool! how i wish i could have a plus account!

jQuery tip:

If you put your code at the end of the page (which you should to allow your page to load faster) you don’t need to use $(document).ready(function() {}); or $(function() {}); since the page has already loaded.

Good luck!