My Programming Tricks: January 2010

Sunday, January 31, 2010

How to mix two DOCTYPE in one website?

Simple, just make one of them in <IFRAME>. For example, you need these two types in one web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

AND

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Which one to be in IFRAME and which one to be in main frame?

It is recommended to make the one with looser requirement in the main frame. I would pick the HTML 4.01 one in my main frame. How about you?

Saturday, January 30, 2010

How do you remove/force the underline in link anchor <A>?

To remove:

Use CSS. Simply use the following CSS codes:

a {text-decoration:none;}

or directly:

<a href="[link destination]" style="text-decoration:none;">link</a>

To force:

<a href="[link destination]" style="text-decoration:underline;">link</a>

or

<a href="[link destination]"><u>link</u></a>

To show underline only if the mouse is over the top:

CSS method:
a {text-decoration:none;}
a:hover {text-decoration:underline;}

Hope you like these simple ones. Beginners should like these tricks.

Friday, January 29, 2010

How do you highlight a table data (<TD>) without using fancy javascript routine?

There are many sites in the world that are using fancy javascript functions or subroutines to deal with the dynamic CSS.

But what if we only need to control a small part of our website? Can we use a quick and dirty method without having to mess with function calls to and fro javascript engine?

Here is a simple way to do it. Put these in your <TD>:

<TABLE><TR><TD width=100 onmouseover="this.style.background='#ffdddd';this.style.cursor='pointer';" onmouseout="this.style.background='#ffeeee';" onclick="[your click destination]">CLICK</TD></TR></TABLE>

You can also change the background image dynamically using this method:

<TABLE><TR><TD width=100 onmouseover="this.style.background='url(/img/background1.gif)';this.style.cursor='pointer';" onmouseout="this.style.background='url(/img/background2.gif)';" onclick="[your click destination]">CLICK</TD></TR></TABLE>

You can also replace [your click destination] with location.href = 'http://www.yahoo.com'; or you can assign a link anchor (<A>) to the CLICK.

Cool isn't it? Wow! Now you don't need to deal with so much javascript. Whew!

Bottom line: this trick relies on onmouseover="this.style..... as shortcut to avoid javascript function calls.

Thursday, January 28, 2010

How to assign quotation mark in a javascript variable?

For example if you want to put "'"(single quotation mark) into a javascript string variable:

var str = '<tr><td onclick="change('variable')"><img src=apple.jpg border=0></td></tr>';

where variable needs to be replaced with a variable. But variable needs to fit into the string value assignment, this needs to be done:

var str = '<tr><td onclick="change('+variable+')"><img src=apple.jpg border=0></td></tr>';

But the single quotation mark next to '+' will be used as notation in the string assignment.

I also tried this but it won't work using the escape (\) method:

var str = '<tr><td onclick="change(\''+variable+\'')"><img src=apple.jpg border=0></td></tr>';

Solution:

All I need to do is to assign the part with single quotation mark to a temporary variable to make this trick work:

var temp = "\'"+variable+"\'";

then assign this temp to the str variable I want:

var str = '<tr><td onclick="change('+temp+')"><img src=apple.jpg border=0></td></tr>';

Walla! A trick I used to put a quotation mark in the variable assignment using another variable. I also need the help of the escape (\) character but use it in a separate variable.

A quotation mark in a quotation mark based string assignment. Weird problem and weird solution.

Wednesday, January 27, 2010

Fastest Way to Get The Coordinates For Usemap

As we all know that we need to specify the coordinates when we set up the Usemap for our image.

I recommend using Photoshop.

Launch Photoshop (I still use version 7 in 2010), pull down Edit->Preferences->Units & Rulers. Set the rulers setting to pixels.

Open your image file. The use the selection tool to select the upper left corner like in the following:

Then go to the navigator toolbar window (usually on the upper right hand corner):

Click on the info tab and you will see:

The coordinates are here! Are they neat?

Repeat the same steps on the lower right corner of your image to get the coordinates.

Walla! Plug those numbers into your usemap. You can find the basic of usemap using Google easily.

Tuesday, January 26, 2010

Dynamic IFRAME Height Adjustment

Before going any further, this feature will NOT work with the following DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Here we go:

You just need this to be called:

document.getElementById('myframe').height=500;

This will change the height of iframe named 'myframe' to 500.

You can also call within the iframe:

parent.document.getElementById('myframe').height=500;

Isn't daddy great?

Monday, January 25, 2010

Point your finger?

There are many web sites that I encountered with this finger problem.

The table row is converted to change color during a "mouseover" event.

But the mouse cursor will only turn to a hand sign if it hovers over the link. If your mouse pointer moves away from the <a> link, you will see this:

For those who are used to Windows or Mac environment will not be happy about this. In order to make it more user-friendly, a simple code can be added to the <TD>:

onmouseover = "this.style.cursor='pointer'"

Then it will look like this:

Note that if your <TD> already have an mouseover event handler, you can add this code by using a ';' after your handler. For example:

onmouseover = "changecolor(); this.style.cursor='pointer'"

Here we go! It now looks professional right?

Sunday, January 24, 2010

How do you control the height of a table?

For those who tried to adjust the definite height of a table know that it is hard to control the height of a table that looks similar in all the browsers.

Here are the codes that I used to make sure the height is showed as defined:

<table cellpadding=0 cellspacing=0 border=0>
<tr><td height=13><img src="img/dummy.gif" height=13 width=1></td></tr>
</table>

You also need to prepare a dummy gif file to make this happen. The dummy gif file is better to be transparent in case you have background image from the upper tables and you don't this dummy gif to block it. The width is optional if your gif file has the smallest size of 1x1.

For a height of 13, it is not achievable by just specifying it in the <TD>. This is the only way I can think of and it comes in handy when you want to make your web design go according as planned in your photoshop design.

Saturday, January 23, 2010

How does your index.html capture the HTTP_REFERER?

By sending the "REFERRER" variable to cookie:

<script language="Javascript">

</script>

The "document.referrer" contains the referrer's URL for any pages at all time. All you have to do is to send the content to the cookie. The cookie will record the first referrer data so that it will capture the source of the link to your website. The (document.cookie.indexOf("url") == -1) is to prevent the next click to corrupt your original referrer data stored in the "url" cookie.

You use scripts to send the "url" data to an email or database anytime now as the data is already captured into the cookie jar.

You can also open web server log to check through all the visitors but this is a very time-consuming way to run research on your visitors.

Friday, January 22, 2010

Direct Download Link with PERL - CGI

There are times that you need to make sure you record or filter before your visitors download your files. Here are codes if you are running CGI using PERL:

open(FILE, "../file/$fn"); #file is the directory and $fn is the filename
@file=<FILE>;
close(FILE);

print "Content-Type:application/x-download\n";
print "Content-Disposition:attachment;filename=$fn\n\n";
print @file;

Note that you don't need to print the html header :"Content-type: text/html\n\n" before this. You can also add the Content-Length header so that the browser know the size of your file but the size has to be accurate to avoid error.

Thursday, January 21, 2010

Big IE Bug -> Background

Have you ever encountered a problem putting a background image in a table row or <TR> and it doesn't show up in IE?

Yes, of course. IE doesn't support background image in <TR>. Put the background image in <TD> instead. Or wrap another table around the row and put the background in <TD> above it.

But background image support in <TR> works well in Firefox and Safari.

There are more problems with IE. I will dig up more in the future.

Wednesday, January 20, 2010

PHP vs CGI - PERL vs ASP

What a strange round-up comparison.

I like CGI - PERL combination because Linux server is free to set up if I want to build my own web server. PERL is much powerful than ASP after comparing both programming platform. Many tasks can be completed with minimum amount of codes compared to ASP. Anyway, ASP is obsolete and ASP.NET is just as versatile as PERL programming environment.

I like PHP as it is like the combo of PERL and ASP. It has the server side thing as well as the PERL programming flexibility.

As for ASP, I don't see much benefit of using it beside its ability to make use of default.asp similar to index.html to save user from typing the URI. Calling the root directory is sufficient to run the web site. This is briefly explained in my second post on the 2nd of January 2010.

In conclusion, all three are acceptable to be used as your website programming platform. It is up to you to decide. If you are running a Windows server, you seem to have not much choices. If you are using a Apache based web server, you get to choose either PHP or PERL. Actually I like PERL a lot as it is way flexible and versatile but the /cgi-bin/ path showing on the web address is just too risky and it is too inviting to hacker's attack. Hackers instantly know what you are up to. PHP could be the most popular and hassle-free web programming environment. With the support of free database softwate, MySQL, to run database, it is like a gift to web programmers.

Tuesday, January 19, 2010

What is the best resolution for Web?

This is the first thing to ask yourself during the design stage.

You create a new photoshop document and you are asked about the size in pixel.

800x600, 1024x768, 1280x1024, 1280x720, 1366x768, 1600x1200, 1920x1080, 1920x1200?

I always start with 1024x768 as my beginning resolution to design with.

Actually, my maximum width is just 1000 instead of 1024. The scroll bar on the right side of the browser takes up some space too. As more and more monitors are going toward 1920x1080, I may start the width with 1280x1024 in the future. It is not advisable to optimize your resolution with the max, 1920x1200, as monitors with lower resolutions will have trouble getting a good view of your web site.

After the design, I find ways to cut the design into two parts, left part and right part. The purpose is to make the web site to fit in any monitors that are higher than 1024x768.

This is a challenging job as cutting some area may not be as easy you think especially with designs with a lots of images.

Then I will make the website width 100% so that it will fit into most of the resolution in the market.

I don't like to fix the width as it only looks good with certain monitors of similar resolution with your design.

Making it 100% width is a very challenging task. It's hard to go over detail in this write-up. A lots of examples will need to be shown.

Hint: You need to use background="(image path)" to help you with this 100%-width task in some of the tables of your website.

I will elaborate more upon request.

Monday, January 18, 2010

The Web Editing Platform

Should I use Frontpage, Dreamweaver or Notepad to convert my design to HTML format?

The answer is "it is all up to you".

The cheapest way is to use Notepad or any free text editing software.

For me, I only Notepad. If you are too comfortable with Frontpage or Dreamweaver, when it comes to writing HTML codes in CGI, PHP or ASP(x), you might have a problem.

If you plan to make web development as your lifetime career, why don't you pick some HTML knowledge as web is all about HTML (may change in the future, nobody knows)?

HTML is one of the easiest language one can find on planet earth. Skipping it and relying on expensive software to do it for you, I am speechless. But those expensive software have their advantage: speed. If you are very good at HTML, your speed is comparable to those software and the HTML codes you write is always much simpler and straight forward than those generated by those software.

Besides being able to save some money, using text editor like Notepad can also make your website more professional looking. There are things that are better to be fixed in HTML mode such as fixing the width to 100% rather than a fixed pixel width. Once the width is set to 100%, the rest will need to have a certain percentage such as the sidebar, main content, etc.

Another big advantage of being familiar with HTML is that you can fix your own template in blogspot. You just need to choose a template and start modifying the HTML codes. Although for Blogspot, it is more towards adjusting the CSS than the HTML codes. You can pick a template from Blogspot and just adjust the CSS, you can make almost anything you like out of it. Ex, making any template to stretch to full 100% width to fir the screen as many of the default templates are only fixed to certain width.

Hope this helps!

Sunday, January 17, 2010

Web Trick #4: Should Load Fast

This could be the most technical part of all four parts. I like this part as I am from technical background.

I like use the word “webify” myself as this is the process of converting your photoshop design to HTML file(s).

The explanation of this section can be very extensive but for the sake of clariness, I go for the blog style, the simplified version.

Basically in order for a web site to load fast, the number of image file and their file size must be kept to the minimum.

For example, you have a big area of the design that is required to be converted image files. Choose the biggest chunk you can have to convert it to either JPEG or GIF format whichever gives you the smaller file size. That should improve the load time a lot. If you cut the image into small pieces, it will end up loading slower as every loading of image file requires a connection to the server which introduces extra time for establishing connection and disconnection for each image file. Our broadband also tends to download faster in burst mode (which data are loaded consequentially). Dissection of images to smaller pieces was once a popular practice when the time modem was used to make internet connection. The smaller pieces although will extend the overall loading time but it is good to show bits and pieces before the visitor gets frustrated for having nothing on browser after loading for sometime. The new broadband technology has changed the way web developers to “dissect” their design and “webify” into HTML format.

This is from 10-year experience. For those who read back dated Web books, get this updated method and your web site should load faster.

Other thing that can affect the loading speed is the location of the server. Please try to use server that is closed to the potential or targeted visitors.

The last but not least, please make sure your javascript doesn’t hang up the broswer. This is very common especially if your visitor is using IE of any version.

Saturday, January 16, 2010

Web Trick #3: Meaningful Content

Make your point straightforward.

It is better to make one main point than many points in a single page.

Visitors are human. They can only focus on one thing at a time.

Beside the look and feel of your website, your content is the key of the development. It gives meaning to the website or it just becomes rubbish.

There is one trick that works on almost every occasion. Choose a photo or picture that summarizes the whole story. For example, if you page is about selling a house, show the photo. Choose a big photo and place it closed to the center of the page with a short caption or slogan. Human likes quick and easy solution. If you can convey your full message in a split second, they will like you and probably bookmark you straight away.

Friday, January 15, 2010

Web Trick #2: Easy to Navigate

This is a tricky part.

Most web developers know this is important. But when it comes to implementation, it is quite a task.

This also depends quite a lot on the design as well. Layout of the website is properly planned with similar links or buttons grouped at the same place. Visitors will have a much easier time to recognize the location to browse, look for information, inquire or quit and back out.

My advise is to put more effort on the design to make use of color to group links of similar nature with similar color. For example, links to other parts of web site should be grouped in a "control panel" fashion so that visitors know where to look for links to navigate around. The "control panel" has to be prominent enough to stand out in a crowd. Some even use floating "control panel" type separating it in a different layer to stay on the sight all the time.

The last but not least, use your imagination. Be fair with your own design. Treat your design as other's design and navigate your own site without mercy. Try to crash your own site and you will see the problems and know where to fix to make it user friendly.

Thursday, January 14, 2010

Web Trick #1: Good First Impression Feel

How do we go about starting to develop a website?

For me, I started with a Photoshop stage. I used to draw it on a piece of paper. But I now go straight to Photoshop.

Before drawing on the photoshop, I will ask customers for references if he or she has any website that is worth referring to.

Now I will make a few Photoshop samples and see if I like it or not. I will spend time looking at other websites and then look at mine. I take first impression very seriously. I only give myself 2-5 seconds to like my own design.

Sometimes I will leave it overnight and look at it first thing in the morning. The first impression is very important. If 'lame' is the only impression you get, discard the design and start a brand new one.

The Photoshop phase is the most important step.

Why photoshop? It's because photoshop support "Layer" feature. I need this feature very much when converting the design to web format.

The catch: the more you are familiar with Photoshop, the more professional your web site will look. I think Photoshop version 7 or above is adequate for this task.

Wednesday, January 13, 2010

What is considered a good website?

Here is a personal point of view:

1) Good First Impression Feel
2) Easy to Navigate
3) Meaningful Content
4) Should Load Fast

These GEMS will be explained one by one in the following days!!!

Good day!

Tuesday, January 12, 2010

PERL TCP Socket Codes with LWP (HTTPS/SSL, POST method)

Planned to delay this but what the hack, just let the series continues.

For such connection, LWP is needed:

use LWP::UserAgent; #call up the LWP module
my $ua = LWP::UserAgent->new;

$req = new HTTP::Request POST => "https://www.yourSSLURL.com/script?var=variable";
$req->header('Accept' => 'text/html');

$req->content_type('application/x-www-form-urlencoded');
$req->content("a=a&b=c&c=c");

$res = $ua->request($req);

#to transfer $res->as_string to @HTML array
open (TEMP, ">temp.txt");
print TEMP $res->as_string;
close (TEMP);
open (TEMP, "temp.txt");
@HTML = ;
close(TEMP);
`rm -f temp.txt`; #Use Unix command to remove the temporary file, you can also use randomized filename to avoid duplicates

There you go. Still cannot think of a way to bypass LWP. Maybe someday...

UPDATE - You may see this error if your web server cannot handle LWP SSL:

501 Protocol scheme 'https' is not supported (Crypt::SSLeay not installed) Content-Type: text/plain Client-Date: Sun, 21 Feb 2010 02:31:47 GMT

Client-Warning: Internal response LWP will support https URLs if the Crypt::SSLeay module is installed. More information at .

OR

use Crypt::SSLeay; #LWP will support https URLs if the Crypt::SSLeay module is installed.
More information at .

That means you need to install Crypt::SSLeay PERL module beside LWP.

Here's the instruction at your PERL ppm:

ppm> install http://theoryx5.uwinnipeg.ca/ppms/Crypt-SSLeay.ppd

to install Crypt::SSLeay in your web server.

Monday, January 11, 2010

PERL TCP Socket Codes without relying on LWP (Part 2: POST method)

As promised, here are the codes:

replace (GET method):
print S "GET /Login.aspx?a=apple&cat=main HTTP/1.1\nHost:www.theSiteDomainName.com\n\n";

with (POST method):

print S "POST /Login.aspx HTTP/1.1\nHost:www.theSiteDomainName.com\nContent-Length: 16\n\na=apple&cat=main"

Note that you don't need to put the query string in the URI. Instead you need to post the query string as output data. You also need to specify the length of your data. This is a tricky part. The easiest way is to put the data in a word file and check out the file properties (statistics) for the word count.

There are still two other types of TCP connection which I haven't mentioned:

1) HTTPS

2) Send and Receive Cookies

Hope I housekeep my info and post them up when the time is right.

Sunday, January 10, 2010

PERL TCP Socket Codes without relying on LWP

I don't quite like to use the modules in PERL as I am always paranoid about its absence in certain hosting companies.

Here are the codes to make a TCP connection and send and receive a HTTP GET query without the LWP module:

use Socket;

my $peer = sockaddr_in(80,inet_aton("www.theSiteDomainName.com"));

socket(S, PF_INET, SOCK_STREAM, getprotobyname("tcp"));

connect(S, $peer) or die "Couldn’t connect!";

print S "GET / HTTP/1.1\nHost:www.theSiteDomainName.com\n\n"; # Make a GET query to root directory of the host server

select STDOUT;

while (<S>) {
$reply .= $_;
if (/<\/html>/) { close(S); }
}

#the reply is stored in the $reply
.
.
.

You can also send a query string to the host script by:
print S "GET /cgi-bin/script.pl?a=$action&cat=main HTTP/1.1\nHost:www.theSiteDomainName.com\n\n";

But for POST query, it is a bit different. Will post up the codes tomorrow!

Today is a Sunny Sunday. I will take some time off to relax. See ya!

Saturday, January 9, 2010

Javascript with IE is painful

Most web developers know this is a painful combo: JS + IE = Pain.

Whenever a developer sees this on the lower left corner of the browser window:

he or she will be more likely sad. Double clicking on it will pop up a window telling you the javascript error that doesn't make sense (after clicking show details to show the error).

There is one time I encounter errors that are not consistent on every run. Although the javascript does what it is supposed to do, the errors keep showing up sometimes but not all the time. Since the javascript is doing what it is supposed to function both in IE and Firefox, I need a way to suppress the error.

Then I found this javascript:



function silentErrorHandler() {return true;}
window.onerror=silentErrorHandler;

This will suppress the error icon showing on the left corner of IE.

A good piece of trick to preserve a professional looking web site.

Friday, January 8, 2010

Transparent Flash

I once have this requirement to be fulfilled to make a swf file to appear transparent on a web page. After "googling" around, I found that:


<PARAM NAME=wmode VALUE="transparent">

has to be in the OBJECT tag for IE

and


WMODE="transparent"

has to be in the

<embed>

tag for Firefox.

and the background color of EMBED and OBJECT will be treated as transparent color as in the swf file.

Surprisingly, the result looks pretty good in Firefox. But the IE looks terrible. The edge of object in swf is wrapped with black borders and darkened if it is fading.

I still haven't found a solution to this. Not a good sharing but it is a good experience.

Thursday, January 7, 2010

JPEG or GIF?

This could be the biggest question in beginners' mind when it comes to developing a website. My answer is "whichever one gives you a smaller file size with the least distortion".

The best way is to use Adobe Photoshop "Save for Web" feature (version 7 or above).

In that feature, you'll see how different output format gives you different file size. Adjusting the number of color (GIF) or changing the compression ratio (JPEG) can also affect the file size.

If the image is of photo nature, such as photo of a person, scenery, I would suggest JPEG with compression ratio of 60%. That will give you an image with reasonable file size and distortion.

If the image is of clipart or screen capture nature, which doesn't involve a lots of different colors, I would suggest using GIF format. Adjusting the number of color can also affect the file size. Usually color of 64 is adequate for screen captures.

Let me know if you need visual examples. Email me if you need them.

Wednesday, January 6, 2010

Putting HTML tag in Blogspot

There's something that I learned a few days ago:

How to Put HTML tag in Blogspot?

I kept getting error from the Posting editor saying that the HTML tag is not allowed. Then I realized in order to put HTML tag inside a HTML editor, it has to be "unescaped" before they can be embedded inside a HTML-based editor.

Then I googled around and I found this:

http://www.reconn.us/component/option,com_wrapper/Itemid,62/

Actually I needed to "escape" those characters instead of "unescaping" them.

After pasting the HTML tag I wanted, I ran the javascript, walla!

Here is a small trick I learned a few days ago. A good learning experience!

Tuesday, January 5, 2010

Calling Daddy?

Start to scratch my head what to write today. I thought I was more affluent than this. Anyway, this is a simple trick to call a javascript function from an iframe:


"javascript:parent.myfunction()"

This is useful when you are using iframe and you need to call a function that is running on your main HTML or the "daddy" HTML. I call the iframe the "child".

Why do you need to call "Daddy" and not run javascript directly from iframe?

If you need to control a DIV layer from an iframe, you need this. One cannot control a layer such as visibility from iframe (child) unless the function is run from the "daddy" HTML.

If you are able to make "daddy" stuff disappear from "child" HTML, let me know. But I find building a function in the "daddy" HTML and calling the function from "child" HTML more convenient.

Hope this helps!

Monday, January 4, 2010

The CSS Padding Problem

There is one time when I was using the following CSS to style my table:

padding: 10px;

It wasn't showing any padding no matter how I fix it. I later found out it is a HTML version problem.

After adding this, the problem is fixed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is a short posting. Hope you don't mind.

Sunday, January 3, 2010

iFrame or not to Frame?

Once a web developer touches iframe, it's hard not to in the future.

Web developers can get addicted to iframe as it is a versatile feature.

One can easily create an iframe using this syntax:


<iframe src="test.asp" width=100 height=100 scrolling=auto frameborder=0 align=right id="iframe1"></iframe>

This creates an iframe of 100x100 in size that calls to main.asp. The 100x100 area is reserved for this test.asp.

The purpose of iframe is to separate the loading of various HTML files. Usually, there is a javascript to control the iframe so that the loading of the iframe doesn't require to reload the entire main page or the page that calls the iframe.

Here's the javascript code to do the job easily:


function reloadiframe() {
document.getElementById("iframe1").src='test.asp';
}

or you can also change the link of the iframe:


function changeiframe(framename) {
document.getElementById("iframe1").src=framename+'.html';
}

To call the javascript functions, one call put codes like

"javascript:changeiframe('test2')"

or

"javascript:reloadiframe()"

in the anchor (<a>) or using onclick.

Hope you like it. This is my 3rd posting and at least can write for 3 days consecutively. I doubt I can continue forever but discipline is very important in making anything successful.

Saturday, January 2, 2010

More tricks?

This is just my second trick and I would like make it quick. Trying to discipline myself to record all the tricks and tweaks that I have been using for the past ten years.

Here's something that I always wonder, wonder how people make so much dynamics stuff using javascript which in fact looks like something running from the server.

I must have been indulging in the world of Linux web programming environment using PERL and PHP. I realize if I put a default.asp in a Windows Web Server root directory, I can run a dynamic web site without using long URL like yoursite.com/cgi-bin/abc.cgi

Basically, yoursite.com/default.asp is the same as yoursite.com.

But make sure there is no index.htm or index.html in the root directory.

I could be naive to resist Windows products all these years. This is actually a cool feature.

Since I'm out of time today, I choose this short trick to present in my second blog. Until next time! ... Hopefully tomorrow.

Friday, January 1, 2010

My First Web Trick

Today is 1st of January 2010. Happy 2010! I just realized that today is a good day to start a new project: blogging.

Hi! I’m a semi-professional web programmer and would like to share web development tricks with new developers.

This is my first blog this web trick thing:

How to make all browsers to show a transparent layer?


Div.abc {
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}

These are CSS codes for DIV layer with class name of “abc” using class=”abc” notation.

With Comment:


filter:alpha(opacity=80);     /*This is for IE with transparency of 80%*/
-moz-opacity:0.8;     /*This is for Firefox with transparency of 80%*/
opacity:0.8;     /*This is for Safari with transparency of 80%*/

Subscribe to: Posts (Atom)