Saturday, December 11, 2010

Drop "Right" Menu Simple Solution Using UL(Un-numbered List) + CSS

The previous drop down menu was not able to be converted to "drop-right" menu. This is used instead:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<style>
#menu {width: 100px; background: #eee;}
#menu ul {list-style: none; margin: 0; padding: 0;}
#menu li {position: relative;}
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%;}
#menu ul ul {display: none;}
#menu ul li:hover ul {display: block;}
.butlook {display: block; border-width: 1px; border-style: solid; border-color: #ddd; margin: 0; padding: 3px 3px; font-size: 12px; font-family: tahoma;}
</style>

<body>


<div id="menu">

 <ul>
  <li class="butlook">Menu 1
  <ul>
   <li class="butlook">Menu 1 Item 1
   <li class="butlook">Menu 1 Item 2
  </ul>
  </li>
 </ul>
 <ul>
  <li class="butlook">Menu 2
  <ul>
   <li class="butlook">Menu 2 Item A
   <li class="butlook">Menu 2 Item B
  </ul>
  </li>
 </ul>

</div>

</body>






Such method is important as it is widely used nowadays. It's heavily used in facebook if one hasn't noticed it yet. Although it is not exactly the same, but it is all about using the CSS with the <UL>. What's next? Flip left/right image like iphone trick? I have codes with me but I haven't compiled it up yet. Stay tuned?
Read More »
Posted by at No comments:
Labels: ,

Wednesday, December 8, 2010

Drop Down Menu Simple Solution Using UL(Un-numbered List) + CSS



Here are the sample codes in HTML and CSS (important code shown in red):



<style type="text/css">

#main_menu ul {padding: 0; position: absolute;}

#main_menu li {float: left; position: relative; }

#main_menu a {text-decoration: none;}



.main_item {list-style: none; border: 1px solid black; background-color: #DDEEFF; text-decoration: none;}

.item {list-style: none; border: 1px solid black; background-color: #FFEEDD; width: 100%; text-decoration: none; text-align: center;}



#main_menu li:hover ul, li.over ul {display: block;}

.sub_menu {display: none; left: 0; position: absolute;}



</style>



<body>



<ul id="main_menu">



<li class="main_item">

<a href="">  Main Item 1  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item A</a></li>

 <li class="item"><a href="">Test Item B</a></li>

 <li class="item"><a href="">Test Item C</a></li>

 <li class="item"><a href="">Test Item D</a></li>

</ul>

</li>



<li class="main_item">

<a href="">  Main Item 2  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item E</a></li>

 <li class="item"><a href="">Test Item F</a></li>

 <li class="item"><a href="">Test Item G</a></li>

 <li class="item"><a href="">Test Item H</a></li>

</ul>

</li>



</ul>





</body>



I was always amazed by how people use <UL> with CSS to create drop down menu as I always use layers with visibility in CSS to create menu. After knowing this trick using <UL> with CSS, it's a lot simpler than the method I used formerly.

In fact, <UL> can easily forced to line up items next to each other by using this simple CSS:

float: left;

without this CSS, items will line up vertically downward like traditional bullets (<UL> or <OL>).

After that, how do we control the event without using onmouseover event checker? We use this li:hover ul and li.over ul in CSS.

Basically, very simple. It's just a matter of manipulating the display parameter in CSS. When display: block, it is similar to asking the browser to SHOW; whereas, display: none is to ask the browser to HIDE. It's similar to Javascript's hidden and visible function.

Anyway, another sample is required to make this demo easier to under: making a "drop-right" modified from these codes. Stay tuned! (Update: Cannot be done, need to work around as in the coming example)




Note: Firefox needs this to hide the bullets: list-style: none;
Note2: In order for IE to work properly using these codes, you need to declare the doctype as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Read More »
Posted by at No comments:
Labels: ,

Monday, December 6, 2010

ASP Sniffer Out IE Sample Codes

user_agent = request.servervariables("HTTP_USER_AGENT")

if InStr(user_agent,"MSIE") > 0 then
position = "absolute"
else
position = "fixed"
end if


These codes above is good to sniff out IE with the rest of the browser in ASP.
Read More »
Posted by at No comments:
Labels: ,

DIV mask layer not fully covered on top when there is a scroll bar

It's common to create a "mask" layer on top of the page in order to display photos, pop-up messages, etc.

I used to used the "absolute" positioning to do the job under I lately discovered the so called "masked" will move if there is a scroll bar (when shrinking the window's size).

This problem can be easily solved by just setting the DIV to "fixed" position.

Another problem solved! But wait a minute. This solution doesn't work in IE! Let me see if there is a workaround for this...


After trying setting the DOCTYPE to something else such as



It does work on all browsers but all the positions are not in place as desired. Better use a sniffer to sort IE out of using the "fixed" position.
Read More »
Posted by at No comments:
Labels: , ,

Sunday, December 5, 2010

How to Print % (percentage sign/symbol) in ASP?

I've tried %%, it doesn't work.

So after googling around still no result.

After that I thought about printing special character using ASP and look up the ASII code table, I came out with this solution:

MyString = "<td width=100" & chr(37) & ">"
.
.
.
print MyString



Walla! Problem solved!
Read More »
Posted by at No comments:
Labels:

Wednesday, December 1, 2010

Server Error: HTTP Error 500.19 - Internal Server Error

It's been a while since my last posting. Busy, busy, busy!

Anyway, while installing IIS to my notebook with Windows Vista, I got this Error 500.19. This problem did not pop up during my installation on a Windows 7 PC.

Here's the solution:

I just added a IIS_IUSRS user to the root folder of the IIS, everything is fixed!

Before this, one needs to remember to turn of the Apache if you happen to run it and got a message of access problem to the directory of your web files.

Good luck everyone and I'm glad to be back!!!





Update: Now I get this problem:

Microsoft JET Database Engine error '80004005'

Unspecified error

/Default.asp, line 55
Read More »
Posted by at No comments:
Labels: ,

Wednesday, March 17, 2010

Best Way to Round Up Numbers Using Javascript

I previously found several solutions to round up (float) numbers to closest two decimal places. Some are using complicated function with sofisticated codes but I find this one-liner quite effective and efficient:

Math.round(num*100)/100; // for two decimal places
Math.round(num*1000)/1000; // for three decimal places
.
.

I appreciate the author who did this and sorry for forgetting where I get it from.
Read More »
Posted by at No comments:
Labels: ,

Tuesday, March 16, 2010

Firefox isn’t Foxy When it comes to Javascript Execution

Strangely, Firefox executes Javascripts the slowest compared to IE, Safari and Chrome. It is a strange phenomenon as it doesn’t affect IE, Safari or Chrome.

There is also a claim that Firefox 3.5 or higher can run Javascript faster. Since there are still many who are using Firefox 3.0 or lower, I will stick to it unless 3.0 has been forced to phase off.

No real fix can be found yet unless to upgrade to version 3.5 or higher which is not a good solution. I cannot just ask all the visitors of the websites I built to upgrade their Firefox. This is a shortcoming of older version of Firefox. Never expect Firefox to have such a small problem that may seem big for someone.
Another thing is to reduce the usage of Ajax as it could slow it down further.

Update (April 4th, 2016): Firefox is no longer the slowest. IE7 or below is the slowest to run Javascript for now. All latest browsers can now run Javascript efficiently. The problem now occurs in tablets. iPad or Android based tablets are now having some speed issues with Javascript even though the specification of the device is encouraging to run heavy tasks. Maybe Javascript is just not their cup of tea.
Read More »
Posted by at No comments:
Labels: ,

Monday, March 15, 2010

Onmouseover/Onmouseout Event Trap Trick

If you happen to need to do a mouse trap on certain link in HTML, you will use onmouseover and onmouseout to due with it. There is one way to save the onmouseout event trap to simplify the procedure. It is to define a fixed property to it such as the color of a table, the color of a border or even a background image. In that case, during a onmouseout event, the browser will go back to your original fixed settings. But if you purposely define how to due with it during a onmouseout event, it will still take your orders but it is redundant unless you want to change it to something else other than the original initial setting such as making the column blue and border red, etc.

In conclusion, you don’t really need a onmouseout event to change the color. Use the 'hover' feature in CSS instead.
Read More »
Posted by at No comments:
Labels: , ,

Sunday, March 14, 2010

Firefox Pointer Change Problem Using Javascript in <MAP>

If you are using <MAP> and you want to do a onmouseover event trap to change the mouse cursor to ‘pointer’, it won’t work in Firefox but still good for the rest, viz., IE, Chrome and Safari. I didn’t it on Opera though.

Firefox requires at least a hyperlink anchor, viz., <a href=…> to change the cursor to pointer whenever the mouse it on top of the defined area.

Good news is that this is the workaround. Bad news is that for firefox, you can only change it to ‘pointer’ type cursor and nothing else.
Read More »
Posted by at No comments:
Labels: , ,

Saturday, March 13, 2010

MySQL Problem with Japanese/UTF-8 texts

If you have tried to put Japanese or UTF-8 texts in MySQL, chances are it will show “junky” characters after you save/reopen it. An adjustment is needed to fix this simple problem:

Declare the data type as VarBinary. Problem solved.
I’ve tried changing the character set to UTF-8, using the “mysql_enable_utf8=1” setting, making SQL query like “SET CHARACTER SET utf8_unicode_ci;”, nothing seems working. Anyway the simple solution above solved the problem. I have tried it with MySQL 5.x.

Pitfall: If you are using SQLyog as your MySQL manager, you need to use version 6 of above to get it work. Anything less will not work even if you declare the data type as VarBinary.
Read More »
Posted by at No comments:
Labels: ,

Friday, March 12, 2010

IE Text <INPUT> Minimum Width Problem

If you happen to specify the “size” in the text input form using <input> which is less than 10, chances are the size will be “fixed” to around 10 even if you specify a lower number. In order to solve this peculiar problem of IE or maybe Firefox or Chrome, I have tried the following CSS declaration and it works:

table-layout: fixed;

Strangely, only Safari works well without this fix. Firefox and Chrome can’t even work well using this fix. But at least IE doesn’t have this problem after this fix.
Read More »
Posted by at No comments:
Labels: , ,

Thursday, March 11, 2010

Paypal Login Window Set to Other Languages (Japanese) by Default

I was requested by a Japanese customer to set the default login window in Japanese. I have tried setting the lc (locale) query string to “JP”, it just works half way with English and Japanese as the choices. But Japanese was treated as second language in the locale of “JP”. The default page is still English. Then I tried all the funny things and eventually this works out right:

<input type=hidden name="locale.x" value="ja_JP">

Now the default Paypal login page is in Japanese! But of course this also needs to work with proper locale setting:

<input type=hidden name="lc" value="JP">
Read More »
Posted by at No comments:
Labels: ,

Wednesday, March 10, 2010

Fixing PERL script saved in UTF-8 Format using Notepad

If your PERL script needs to display non-English texts, say Japanese or Chinese, usually you will save your script in UTF-8 format. Problem arises if you are using Notepad to save the UTF-8 format as it adds the BOM (Byte Order Mark) header to the file.

The problem is that PERL won’t run the UTF-8 file with BOM header once it is uploaded to the server. However, it will run fine if you are running with later version of Apache locally using your Windows based PC.
To solve this problem (if you are not running locally with latest Apache), the following is a PERL script to rid of the first three bytes (BOM header) of the UTF-8 file saved using notepad:

#!c:\perl\bin\perl.exe #or use path to your perl executable
$input = “myfile.pl”;
$output = “myfile_utf8.pl”;
print "Content-type: text/html\n\n";
binmode(STDIN);
binmode(STDOUT, ":utf8");
open(IN, "$input");
@ALL = <IN>;
close(IN);
$all = join("",@ALL);
$BOM_removed = substr $all, 3;
open(OUT, ">$output");
print OUT $BOM_removed;
close(IN);
print “Conversion done! File is output to $output.”;

You can assign $input and $output variables to the file names you desire. These PERL codes can be saved in normal ANSI format.

After the conversion, if the output file doesn’t contain any non-English characters, Notepad will assume it is a ANSI file. Don’t worry. Try to put some non-English characters in your $input file and run this conversion, the $output file will show up as UTF-8 file using Notepad (when you do a Save As…, you will see the format).

Upload the $output file to your server using ASCII transfer mode (not Binary mode), your $output file will run without any Internal Server Error message after chmod (change file permission) $output file to 755.

Please also make sure your $input/$output PERL script prints "Content-type: text/html; charset=utf-8\n\n" HTML header for proper UTF-8 content output.


Note: Do not save the $output file again with notepad, it will lose its "charm". :)
Read More »
Posted by at No comments:
Labels: , ,

Tuesday, March 9, 2010

Redirect a URL inside a frame to a _top page

It’s easy to redirect a URL if you don’t care whether you are from inside a frame or to its own frame using META redirection or window.location javascript redirection.
What if your HTML is inside a frame calling to redirect itself to a _top page? Tricky?

I use this:

if (document.referrer.indexOf('YourAliasName') != -1) {
   top.location.href='http://www.YourMainDomainName.com';
}

You can substitute YourAliasName with a portion of your domain alias name so that the redirection won’t go into infinite loop.

I needed this because my hosting company enclosed my domain alias inside a frame and I need to redirect the domain alias to the main domain name so that it is like a normal redirection without being redirected back inside the frame. Therefore the code above that is highlighted in red is important to move the redirected page to the _top page level.
Read More »
Posted by at No comments:
Labels: , ,

Monday, March 8, 2010

Use Javascipt to change the <select> Pre-select Item

I use this to change:

document.getElementById('idname').selectedIndex = 0;

Tested to work fine with latest IE, Firefox, Safari and Chrome. Your <select> also needs to address the id name such as:

<select id=idname>

You can change the selectedIndex to something else. 0 means the first selection, 1 means the second, etc.
Read More »
Posted by at No comments:
Labels: ,

Sunday, March 7, 2010

Assigning SetTimeout/SetInterval Functions with Argument(s)

If Javascipt’s SetTimeout()/SetInterval() is assigned with a function that contains argument, it won’t run. After trials and errors, here’s the way that works well with latest version of IE, Firefox, Safari and Chrome:

setInterval(function(){function_name(argument)}, 1000);

Noted those highlighted in red is a function to call another function. I have tried using eval(), it works well in Firefox but it won’t in IE. This trick is to make sure it works with all type of browsers. Using common sense, one may resort to “setInterval(function_name(argument), 1000);”, but it won’t run.

Update 2012 January 14: Please don't put quotation marks around the function.
Read More »
Posted by at No comments:
Labels: , ,

Saturday, March 6, 2010

Calling a Function in iframe

I mentioned how I call a function from iframe. Now I explain how I do the opposite, calling a function in iframe from the parent or main HTML.

After trying a few suggestions found using Google, I find this working for all the browers I use, viz., IE, Firefox, Safari and Chrome:

document.getElementById('framename').contentWindow.functioname(argument);

You can replace your own framename, functionname and argument.





Update: It will not work on Chrome if you are running in local host due to security reason. Upload to a web server and it will work.
Read More »
Posted by at No comments:
Labels: , ,

Friday, March 5, 2010

Paypal doesn’t like to be framed in IE

I tried to redirect a shopping cart form to an iframe a while ago but the Paypal keeps showing an Error something like "your last action could not be completed" while using IE but it works fine in Firefox, Safari and Chrome.

Then I make the redirection to a brand new page by adding the "target = _top" to the link anchor and everything works fine now.

Weird problem. Obviously Paypal doesn't like us to enclose it in a frame.


September 2011 Update: Now Paypal doesn't allow its content to be framed across all browser platforms. Previously it will automatically move the content to the _top page by doing a refresh but now we have to redirect to a new top page ourselves or we'll get a blank page. This is for Paypal standard checkout using HTML redirection. Do we foresee a mandatory SSL redirection in the future?
Read More »
Posted by at No comments:
Labels: , ,

Thursday, March 4, 2010

Speeding up Firefox

I notice HTML content will be a bit slow to show up on Firefox whenever there is an error reported in Firefox Error Console.


As a responsible web developer, it is our duty to run the Error Console every now and then.

Just clear the history and have a run of Error Console and reload of target website, all the problems with the Firefox will show up. Fixing some problems in Firefox platform could fix the speed problem in other browsers as well. So start screening with Firefox’s Error Console today!

Sometimes, Firefox just gives warning. It’s also good to get rid of the warning as it may slow down the browser by performing debugging on the javascript and/or CSS. Sometimes we also need to do some tricks with the HTML so that those properties that are not supported in Firefox are filtered before an official web presence.
Update (April 5th, 2016): I now use Google Chrome's Inspect Element to check for errors as it is more versatile and accurate in terms of reporting errors.
Read More »
Posted by at No comments:
Labels: ,

Wednesday, March 3, 2010

Firefox is responding slow on Javascript’s onresize()

Compared to IE, Safari and Chrome, Firefox is the slowest in response to the onresize usually put in the <body> tag.


I was testing this using the latest Firefox version and am not sure how the older versions did. I make my HTML to call a function to relocate an object whenever there is a resize event on the browser’s window. Something interesting for developers to pay attention to. If your onresize() is responding slowly to resize events, chances are you are using Firefox 3 and above. Try to test with IE, Safari or Chrome.
Read More »
Posted by at No comments:
Labels: , ,

Tuesday, March 2, 2010

Diplaying Server Date Using PERL and Javascript

I only find PHP solution after googling around, but I wanted to use PERL. Here’s how I did it:


PERL side:

#!/usr/bin/perl

$time = localtime(time);
print "Content-type: text/html\n\n";
print "var serverdate='$time';";
exit;


Javascript side:

<script language="JavaScript" src="/cgi-bin/getservertime"></script>
<script type="text/javascript">
<!--
document.getElementById('time').innerHTML = '<font face=tahoma size=1>'+serverdate+'</font>';
//-->
</script>




Please place a <div id=”time”> </div> somewhere in the your HTML body to receive the server date from this javascript. The PERL script name is getservertime and you can change accordingly if you like.
Read More »
Posted by at No comments:
Labels: ,

Monday, March 1, 2010

Get the same Browser’s width value across all Browser types

Firefox, Safari and Chrome have almost the same way to measure the page width of the browser window except IE.


This is due to the fact that IE is using different way to get the width of the window than Firefox/Safari/Chrome.


IE uses “window.innerWidth” property whereas Firefox/Safari/Chrome uses “document.documentElement.clientWidth” to get the width of the browser.


The problem now is that IE tends to include the width of the scrollbar where around 15-18 pixels are added to the sum.


I use a simple javascript coding to make sure all the browsers get the same width:



var ie=0;

var agt=navigator.userAgent.toLowerCase();

if(agt.indexOf('ie')!=-1){ie=1;}

pgwidth = getWidth(); // Please find this getWidth() function elsewhere as it is not written by me and it is not right to post here

if (!ie) { pgwidth = pgwidth - 18; }




Now the pgwidth variable carries almost the same width across all common browsers such as IE, Firefox, Safari and Chrome.
Read More »
Posted by at No comments:
Labels: , ,

Sunday, February 28, 2010

Valign doesn’t work in iframe

<iframe> vertical alignment doesn’t work with normal valign property declaration. It has to be adjusted using CSS. Here’s the CSS codes:




iframe { vertical-alignment: top; }




By default if this is set, it aligned to the middle vertically.
Read More »
Posted by at No comments:
Labels:

Saturday, February 27, 2010

Sending Email using PERL Net::SMTP module

I recently bumped into a problem with my old CGI script that sends emails from LINUX/UNIX server in PERL platform.



I later found out that the server I rented/shared is no longer supporting emails using the sendmail –t command. I found a solution to it by using the PERL module of Net::SMTP.


Here are the codes that saved my day:



use Net::SMTP;

$smtp = Net::SMTP->new("smtp.yourdomain.com");

$smtp->mail("username\@ yourdomain.com");
$smtp->to($touser);
$smtp->data();
$smtp->datasend("MIME-Version: 1.0\n");
$smtp->datasend("From: $fromuser\n");
$smtp->datasend("To: $touser\n");
$smtp->datasend("Subject: $subject\n\n");
$smtp->datasend("$messagebody");
$smtp->dataend();
$smtp->quit();



Make sure you know your smtp address before using these codes. I found many other similar codes online but none is fully working. These codes are fully tested with no problem. Let me know if find any problem with these codes.



P.S.: Please replace your own variables for $touser, $fromuser, $subject, $messagebody in PERL.
Read More »
Posted by at No comments:
Labels: , ,

Friday, February 26, 2010

My Lazy Confession

I like to use shortkey, especially the address bar shortcut.

I like to use CTRL-ENTER whenever I type the web address.

For example in the address bar,

I type yahoo followed by CTRL-ENTER. The browser will complete it as http://www.yahoo.com and go to this address. Whether it is IE, Safari, Firefox or Chrome, it is able to perform this trick.

Lazy me, lazy me...
Update (April 5th, 2016): Most browsers can now "auto-complete" your website address if you type in the domain name of popular websites such as Facebook, Google, Youtube, etc.
Read More »
Posted by at No comments:
Labels:

Thursday, February 25, 2010

Javascript to hide/unhide table layer for IE+Firefox+Safari

HTML (Div Layer):
<div id="myDiv" style="position:absolute; visibility:hidden; width=100%;">
<table ...
...
</table>
</div>


HTML (Event Starter):
<input type=checkbox name=mycheckboxid onclick="javascript:toggle(document.myform);">


Javascript:
function getObj(name)
{
  if (document.getElementById) {
   this.obj = document.getElementById(name);
   this.style = document.getElementById(name).style;
  }
  else if (document.all) {
   this.obj = document.all[name];
   this.style = document.all[name].style;
  }
  else if (document.layers) {
   this.obj = document.layers[name];
   this.style = document.layers[name];
  }
}

function toggle(theForm) {
  obj1 = new getObj('myDiv');
  if (obj1.style.visibility == 'visible') {
    obj1.style.visibility = 'hidden';
    obj1.style.position = 'absolute';
  }
  else {
   obj1.style.visibility = 'visible';
   obj1.style.position = 'relative';
  }
}

There are three parts of this implementation:
1) DIV Layer (to wrap the table)
2) Activation (to trap events to activate the hide/unhide action, for this method make sure the form name is called myform or change accordingly)
3) The Javascript Subroutines to handle the hide/unhide action (I'm showing the toggle version which changes the visibility depending on the current exposure)
Read More »
Posted by at No comments:
Labels: ,

Wednesday, February 24, 2010

PERL connect to DBI subroutines (smart detect)

Here are the codes:


sub connect_db {
 if (!$connect) {
  $dbh = DBI->connect("dbi:mysql:your_db_name;host=localhost:3306;user=db_user;password=user_password") or die "Couldn't connect to database: DBI::errstr\n";
  $connect = 1;
 }
}


sub disconnect_db {
 $dbh->disconnect;
 $connect = 0;
}


Try to use as little disconnect as possible as connecting and disconnecting may cause delay and to the HTML connection. As you may already know you may need to install the DBI module for PERL before running these codes. You also need to create a database and obtain the database name, user id and password in order to connect to the database.
Read More »
Posted by at No comments:
Labels: ,

Tuesday, February 23, 2010

Installing PERL CRYPT:SSLEAY module

This module is important for SSL - LWP connections. I used this command to install the module using ppm (usually in c:\Perl\bin):

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

I just reran the command a few days ago and it is still working!
Read More »
Posted by at No comments:
Labels: ,

Monday, February 22, 2010

How do you scroll to the top within iframe?

I have tried:

parent.scroll(0,0);
window.scroll(0,0);
.
.
.

Finally I found a site that says:

window.parent.scroll(0,0);


That saved my day! Hope it works for you too!
Read More »
Posted by at No comments:
Labels: ,

Sunday, February 21, 2010

How to dynamically display the content of your Cookie using Javascript?

Almost the same as the previous post. Just need to replace the cookie variable in the assignment of innerHTML.

HTML:
<span id="myHTML"></span>


Javacript:
document.getElementById('myHTML').innerHTML = document.cookie.indexOf("myCookieName");   // where 'myCookieName' is the name of the cookie such as the shopping cart item quantity, etc..


You can set up a Javascript function to handle this dynamic capability and receive event calls from omouseover, onload, ... HTML event as a trigger to the change of content. You can also set up a timer to change the content periodically.
Read More »
Posted by at No comments:
Labels: ,

Saturday, February 20, 2010

How to dynamically change the content of your HTML using Javascript?

HTML:
<span id="myHTML"></span>


Javascript:
document.getElementById('myHTML').innerHTML = htm;   // where 'htm' is a variable to hold the HTML codes you want to display in the <span> portion.


You can set up a Javascript function to handle this dynamic capability and receive event calls from omouseover, onload, ... HTML event as a trigger to the change of content. You can also set up a timer to change the content periodically.
Read More »
Posted by at No comments:
Labels:

Friday, February 19, 2010

Which Broswer is the Best?

It depends on whether you want to use it to surf or you want use it to develop websites.

For web developers, it is always Firefox as it comes with tools to help troubleshoot websites and the plug-ins are widely available such as plug-ins to view raw HTTP headers, etc.

If you want to use it to surf net, I would recommend Safari and Chrome. I use to like Safari. After installing Chrome, Google has the upper hand.

For best compatibility, IE wins the race as many websites are built based on IE as it has the most users in the world.




In summary, Google Chrome is the best browser to surf although it has its own shortcomings.
UPDATE (April 5th, 2016): Many things occurred since this post. As of today, the scenario has drastically changed. Here is the latest browser statistics from w3schools website: where it used to be: Google Chrome's popularity surged from 11.6% (February 2010) to 69% (February 2016). The increase is almost 700%!
Read More »
Posted by at No comments:
Labels:

Thursday, February 18, 2010

Who says CGI/PERL is obsolete?

Some say CGI/PERL is slow.
Some say CGI/PERL has security problem.
Some say CGI/PERL is phased out by PHP.
...

But there is still one "BIG" website that is still using CGI/PERL until today. Have you seen this:

https://www.paypal.com/my/cgi-bin/webscr

If CGI/PERL is not good, why is PayPal still using it until today to deal with large sum of credit everyday?
UPDATE (April 4th, 2016): It has been six years since I posted this comment about PERL's popularity. But I now would say PERL is already obsolete for me as PHP is far well supported by the developer's community. PERL's support doesn't seem to exist anymore as most developers are now using PHP as their favorite scripting software running on the server side. Whether Paypal is still using PERL, nobody knows as it is important for website like Paypal to refrain the visitors from knowing the type of scripting language it is using. Even the question now is whether PHP will be phased out by free online web editors such as Wordpress, Drupal and Blogger.
Read More »
Posted by at No comments:
Labels: , ,

Wednesday, February 17, 2010

Google Chrome Review

I have decided to add Google Chrome browser to my browser list as test vehicle of websites I built or am going to build.

The download path is http://www.google.com/chrome/

After clicking the download button, a terms-and-conditions page appeared asking downloader to "agree and download".

The download file is called ChromeSetup.exe and it is just 551KB. Very small. It takes around a second to download the file.

ChromeSetup.exe then starts to download Google Chrome. It takes around 3 minutes to complete the download.

The installer then pops up asking me to start Google Chrome with a checkbox whether I want to make Google Chrome my default browser.

Since my Firefox is running while the installation is running, I was asked to close Firefox or skip the import of settings from Firefox.

Then the broswer pops up and the default page is Google.com. Here is the screenshot of the browser:




The icons appeared in my quick launch list as well as on the Desktop.

It does support my shortkey to .coms. The magic CTRL-ENTER after typing the name of the website without having to type http:// or www. or .com. Just type say "yahoo" and then press CTRL-ENTER to go to http://www.yahoo.com. A thumb up for Chrome.

For web developer, they like to "view source" and it works pretty well. But I like firefox better as it can tell you whether it is an iframe after clicking on the right button. It is still better than IE which one cannot view the source codes of an iframe.

The speed is much faster than I expected. The launching of the program is lighting fast and it is even faster than IE. I thought Safari runs the fastest but I have a new champion of speed: Chrome.

The buttons seems in the right place better than Safari which the refresh button is minute.

There is one shortcoming of Chrome that I don't like which is the inability to show the browsing history. I am unable to see the list of previous websites that I surfed. Firefox and IE are still better if this feature is compared. This could be the reason that I may not use Chrome in the future. But I will run to see the compatibility with websites I built or am going to build. This shortcoming is hurting the user-friendliness of Chrome.

In overall, the most impressive of part of Chrome is the speed. With a few more versions in the future, it should be a browser of my choice to be used on daily basis. Since the browsing history feature is lacking in this browser, I will only use it as a testing platform of websites. I hope the future releases add this feature to the speedy browser.


UPDATE: Google Chrome does have the browsing history feature. One just need to press and hold on the forward/backward button to see the history list.
UPDATE 2 (April 4th, 2016): After five years of using Google Chrome, it is a browser I cannot live without. It is flawless when it comes to displaying website contents especially sites that run a lots of Javascripts. It is also now the top ranking browser for the visitors to this blog. It used to be the IE browser that sits in the number one spot for a long time.
Read More »
Posted by at No comments:
Labels:

Tuesday, February 16, 2010

Speeding Up PERL in CGI Output

Usually I will do the following setting:


select(STDOUT);
$| = 1;
print "Content-type: text/html\n\n"; # whenever your browser sees this, it will blank the screen
$| = 0;


$| = 1; is to make sure to send data to client web browser immediately. It is like a "live" connection.

$| = 0; is to make sure to send data to client web browser only when the buffer is filled.

Such configuration can make the user feel that the response of the web is fast but it is actually just slightly faster.

If you use $| = 1; throughout the HTML code spitting process, your web can be slower as it is wasting the buffer and burst capability of TCP connections. Unless you want to have live output capability such as the ping result from the server, avoid setting it to live output mode.
Read More »
Posted by at No comments:
Labels: ,

Monday, February 15, 2010

PERL Trick to Make Alternative Row Color

The mod or modular operator in PERL (%) is responsible for this trick.

The following codes show how I did it:


.
.
.
$total_hits++;

if ($total_hits % 2) { $rowcolor = " bgcolor=#FFEEEE"; }
else { $rowcolor = " bgcolor=#FFFFFF"; }
.
.
.


These codes are in a loop to list out all the items. You can place the $rowcolor in the <TR> tag. The rows displayed will be in pink and white alternatively.
Read More »
Posted by at No comments:
Labels: , ,

Sunday, February 14, 2010

The Maximum Length of a Cookie Name

I once encountered a problem with the cookie length with Firefox when the cookie name or value is too long.

I now try to imitate the same problem I encountered last time, the problem is gone.

But I use shorter cookie name and value so that Firefox won't reject them I encountered last time which caused me a lots of pain debugging.

It's good to test cookies using firefox as one can view the cookies easily using this:

Tools->Options...->Privacy->Show Cookies

Thank goodness there is a browser called Firefox or the debugging of cookie problem will be quite troublesome.
Read More »
Posted by at No comments:
Labels: ,

Saturday, February 13, 2010

PERL codes to check whether a image file Exists

Here are the codes I have been using. The key is to use the "-e" in the if statement. Other than that it is not a hard programming problem:


if (-e "../htdocs/prod/small/$image_id.jpg") {
$img_path = "/prod/small/$image_id.jpg";
}
else {
$img_path = "/img/default_small.gif";
}


Those in red (the relative path to the cgi-bin directory) depend on your server's configuration. One needs to ftp into the server to see the structure.

You can also "elsif" to support more file format rather than just jpg image files. Usually when an image file is not found, I will point it to a default "no photo" image file so that it looks more professional.

You then use the $img_path in the <img src=...> HTML tag.

Hope this helps.
Read More »
Posted by at No comments:
Labels: ,

Friday, February 12, 2010

The FTP software I like best



I like Filezilla. Especially the "File permissions..." feature, one can easily set the file permission without having to worry much about. You can even set permission for many files at the same time. Anyway, this only applies to Linux/Unix based servers. For Windows based servers, the file permission has to be set in the control panel.



I have used many other FTP softwares before. Nothing compares to Filezilla yet. Give it a try, my dear web folks!
Read More »
Posted by at No comments:
Labels:

Thursday, February 11, 2010

How to highlight the entire <TR> during mouseover?

For IE, this doctype or similar one is needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



If you use onmouseover+onmouseout to change the style using the method I mentioned before could be painful.

I came across a method which is code saving:- use TR:hover.

First I have this CSS declared:

tr.rowname:hover { background-color: #FF8888; color: #FFF; }


And I used it in HTML:

<tr bgcolor=#FFF1F1 class=rowname><td>blah blah blah</td></tr>



This is so cool as I save a lots of trouble defining onmouseover, onmouseout, ...
Read More »
Posted by at No comments:
Labels: ,

Wednesday, February 10, 2010

IE Bug#1

If you have a DIV and you don't specify the width, the DIV won't show up ever until you specify the width.

I have tried the same thing on Firefox and Safari, they are both able to show the DIV without having to specify the width of the DIV.
Read More »
Posted by at No comments:
Labels:

Tuesday, February 9, 2010

Randomize Image Display using PERL

From HTML side:

<img src="/cgi-bin/myimage">

From PERL side (myimage):

#!/usr/local/bin/perl

print "Content-type: image/gif\n\n";

$pic[0] = "image0.gif";
$pic[1] = "image1.gif";
$pic[2] = "image2.gif";

$rndm = int(rand()*3);

open(PIC, "./../image/$pic[$rndm]");
binmode(PIC);
binmode(STDOUT);

while (<PIC>) {
print $_;
}
close(PIC);


This is neat. Seldom a programmer reveals this simple but neat secret.
Read More »
Posted by at No comments:
Labels:

Monday, February 8, 2010

Randomize Image Display using Javascript

When you reach the location of your HTML that you need to display an randomized image, you can use these codes as a reference:


<script language="javascript">
<!--
var rn = "";
rn = Math.floor(Math.random()*11);
if (rn == "0") {document.write("<img src=\"/img/pic0.jpg\">");}
if (rn == "1") {document.write("<img src=\"/img/pic1.jpg\">");}
if (rn == "2") {document.write("<img src=\"/img/pic2.jpg\">");}
if (rn == "3") {document.write("<img src=\"/img/pic3.jpg\">");}
if (rn == "4") {document.write("<img src=\"/img/pic4.jpg\">");}
if (rn == "5") {document.write("<img src=\"/img/pic5.jpg\">");}
if (rn == "6") {document.write("<img src=\"/img/pic6.jpg\">");}
if (rn == "7") {document.write("<img src=\"/img/pic7.jpg\">");}
if (rn == "8") {document.write("<img src=\"/img/pic8.jpg\">");}
if (rn == "9") {document.write("<img src=\"/img/pic9.jpg\">");}
if (rn == "10") {document.write("<img src=\"/img/pic10.jpg\">");}
// -->


Note that you need to use the Math.random() function to generate random numbers from 0 to 1 (exclusive). Then you need to multiply the random fraction number to the maximum random number you want plus 1. You then use Math.floor() to round it up to the closest integer number.

Here we go!
Read More »
Posted by at No comments:
Labels: ,

Sunday, February 7, 2010

Set Cookie with Variable Using Eval in Javascript

Have you ever encountered a situation that you need to set a cookie with a javascript variable added to a cookie? But you cannot use "+" in your cookie assignment?

Here is where the javascript eval() comes into play:


function assignfruit(type) {
eval('document.cookie = "fruit='+ type +';"');
}


Since you cannot do this: document.cookie = "fruit="+ type +";" or this: document.cookie = 'fruit='+ type +';', you need to use eval().


Something I found out and I think it is useful to beginners to understand eval().


Read More »
Posted by at No comments:
Labels: ,

Saturday, February 6, 2010

How to process Selection/Radio/Checkbox data using Javascript?

This corresponds with the previous post:

For Pull-Down Selection:

document.docname.variablename.selectedIndex

// Replace docname with your document name and variablename with your selection variable name such as country. The selectedIndex starts from 0 which is the first item in your pull down selection list.




For Radio Selection:

document.docname.variablename[index].checked

// If selected, this notation will become 1. The index starts from 0. If your radio selections have two items, the first one is 0 and the second item is 1.



For Checkbox Selection:

document.docname.variablename.checked

// If checked, this expression will become 1.


Walla!
Read More »
Posted by at No comments:
Labels:

Friday, February 5, 2010

How to process Selection/Radio/Checkbox data in PERL?

This corresponds with the previous post:

For Pull-Down Selection:

if ($form_data{'country'} eq "Australia") {
.
.
.
}


For Radio Selection:

if ($form_data{'type'} eq "orange") {
.
.
.
}


For Checkbox Selection:

if ($form_data{'type'} eq "on") {
.
.
.
}





Please check with the previous posts for the the input/selection HTML. Please also note that you need to have the legendary cgi-lib.pl library called before you can use $form_data{'---'} hash table that captures the query strings from your HTML document.


P.S.: Everything is quite straigtforward except the checkbox query string. If the checkbox is checked, the variable will be sent with a "on" data. Those that are not checked will not be defined at all in PERL.
Read More »
Posted by at No comments:
Labels:

Thursday, February 4, 2010

All the Pre-selections and Pre-checks in HTML Selection ie. OPTION and INPUT(Radio+Checkbox)

For Pull-Down Selection:

<select name=country>
<option>Argentina</option>
<option selected>Australia</option>
<option>Austria</option>
<option>Bahamas</option>
.
.
.
</select>


For Radio Selection:

Orange <input type=radio name=type value=apple checked> Apple <input type=radio name=type value=orange>


For Checkbox Selection:

<input type=checkbox name=type checked>



Coming next, how to detect those selections in PERL-CGI script...
Read More »
Posted by at No comments:
Labels: ,

Wednesday, February 3, 2010

Weird Image Alignment Problem in HTML

Ever encounter this problem?



The alignment of your image and the adjacent text seem hard to be aligned. The text is always lower than the lowest part of the image. No matter how you adjust the CSS of the <img>, nothing works.

There is a simple solution to this:

<Table><TR><TD><img src="/image/but1.gif"></TD><TD><a href="[http_address]">Click if you need to click</a></TD></TR></Table>

Changed from the common mistake of mixing image with text next to each other:

<img src="/image/but1.gif"><a href="[http_address]"> Click if you need to click</a>

All you need to do is just to make a table out of it. Separate the image and text and put them into separate table data columns. Problem solved. If you need to further align the text, you can always use valign to adjust the vertical alignment of the text. Anyway, the TD height adjustment won't help as the TDs share the same height unless you create another table inside the TD.



Simple problem. Simple solution but hard to catch.
Read More »
Posted by at No comments:
Labels: , ,

Tuesday, February 2, 2010

How to fix HTML table problem?

This is the most common problem that a web developer faces throughout his or her career. It is the table problem. Why is the text not aligned? Why is the image glued to the other end instead being centered? These are the common questions in mind especially when you have many layers of tables stacked up to each other.

There is a easy fix to this. COLOR IT!

But RULE#1 before this. Make a backup copy. When you have a copy backed up, you dare to do any experiment with it. Usually I will purposely do these:

<table bgcolor=red>...
or
<tr bgcolor=green>...
or
<td bgcolor=orange>...


You will see very clearly how your table or table row or table data behave in the browser. I usually run these experiments with IE, Firefox as well as Safari. However, it also depends on your DOCTYPE. Different DOCTYPE has different specification.

COLOR it! My friend. This is crucial especially when you are playing with WIDTH=100% game.
Read More »
Posted by at No comments:
Labels: ,

Monday, February 1, 2010

How to perform double underline in HTML?

It is just a trick I learned recently to double underline the grand total in a shopping cart.

Actually there is no direct solution to this.

The trick is to combine both conventional <u> and CSS to perform the trick.

Here are the codes:

<table><tr><td style="border-bottom: 1px double #000;"><u>underline this</u><td><tr></table>

Yes, the double needs to be there and so is <u>. Make sure your <td> is as narrow as possible or the line at the bottom will look much longer.


Read More »
Posted by at No comments:
Labels: ,

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?
Read More »
Posted by at No comments:
Labels: ,

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.


Read More »
Posted by at 2 comments:
Labels: , , ,

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.




Read More »
Posted by at No comments:
Labels: , ,

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.


Read More »
Posted by at No comments:
Labels:

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.



Read More »
Posted by at No comments:
Labels: , ,

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?


Read More »
Posted by at No comments:
Labels: ,

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?


Read More »
Posted by at No comments:
Labels:

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.
Read More »
Posted by at No comments:
Labels: ,

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") == -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.


Read More »
Posted by at No comments:
Labels:

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.


Read More »
Posted by at No comments:
Labels: ,

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.


Read More »
Posted by at No comments:
Labels:

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.




Read More »
Posted by at No comments:
Labels: , , ,

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.




Read More »
Posted by at No comments:
Labels: ,

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!

Read More »
Posted by at No comments:
Labels: ,

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.

Read More »
Posted by at No comments:
Labels: ,

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.
Read More »
Posted by at No comments:
Labels: ,

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.
Read More »
Posted by at No comments:
Labels: ,

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.
Read More »
Posted by at No comments:
Labels: ,

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!
Read More »
Posted by at No comments:
Labels: ,

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.
Read More »
Posted by at No comments:
Labels: , , ,

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.
Read More »
Posted by at No comments:
Labels: , ,

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!
Read More »
Posted by at No comments:
Labels: , ,

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.






Read More »
Posted by at No comments:
Labels: ,

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.



Read More »
Posted by at No comments:
Labels: , , , ,

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.
Read More »
Posted by at No comments:
Labels: , ,

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!
Read More »
Posted by at No comments:
Labels: , ,

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!

Read More »
Posted by at No comments:
Labels: ,

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.

Read More »
Posted by at No comments:
Labels:

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.
Read More »
Posted by at No comments:
Labels:

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.


Read More »
Posted by at No comments:
Labels: , ,

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%*/





Read More »
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)