Wednesday, September 3, 2008

Now that you have Google Chrome installed on your desktop, let’s look at some of the unique features available only inside Google’s Web Browser that you’re seriously going to miss in other popular browsers like Internet Explorer, Firefox, Apple Safari or Opera.

1. Task Manager for Websites

While you are inside Google Chrome, press Shift+Escape and it will open up a ‘task manager’ with a list of all websites currently open inside Chrome.

chrom task manager

This will give you an idea about how much physical memory is consumed by different websites and if any particular page is causing your system to crawl, you can do an "end process" to close that tab directly from Task Manager.

2. Visual Browser History

This is a feature Chrome borrowed from Google Desktop / Google Web History. Type Ctrl+H to open your browser history and search for a term.

visual-history

In addition to matching pages, Google Chrome will also show you a small thumbnail image of that web pages in the history results. No need for any extensions.


chrome  contextual menu3. Super Clean Contextual Menus


I simply love this. You right click an hyperlink on a web page and you get only five relevant options to deal with that link.

The number comes down to four when you right click any image in Chrome. There’s way too much clutter in Firefox menus.

4. Search Your Favorite Websites from the Address Bar

This is brilliant. If you visit a website that includes site search (for instance: search.labnol.org) - Chrome will automatically recognize and add that search engine for you so the next time you can perform a search on that site via the Chrome address bar itself.

chrome search

To see this in action, open cnn.com or search.labnol.org in your Chrome browser and then type cnn.com followed by the tab key to search CNN. Simple.

5. See Memory Used by Different Browsers

Open a new tab inside Chrome browser and type "about:memory" (without quotes) - somewhere at the top, you’ll see a list of browser processes that are currently running on your system and the amount of memory they are using.

browser memory

6. Reopen Website tabs that you closed by mistake

Firefox 3 has this "Undo Closed Tab" option in the menu while you can open closed tabs in Opera via the Ctrl+Z shortcut.


closed-tabs

To re-open a closed tab in Google Chrome, just hit Ctrl+T and you’ll see an option that says "Recently closed tabs" - click the one you closed by accident.

7. Launch Websites from the Start Menu / Quick Launch Bar

Desktop shortcuts for web pages are possible with other browsers as well but Google Chrome make the whole flow very easy. Open any site and choose "Create application shortcut" from the File menu.

web-shortcuts

This will essentially create a desktop shortcut that looks something like this:

C:\Users\labnol\AppData\Local\Google\Chrome\Application\chrome.exe
--app=http://www.labnol.org/

Clicking the shortcut will launch that web page in a new instance of Chrome that may not contain have any more new tabs.

Chrome lets you move tabs around different windows but I didn’t find this feature very useful. I like the Firefox approach better where you can drag tabs onto the desktop and turn them into web shortcuts.

Overall, I am pretty impressed with Chrome but did miss support for extensions especially Customize Google. But Chrome may be a good thing if you are web publisher as it has no adblock plus - good for Google as well.

Tooltip And Image Preview Using JQuery

I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.

Download all 3 tricks in a bundle

Features and Principle

What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here are couple of examples where you can see this script in action.

Example 1: The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element. 
Html looks like this:

Roll over for tooltip

View this script in action

Example 2: Image Preview Gallery

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Html:

gallery thumbnail

or if you want to use caption add a title attribute:

Roll over to preview

View this script in action

Example 3: Links With URL Preview

This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Like so:

Css Globe

again, if you wish to use caption add a title attribute:

Css Globe

View this script in action

Download all 3 tricks in a bundle