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...
Sunday, January 31, 2010
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....
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';"...
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...
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...
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 gre...
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...
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...
Saturday, January 23, 2010
How does your index.html capture the HTTP_REFERER?
By sending the "REFERRER" variable to cookie:<script language="Javascript"><!--if (document.cookie.indexOf("url") == -1) { document.cookie = "url=" + escape(document.referrer) + ";path=/";}//--></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")...
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...
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 futu...
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...
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...
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...
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...
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....
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...
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...
Wednesday, January 13, 2010
What is considered a good website?
Here is a personal point of view:1) Good First Impression Feel2) Easy to Navigate3) Meaningful Content4) Should Load FastThese GEMS will be explained one by one in the following days!!!Good d...
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 modulemy $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 arrayopen...
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...
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...
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....
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 IEandWMODE="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...
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...
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...
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....
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 mi...
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....
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...
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);...
Subscribe to:
Posts (Atom)