Archive: ‘Javascript’ Category

How To Add Hover Effect On DIV In IE?

There are number of glitches that exists in IE. One glitch is that it does not allow hover effect other than on anchor <a> tag.  This small and quick tutorial will show you how to do it with simple JavaScript and CSS.

Continue reading…

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

Optimize JavaScript Code With Closure Compiler

The easiest way to get familiar with the Closure Compiler service is by optimizing a few simple functions in the service’s web UI. (http://code.google.com/closure/compiler/docs/gettingstarted_ui.html)

  1. Access the Closure Compiler UI by opening this page in another tab or window: http://closure-compiler.appspot.com.
  2. You should see the Closure Compiler UI prepopulated with a simple Hello World function:UI screenshot
  3. Click “Compile” to see the result:UI screenshot

That’s it! You now have a much smaller version of the JavaScript code that functions identically to the original. The Closure Compiler service reduced the code from 92 bytes to just 55 bytes by removing comments and whitespace and renaming basic symbols.

For your convenience, the Closure Compiler service hosts the output file default.js on its servers for one hour. You can access the URL of the output file by copying the location of the link that’s provided above the output pane, where it says The code may also be accessed at {filename}. If you make any changes to the original JavaScript code and re-optimize it during that hour, Closure Compiler service overwrites the output file with the new results as long as you leave the @output_file_name parameter unchanged at the top of the input field. You can use this feature as a quick way to test your compiled code by linking directly to the file from your test application. Do do not link to it from production servers.

Note: To prevent abuse, the Closure Compiler limits the number of consecutive compiles that you can run. If you see the message Too many compiles performed recently. Try again later, it means you’ve temporarily exceeded the limit.

Optimize a JavaScript file

You can also optimize the contents of one or more JavaScript files using the Closure Compiler UI.

  1. Copy and paste the URL http://code.google.com/closure/compiler/samples/tutorial2.js into the Add a URL box. This file contains unoptimized code for creating nodes in a DOM tree.
  2. Click Add. (If you had more than one file to add, repeat Steps 1 and 2 until you’ve added all of them. You can also type the file name(s) directly into the text area if you prefer.)
  3. If you want the Closure Compiler service to serve the compressed file, choose a name for the output file using the @output_file_name parameter at the top of the input field. Note that the default for the output file name is default.js but you should change it to a more meaningful name for your project. Also note that the Closure Compiler service hosts the output file on its servers for an hour.
  4. Click Compile.

You should see the optimized JavaScript in the right hand panel, like this:

UI screenshot

To use the optimized code, you can cut and paste it into your source file, download the file into your directory, or link to the file directly in your script tag (for up to one hour).

You have just worked through examples of optimizing simple functions in the Closure Compiler service UI. If you’d like to build the Closure Compiler service’s JavaScript optimization process into a larger system, then you should talk directly to the Closure Compiler service API. Learn more at Getting Started with the Closure Compiler Service API.

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

Make Fewer Or Less HTTP Requests With Minify

When we talk about web2.0, fast web, fast page load, web page optimization, website performance, caching etc; the only thing come into our mind is how do we do that? Lets figure it out.

This article is all about using a php library which takes less effort to have fast web pages for your websites. There are lot many points which we should take care of, I am pointing out few important like:

Continue reading…

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

How to make simplest cross browser tooltip with CSS and JavaScript events?

Simple TooltipsThere are lots and lots of tooltip scripts available on net. There are lot many too which provides lots of features like: fading effect, popup effects, onmouseover effects etc. The thing which encouraged me to write this tooltip script is that actually all these effects are not worth adding on my web pages due to heavy page loads, extra javascripts, CSS increases un-wanted HTTP requests and makes web page a bit slow.

The idea behind writing this script to achieve the maximum features with less code, simple, clean and simply customizable. Before getting into code actually, read it’s features below:

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

Decode JSON data with PHP

JSON, short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). If you are running your web server with latest PHP package, then it is so easy to decode JSON data with an in-built function of PHP. json_decode() function decodes a json string. It is available in PHP version 5.2 and later.

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

Understanding JSON Syntax

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print
Real Time Web Analytics