Damn, wish i had a plus account this looks cool

Great screencast, following it right now.

[First Comment..... I hope]

If you’re planning on showing something when you click on something with jQuery, hide that element with jQuery so non-JavaScript users can still see that content.

$(’#element’).hide(); instead or #element { display: none; }

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’);
});

This looks great! Unfortunately, the screencast doesn’t ‘fit’ into my browser window (1440×900, Mac – even with the dock hidden). I’ve had to zoom out using Firefox to fit the whole player in.
Any chance of another way to watch the screencast?

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

There is a problem with the player and chrome, that needs to be fixed, its not showing the whole video player.

Use google.load() for many javascript libraries.

unless developing for a local intranet load jquery from Google’s CDN. It may not always be faster but for most users it will either be already in their cache or load from one of Google’s data centers and the average load time will be better across all users.

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
}

@Amo: I was thinking the same thing. But people could still see some of the coding, in this case, the jQuery.

@Devin: The site exists.

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
}

To style differently an external link just do this

$(”a”).not(”[href^=/]“).not(”[href^=#]“).append(”?”);

They will me marked with a EXTERNAL class.

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

try
$(function() {} );

Awesome first PLUS tut. Great Job Dan. and the Envato team for a smooth release of the new plus.

here is another quick tip really simple and nice

location.reload(true);

use that to make a page reload

Where possible give your selectors a context.
Ex: $(’#content .class’) is faster than $(’.class’)

And another one: when possible try to put your JavaScript at the bottom, right before the closing body element.

Hey… you didn’t say they had to be original Just from the top of my head.

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.

Whenever you have a question about what a jQuery element can do…consult the Wiki. It’s in depth with simple explanations, source code, and demos.

I wish i could have both the books

Hmm quick tips… as Derek mentioned you can create a ready handler very easily, but use jQuery not the dollar:
jQuery(function($){ /* $ now always references jQuery scope */ });

If you want to stop “dancing” animations, add a call to stop (docs) before the animation call.

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.

Need to REALLY stop animations from going out of control? Have a grid of items that fade in/out on hover and they go crazy when you hover all over the place?

Fix it with this:

$(item).hover(function () {
$(this).find(’.overlay’).queue(”fx”, []); //Stop any previous queued animation
$(this).find(’.overlay’).fadeTo(’slow’, 1.00);
}, function() {
$(this).find(’.overlay’).queue(”fx”, []); //Stop any previous queued animation
$(this).find(’.overlay’).fadeTo(’slow’,0);
});

Just make sure the opacity on overlay is initialized to 0, do not use display:none or hide().

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 know this is on the docs, but still useful to post here . If you are using another javascript library ( usually by force ) there are ways you can get jQuery to not conflict with it:

var $j = jQuery.noConflict();

$j(document).ready(function(){
$j("div").hide();
});

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);})();

I often use this bookmarklet to jQuerify any web page on the fly:

javascript:var%20s=document.createElement(’script’);s.setAttribute(’src’,%20′http://jquery.com/src/jquery-latest.js’);document.body.appendChild(s);s.onload=function(){/*Your Code Here*/};void(s);

More info here:http://ejohn.org/blog/hacking-digg-with-firebug-and-jquery/

and here:

http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet

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.
});

Css-tricks.com has some great videos, some of them that include jQuery, great for beginners

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.

I don’t have a good tip…THAT’S WHY I NEED THE BOOK!

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’);
});

Awesome!! I have a Plus subscription so I’m going to view this now, I’m excited . Of course I’m a real JavaScript and JQuery newb, but still.

And my tip – use google to load the JQuery framework so that your website will not have as much load on it, like this -

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(”‒ “);

By the way looks like this tutorial will be very helpful. Too bad I can’t pay for it.

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/

:S, i gotta pay now

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

I don’t mind paying

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

This is… TOO GREAT!!!
Thanks a bunch, TUTS+

I want this book

My jquery tip is to deal with slideUP, slideDown, show, hide etc

To call the slideDown only when it is hidden
if ($(”#discountDisplay”).is(”:hidden”)){
$(”#discountDisplay”).slideDown(”slow”);
}

To call the slideUp only when it is shown
if (!$(”#discountDisplay”).is(”:hidden”)){
$(”#discountDisplay”).slideDown(”slow”);
}

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);
}
}

Small change in my previous comment

To call the slideDown only when it is hidden
if ($(”#discountDisplay”).is(”:hidden”)){
$(”#discountDisplay”).slideDown(”slow”);
}

To call the slideUp only when it is shown
if (!$(”#discountDisplay”).is(”:hidden”)){
$(”#discountDisplay”).slideUp(”slow”);
}

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

Using the jquery library you can use several xpath selectors. For instance to add a class to all pdf files you are linking to you can use this jquery snippet…

$(’a[@href$=".pdf"]‘).addClass(’PDF’);

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

Great work as always guys.

Here’s my JQuery Tip:

Use: $(window).bind(”load”,function(){ });

instead of:

$(document).ready(function(){});

When you want to execute jquery commands after the page and all its assets (images, etc) have loaded first.

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!

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

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