Webkoof

The idea of this approach is following

1. Take two identical images: one colored and one grayscale.

2. Position them on exact same position. Grayscale image on top using CSS positioning and z-index.

<img src="gray.png" id="gray"
       style=" position: absolute; top: 20px; left: 20px; z-index: 100">
<img src="color.png" id="color"
       style=" position: absolute; top: 20px; left: 20px; z-index: 1">

3. Onmouseover event of the gray image, reduce its opacity to zero. It can be done by including following in the head section of the HTML page.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(this).find("img#gray").hover( function() {
			$(this).animate({ opacity: 0 }, 300);
                }, function(){
			$(this).animate({ opacity: 1 }, 300);
		});
	});

I am using jquery here to animate the opacity change. The number “300″ indicated time of animation.

That’s it. We are done. Look at the demo here. (In the demo, I have separated the CSS, instead of inline styles)

So many times creating dynamic flash charts is needed. Many nice application like google analytics and various tracking systems use it. Yahoo developer network provides ‘ASTRA Flash Components’, using which this kind of work becomes very easy.

You can download astra flash component here.

After you install astra flash, it adds various classes including audio playback, menu bar & various chart classes. And creating these things become very trivial. For example, lets create a line chart using it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 
//importing the package 
import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;
 
// Creating a new line chart
var chart = new LineChart();
 
// Reading the Data to plot from FLASHVARS
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var data:Array = String(paramObj["data"]).split(",");
for (var i:Number=0; i<data.length; i++) {
    data[i] = parseInt(data[i]);
}
var category:Array = String(paramObj["names"]).split(",");
 
 
/* Use the data we read as dataprovider
 We can also use simple arrays like :
 chart.dataProvider = [ 12, 45, 34, 23, 45]
 chart.categoryNames = ["Source1", "Source2","Source3","Source4","Source5"]
 
We can also use XML file to provide data.
*/
 
chart.dataProvider = data;
chart.categoryNames = category;
 
//style the line and points
chart.setStyle("seriesMarkerSizes", [10]);
chart.setStyle("seriesLineWeights", [1]);
chart.setStyle("seriesColors", [0xed561b]);
 
//style the axis colors
chart.setStyle("horizontalAxisColor", 0xff9999);
chart.setStyle("verticalAxisColor", 0xff9999);
chart.setStyle("verticalAxisGridLineColor",  0xffeeee);
 
// Add the chart to the stage
this.addChild( chart );

Now, we have a chart which we can embed in a HTML file. All the data for the chart can be passed via Flashvars as follows:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="lineChart" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="flashvars" value="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other" />
<param name="movie" value="lineChart.swf" /><param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="lineChart.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="lineChart" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other"/>
</object>

If you try to show/hide an element in javascript, you simply use the code :

//To show the object with id toHide
   document.getElementById('toHide').style.display = 'block';
//To hide the object with id toHide
   document.getElementById('toHide').style.display = 'none';

But, when you try to apply the same logic to show and hide table rows, you get distorted table in firefox, chrome & safari. Although it works well in IE.

This problem is irritating and the fix is very simple. Instead of display=’block’ use display=”

document.getElementById("toHide").style.display = ''; //To Show it Back 
document.getElementById("toHide").style.display = 'none'; //To Hide it again

Many times, we have to make a web page looking exactly like a given image. Sometimes, we have a picture or a pdf file and want to copy the exact color scheme. Opening the Image in a picture application and picking up the colors makes the whole development process very slow.

So, a web designer should always use a tool which can instantly tell you color code for any thing on the screen. I use ‘ZZOOM’ for this purpose. (Homepage: http://www.omiod.com/product-zzoom.asp) This is a free screen zoomer, color picker and image grabber, all in one!

As you can see in the screenshot, it tells you the exact color of any pixel on the screen and you can zoom the screen upto 15x. Its a very lite and useful tool for any web developer. It saved me alot of development time and I hope it will do the same for anyone using it.

Direct download link: http://www.omiod.com/dl/zzoom.zip

If you are a web developer then you obviously know the importance of testing your webpages in all the browsers. So, I won’t lecture about it. But, No one can have all the browsers on all the platforms. So, most of the times we miss few mess-ups. I always wondered if someone can develop a tool to show me the screen shot of any web page in all the browsers.

Fortunately I found one.

http://browsershots.org is a wonderful website which does ‘exactly this’ for you. All you do is to give them the link of webpage you want to test. You select all the browsers you want it to be tested on. And after sometime they generate the desired screenshots.

Give it a try!