Learning jQuery » Tools http://www.learningjquery.com Tips, techniques, and tutorials for the jQuery JavaScript library Sat, 06 Mar 2010 18:10:17 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Setting up Visual Studio Intellisense for jQuery http://www.learningjquery.com/2009/07/setting-up-visual-studio-intellisense-for-jquery http://www.learningjquery.com/2009/07/setting-up-visual-studio-intellisense-for-jquery#comments Thu, 16 Jul 2009 16:26:39 +0000 Ralph Whitbeck http://www.learningjquery.com/?p=822 In September 2008, at the jQuery Conference, it was announced that Microsoft would be shipping its upcoming releases of Visual Studio with jQuery built in. They would not fork or change the jQuery code but ship it as is. Microsoft also announced that they would distribute IntelliSense-annotated documentation JavaScript files for Visual Studio 2008 that developers can reference in their files to enable IntelliSense for jQuery. The following instructions will help you get started using this tool to make writing jQuery scripts faster than ever.

Setting up Your Files for jQuery IntelliSense

First, set up jQuery on your page by downloading the latest version from the jQuery site.

Next, you will need to download the jQuery Documentation file from the jQuery site.

download documentation

Download the files and add them to your project.

IntelliSense in external JavaScript files

At the top of the JavaScript file in which you would like to have jQuery IntelliSense enabled, you will need to add a line to reference the documentation file:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

IntelliSense inline on your ASPX page

There are a couple of scenarios that may affect if you include a reference to the VSDOC file or not. If in doubt, just add a reference to the documentation file.

If you are linking to jQuery by the Google Code AJAX Library or are linking to jQuery from anywhere outside of your project you will need to reference the documentation file.

From each ASPX page you want jQuery IntelliSense you’ll want to call the reference within a server-side conditional statement so that the documentation file will still load in Visual Studio but will not load at run-time. Add the following after your jQuery declaration:

PLAIN TEXT
ASP:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  2. <% if (false) { %>
  3.   <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
  4. <% } %>

If you downloaded jQuery and saved it to your project Visual Studio will look for the vsdoc.js file automatically if the following conditions are met.

You've downloaded and installed the hotfix for Visual Studio.

jQuery and the documentation file need to be named the same with the exception that the documentation file end with -vsdoc.js. So when you add jQuery to your project make sure to rename them similarly. For instance, jquery-1.3.2.js is your jQuery library, Visual Studio will look for the documentation file at jquery-1.3.2-vsdoc.js and load it.

(Note: the jQuery 1.3.2 documentation file is named jquery-1.3.2-vsdoc2.js on the Download page so make sure you take out the 2 so that the file will be found by Visual Studio)

If you can't meet these conditions you'll need to reference the documentation file as shown above.

To test to make sure the documentation file loaded correctly, you can type $( and you should be presented with some documentation.

test IntelliSense

Additionally, you can type in $(document).r and you will be presented with a drop down of available options to choose from, one being "ready."

test with document ready

Now as you write your jQuery code, you'll be helped along by seeing what methods and properties are available to you.

Related Links

Update

I've updated the post to reflect the hotfix for Visual Studio which enables Visual Studio to automatically load the documentation file for inline jQuery on ASPX pages if it's named similarly to the jQuery file. Thanks to Dave Ward for pointing this out in the comments.

[inline][/inline] ]]> http://www.learningjquery.com/2009/07/setting-up-visual-studio-intellisense-for-jquery/feed 30 Better, Stronger, Safer jQuerify Bookmarklet http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet#comments Wed, 29 Apr 2009 14:12:43 +0000 Karl Swedberg http://www.learningjquery.com/?p=687 A long time ago I built myself a little bookmarklet to load jQuery on pages that don't already have it. The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. Now that a lot more great feedback has come through the comments of the updated bookmarklet post, I've decided to update it one more time.

The Bookmarklet

To use the bookmarklet, drag the following link to your bookmark/favorites list:

» [inline]jQuerify[/inline] «

Then, when you're on a page in which you want to play around with jQuery in the console, just click the bookmarklet.

Problems with the Other One

The biggest problem with the former version was that it didn't work when other libraries that use the $ function, such as Prototype and Mootools, were already loaded on the page. A number of people in the comments suggested that I simply add a jQuery.noConflict(); line to the script. But I wasn't crazy about the idea of having to use jQuery() instead of $() even if no other libraries had been loaded.

Another problem, one that I noticed while testing my new version, was that sometimes the jQuery file that I was inserting from the Google CDN wouldn't fully load by the time I attempted to use it later in the bookmarklet. At least, I think that's what was going on. In any case, it was throwing a "jQuery is not defined" error.

A Few Improvements in This One

To handle the problems, I'm having the script do a few things differently:

  • Set up a counter to check 10 times if jQuery is loaded before giving up.
  • Use a setTimeout to put a one-quarter-second (250ms) delay interval in between attempts.
  • Check if the $() function is already being used by another library. If it is:
    • use jQuery's $.noConflict function to release the $() to the other library.
    • set $jq as an alias to jQuery for convenience.
    • mention in the flash notice that jQuery is in noConflict mode and that $jq() should be used instead of $().
  • If after multiple attempts jQuery still won't load for some reason, set the flash notice's message accordingly and then remove it through plain old JavaScript rather than jQuery.

Here is the script in its unbookmarkleted form:

PLAIN TEXT
JavaScript:
  1. (function() {
  2.   var s=document.createElement('script'),
  3.       el=document.createElement('div'),
  4.       b=document.getElementsByTagName('body')[0];
  5.   var otherlib=false,
  6.       startCounter=tryCounter=10,
  7.       delay=250,
  8.       msg='';
  9.   s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
  10.   el.style.position='fixed';
  11.   el.style.height='32px';
  12.   el.style.width='220px';
  13.   el.style.marginLeft='-110px';
  14.   el.style.top='0';
  15.   el.style.left='50%';
  16.   el.style.padding='5px 10px 5px 10px';
  17.   el.style.fontSize='12px';
  18.   el.style.color='#222';
  19.   el.style.backgroundColor='#f99';
  20.  
  21.   if(typeof jQuery!='undefined') {
  22.     msg='This page already using jQuery v'+jQuery.fn.jquery;
  23.     return showMsg();
  24.   } else {
  25.     if(typeof $=='function') {
  26.       otherlib=true;
  27.     }
  28.     document.getElementsByTagName('head')[0].appendChild(s);
  29.   }
  30.   function showMsg() {
  31.     el.innerHTML=msg;
  32.     b.appendChild(el);
  33.     window.setTimeout(function() {
  34.       if (typeof jQuery=='undefined') {
  35.         b.removeChild(el);
  36.       } else {
  37.         jQuery(el).fadeOut('slow',function() {
  38.           jQuery(this).remove();
  39.         });
  40.         if (otherlib) {
  41.           $jq=jQuery.noConflict();
  42.         }
  43.       }
  44.     } ,2500);    
  45.   }
  46.   var tryjQuery=function() {
  47.     setTimeout(function() {
  48.       if (typeof jQuery=='undefined') {
  49.         if (tryCounter) {
  50.           tryCounter--;
  51.           tryjQuery();
  52.         } else {
  53.           msg='Sorry, but after ' + startCounter + ' attempts, jQuery hasn't loaded';
  54.          showMsg();
  55.        }
  56.      } else {
  57.        msg='This page is now jQuerified with v' + jQuery.fn.jquery;
  58.        if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
  59.        showMsg();
  60.      }
  61.    }, delay);
  62.  };
  63.  tryjQuery();
  64. })();

I'm sure it can be improved even further. If you have suggestions for making it more elegant, more efficient, more betterer, I would love to hear them in the comments.

Update

Based on a few comments, I've updated the script one more time to "basically watch the onload and readyState, and fire the callback, thus removing the necessity to poll," as Paul Irish describes below.

Here is the updated link (I also updated it above):

» [inline]jQuerify[/inline] «

And here is the updated script:

PLAIN TEXT
JavaScript:
  1. (function() {
  2.   var el=document.createElement('div'),
  3.       b=document.getElementsByTagName('body')[0];
  4.       otherlib=false,
  5.       msg='';
  6.   el.style.position='fixed';
  7.   el.style.height='32px';
  8.   el.style.width='220px';
  9.   el.style.marginLeft='-110px';
  10.   el.style.top='0';
  11.   el.style.left='50%';
  12.   el.style.padding='5px 10px 5px 10px';
  13.   el.style.zIndex = 1001;
  14.   el.style.fontSize='12px';
  15.   el.style.color='#222';
  16.   el.style.backgroundColor='#f99';
  17.  
  18.   if(typeof jQuery!='undefined') {
  19.     msg='This page already using jQuery v'+jQuery.fn.jquery;
  20.     return showMsg();
  21.   } else if (typeof $=='function') {
  22.     otherlib=true;
  23.   }
  24.  
  25.   // more or less stolen form jquery core and adapted by paul irish
  26.   function getScript(url,success){
  27.     var script=document.createElement('script');
  28.     script.src=url;
  29.     var head=document.getElementsByTagName('head')[0],
  30.         done=false;
  31.     // Attach handlers for all browsers
  32.     script.onload=script.onreadystatechange = function(){
  33.       if ( !done && (!this.readyState
  34.            || this.readyState == 'loaded'
  35.            || this.readyState == 'complete') ) {
  36.         done=true;
  37.         success();
  38.       }
  39.     };
  40.     head.appendChild(script);
  41.   }
  42.   getScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',function() {
  43.     if (typeof jQuery=='undefined') {
  44.       msg='Sorry, but jQuery wasn\'t able to load';
  45.     } else {
  46.       msg='This page is now jQuerified with v' + jQuery.fn.jquery;
  47.       if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
  48.     }
  49.     return showMsg();
  50.   });
  51.   function showMsg() {
  52.     el.innerHTML=msg;
  53.     b.appendChild(el);
  54.     window.setTimeout(function() {
  55.       if (typeof jQuery=='undefined') {
  56.         b.removeChild(el);
  57.       } else {
  58.         jQuery(el).fadeOut('slow',function() {
  59.           jQuery(this).remove();
  60.         });
  61.         if (otherlib) {
  62.           $jq=jQuery.noConflict();
  63.         }
  64.       }
  65.     } ,2500);    
  66.   }
  67. })();

Let me know if this one causes any problems.

]]> http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/feed 53 Updated jQuery Bookmarklet http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet#comments Sun, 08 Jun 2008 18:36:48 +0000 Karl Swedberg http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet

For the most recent version of the bookmarklet, see the Better, Stronger, Safer jQuerify Bookmarklet entry.

About 1 1/2 years ago I put together a little "jQuerify" Bookmarklet (and blogged about it here). It's a nice little tool that allows you to play around with jQuery on a page that doesn't already have jQuery loaded and see the results immediately. Based on feedback from others, I've updated the bookmarklet a bit. Now, it first checks to see if jQuery is already loaded on the page and doesn't bother loading it if it's there. Also, instead of showing an alert message, it temporarily places an absolutely positioned div at the top of the page with a message saying either "This page is now jQuerified" or "This page was already jQuerified." After 2 1/2 seconds, the message fades out and is removed from the DOM. Here is what the script looks like before it is converted to bookmarklet format (replacing spaces with %20, etc.):

PLAIN TEXT
JavaScript:
  1. (function() {
  2. var s=document.createElement('script');
  3. s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
  4. if(typeof jQuery!='undefined') {
  5.   var msg='This page already using jQuery v' + jQuery.fn.jquery;
  6. } else {
  7.   document.getElementsByTagName('head')[0].appendChild(s);
  8.   var msg='This page is now jQuerified'
  9. }
  10. var el=document.createElement('div');
  11.   el.style.position='fixed';
  12.   el.style.height='30';
  13.   el.style.width='200';
  14.   el.style.margin='0 auto 0 auto';
  15.   el.id='jq-kswedberg';
  16.   el.style.top='0';
  17.   el.style.left='40%';
  18.   el.style.padding='5px 10px 5px 10px';
  19.   el.style.backgroundColor='#f99';
  20.   el.innerHTML=msg;
  21. var b=document.getElementsByTagName('body')[0];
  22. b.appendChild(el);
  23. window.setTimeout(function() {
  24.   jQuery('#jq-kswedberg').fadeOut('slow',function() {
  25.     jQuery(this).remove()
  26.   });
  27. }, 2500);
  28. })();

It might look like a lot of code for something so simple, but most of it is just setting the styles for the inserted div element. Speaking of which, if you're using this in Internet Explorer 6, you might want to change el.style.position='fixed' to el.style.position='absolute'. Also, notice that the script's src is now pointing to the new Google CDN. Nice!

Here is the bookmarklet, ready to go:

» jQuerify «

Just drag it up to your bookmarks (or favorites) toolbar. Then, when you're on a page that doesn't have jQuery, all you have to do is click on the bookmarklet and you'll be ready to play around with jQuery on that page through the browser's console.

What? Your browser doesn't have a console? If you're using Firefox, you can download the Firebug add-on and use its console (you should really have this add-on anyway; it's amazingly helpful for html/css/js development). For Safari, open the Advanced tab in the Preferences and check the checkbox for "Show Develop menu in menu bar." Then you can open the console by selecting Develop > Show Error Console. Finally, the DebugBar plugin has a console that can be used in Internet Explorer.

Update

Thanks to Jonno's suggestion in comment #4 below, I've slightly modified the bookmarklet again to show which version of jQuery has been included on the page. If you ever want to know the jQuery version without using the bookmarklet, just type this in the console: jQuery.fn.jquery.

Update 2

Mark Fowler suggested that I "properly scope" the bookmarklet so variables wouldn't pollute the global namespace. Makes sense to me, so now the bookmarklet is updated with a self-executing function wrapping it. No need anymore for the void(s) at the end, since the variable is only defined within th

]]> http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet/feed 48 Have Your jQuery Fun on Any Site with Greasemonkey http://www.learningjquery.com/2007/02/have-your-jquery-fun-on-any-site-with-greasemonkey http://www.learningjquery.com/2007/02/have-your-jquery-fun-on-any-site-with-greasemonkey#comments Fri, 02 Feb 2007 04:36:16 +0000 Karl Swedberg http://www.learningjquery.com/2007/02/have-your-jquery-fun-on-any-site-with-greasemonkey Hot on the heels of my jQuerify Bookmarklet entry [note: update bookmarklet here] and John Resig's Hacking Digg with Firebug and jQuery entry, Joan Piedra has put together a Greasemonkey user script (Firefox only) that lets jQuery load automatically on any site that you've set for it in the Greasemonkey preferences dialog.

Not only that, but this user script even gives you a placeholder to add your own jQuery code, so you can create specialized user scripts that take advantage of jQuery.

Update

There has been a lot of improvement in this area over the past couple years. For more information see jQuery in Greasemonkey scripts using the metadata key @require

The Script

The default code, once jQuery has been loaded, is an alert, so you may want to comment out that line right away (unless, of course, you like alert messages popping up for every web page). For the time being, I've replaced it in mine with an inline message that is removed after making a cameo appearance. Here is what that looks like, with a little of Joan's context:

PLAIN TEXT
JavaScript:
  1. // All your GM code must be inside this function
  2. function letsJQuery() {
  3. //make sure there is no conflict between jQuery and other libraries
  5. //notify that jQuery is running...
  6.   $('<div>jQuery is running!</div>')
  7.     .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'})
  8.     .prependTo('body')
  9.     .fadeIn('fast')
  10.     .animate({opacity: 1.0}, 300)
  11.     .fadeOut('fast', function() {
  12.       $(this).remove();
  13.     });
  14. //start custom jQuery scripting.
  15. }

Note: This is not the full user script. It is just a snippet that runs once jQuery has been loaded via Greasemonkey.

To be considerate of John Resig's bandwidth, we should all change the following line to point to our own copy of jquery.js:

PLAIN TEXT
JavaScript:
  1. GM_JQ.src = 'http://code.jquery.com/jquery-latest.pack.js';

Oh, the Possibilities!

I am very excited about the possibilities that Joan's Greasemonkey script will open up for jQuery scripters. For example, John Resig's Digg hacks would work great in a user script. In fact, I just whipped one up this evening. Try it out: Hacking Digg with jQuery and Greasemonkey! It attaches a "sticky" menu of options (using position:fixed) to the top-right corner of any Digg page with buried comments:

hacking digg options - open

And, you can tuck it to the side to keep it from getting in your way:

hacking digg options - closed

Also, keep an eye out for a jQuery extension for Mozilla/Firefox, currently being worked on by Dan Atkinson.

Get Joan Piedra's jQuery for Greasemonkey user script.

]]> http://www.learningjquery.com/2007/02/have-your-jquery-fun-on-any-site-with-greasemonkey/feed 14 jQuerify Bookmarklet http://www.learningjquery.com/2006/12/jquerify-bookmarklet http://www.learningjquery.com/2006/12/jquerify-bookmarklet#comments Sat, 16 Dec 2006 03:55:32 +0000 Karl Swedberg http://www.learningjquery.com/2006/12/jquerify-bookmarklet Someone recently asked if it was possible to somehow include jQuery in Firebug for testing jQuery code on web pages that don't already have it included.

It's not only possible to include the jQuery source right from the Firebug console, but you can also add a bookmarklet to your Bookmarks toolbar for one-click jQuery action!

Here is an example of what you could type into the Firebug console, line by line, to make a page ready for jQuery fun:

PLAIN TEXT
JavaScript:
  1. var s=document.createElement('script');
  2. s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
  3. document.getElementsByTagName('body')[0].appendChild(s);

Or, simply drag the following link to your Bookmarks toolbar:

> jQuerify <

google jquerified

Please note that both the JavaScript example code and the jQuerify bookmarklet point to the jQuery source code on jquery.com. I've heard it's considered poor etiquette to freeload off of someone else's server like that, so if you plan to use the bookmarklet regularly, please point it to a copy of the source code on your own server if you have one.

Also, in the bookmarklet I added an alert message that says "Thank you for using jquery" when you activate it. I wanted that in there for myself because I like knowing for sure that it's working. Feel free to pluck that part out, though, if it annoys you.

Thanks to the folks at Left Logic for their microformats bookmarklet, which inspired me to make this one. In fact, the jQuerify bookmarklet is just a subset of theirs.

Update

Please see my entry about the updated and improved bookmarklet Better, Stronger, Safer jQuerify Bookmarklet.

]]> http://www.learningjquery.com/2006/12/jquerify-bookmarklet/feed 51 TextMate Bundle for jQuery http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery#comments Thu, 14 Sep 2006 21:00:20 +0000 Karl Swedberg http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery JonBob and I have been working on a TextMate bundle for jQuery over the past few weeks. If you're not familiar with TextMate and you own a Mac, you should definitely check it out. It has saved me countless hours of repetitive keystrokes with its bundles, which contain commands, code snippets, templates, and macros that are triggered by pressing special key combinations or clicking menu items.

jquery bundle for textmate

The jQuery bundle that we put together mostly consists of "tab triggers" for various functions, but it also includes context-sensitive help derived from the online documentation and some nice syntax highlighting. After selecting jQuery as your file type in TextMate, you could, for example, type ready and press the Tab key to produce this:

$(document).ready(function() {
  // Stuff to do as soon as the DOM is ready;
});
It'll then select the commented line (line 2 in this example) for you so you can start typing right away, replacing the comment with your code. Hit the Tab key once more and it drops you onto a new line below the closing brackets. If you want to learn more about a function that you've typed in, just click anywhere inside its name and press Control + H. You'll get official documentation on the function.

Get the Bundle

So, how can you get this cool jQuery bundle and speed up your coding? First, you'll need TextMate, of course. If you don't have it yet, download the 30-day trial. Then you'll need to either check out the bundles from the Subversion repository (advanced) or download and install the GetBundles bundle.

Update

I'm no longer supporting the version in the Macromates subversion repository. For the most recent version, with updates for version 1.3.x, download (or clone) the jQuery TextMate bundle at GitHub.
]]> http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery/feed 55