Tags

, ,


Today,wanna show you guys some cool ways to start practicing Jquery right in to your Browser without having to worry about Dreamweaver,Visual Studio, opening them and reopening them.

Jquerify is a bookmarklet which can be added to your local browser and you can practice and manipulate web pages on the fly.

If you are a Firefox fan, you can find the add-in here which is termed as FireQuery. It syncs up well with FireBug.

Some of the features are listed below:

  • jQuery expressions are intelligently presented in Firebug Console and DOM inspector
  • attached jQuery data are first class citizens
  • elements in jQuery collections are highlighted on hover
  • jQuerify: enables you to inject jQuery into any web page
  • jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

And in case you happen to love Chrome more (like me), You can find the add in the the Chrome store located here. (If you still are on IE, only God can help you. 😛 )

You can invoke Chrome console by “Ctrl+Shift+j”) and to see the indication if jQuery has been already embeded to the current page.’$’ sign over the plugin means that jQuery is embedded.

Note:

“$j” sign means – jQuery embeded as $j variable with no conflict to prototype or other frameworks.

I will show you how to invoke it by editing some contents on our very own Facebook site.

Start your Developer console(Ctrl + Shift + J) after logging on to Facebook

You can click on the ‘Red cloud’ on the bookmarks panel (on the upper right hand side) to see if Jquery is embedded or not. If it is not you can invoke it by clicking on the button and Whammm!! , Jquery is ready to use for you.

In case the right hand sidebar which consists of the ticker feature and the ever annoying Facebook Chat bothers you, you can get rid of it by just writing one line of code on the Developer Console.

The code goes like this:

>>> $(“#pagelet_sidebar”).hide();

We are doing no rocket science here, but just to give you the ides that your Jquery plugin is installed and ready to go.

Screenshot below confirming we are not seeing the right side bar anymore:

After running the Code, the Sidebar is hidden on Facebook

This is just a start up. You can do a lot more cooler things on live sites and this can be pretty useful if you wanna debug your own pages as well at some stages for adding/editing animations,css and much more

This video might  also give you some insights on getting started in which Dave Ward tells us how he uses Firebug to debug Jquery

For more Jquery Resources you can always use the ever dependable Google, some of the sites worth mentioning are:

http://www.learningjquery.com/

http://docs.jquery.com/Tutorials

http://www.w3schools.com/jquery/default.asp

These shall suffice if you are a beginner and just starting to learn the power of Javascript and Jquery

Advertisements