Insight into Website Engineering

Friday, August 21, 2009

Allow to enter only numbers in textbox

At times there is a need when we want to allow users to enter only number.
Say when its phone number, instead of validation after submit we can restrict users to enter non numeric characters using the following script:



 function isNumberKey(evt)
 {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if(!((charCode>=48&&charCode<=57)|| (charCode==46) || (charCode==8)))         return false;     return true;   }   To use it in HTML: <input type="text" onkeypress="return isNumberKey(event);" />

Friday, August 14, 2009

Parse pop up blocker

All web browsers these days incorporate a popup blocker. These blockers are intended to stop popup windows from appearing except when they are requested by the person using the browser.

This means that a popup blocker is supposed to stop popup windows attached to such events as onload and onunload (and other events not directly associated with the person requesting a popup) from appearing but is not supposed to block those attached to an onclick event on a link (and other events that can be taken to mean that the person has requested it).

Unfortunately not all blockers handle this correctly. Sure they block any popups that are not requested but they also in many cases block requested popups. This is due to the way in which the browsers determine whether a popup was actually requested.

Not all browsers are smart enough to realize that if the onclick event on a link calls a function and the purpose of that function is to open a popup window that the popup has in fact been requested. They see the popup code in the function but are not clever enough to see that this code is called as a result of an action by the person using the browser. Coding our popup that way leads to the popup being blocked despite the fact that it was requested, a sure way to get someone annoyed that your site doesn't work properly despite the fact that the problem is actually their browser.

The way to fix this for many of these dumb browsers is to place the popup code into the onclick itself instead of calling a function. This can result in rather messy HTML but makes sure that the browser has the best possible chance to see that the popup is only created in response to a definite action and does not occur automatically.

For example, a Javascript generated popup could be coded like this:



<a href="#" onclick="popWin = window.open('','name','height=255,width=250, toolbar=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=no'); openPopup(popWin);">popup</a>

The displayPopup function would create the content for the popup window like this:


      function openPopup(TheNewWin) {

               TheNewWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');

                TheNewWin.document.write('<head><title>Popup<\/title><\/head><body style="overflow:hidden" bgcolor="#ffffff"> <p>This is an example of a popup window.<\/p>');

                TheNewWin.document.write('<p>Provided that your web browser supports Javascript then this window should be 250 pixels wide and 255 pixels high, there should not');

                TheNewWin.document.write(' be any toolbars etc. and the window cannot be resized.<\/p><hr \/> <p align="right"><a href="#" onclick="self.close();return false;">Close');

                TheNewWin.document.write(' Window<\/a><\/p> <\/body><\/html>');

}

I can't guarantee that your popup will appear if you code it this way. All I can guarantee is that your popup will have a better chance of making it past the blockers if coded like this as it makes it more obvious to the popup blockers that the popup window has actually been requested by the person viewing the page and is not being generated automatically.

Courtesy: Stephen Chapman

Wednesday, July 22, 2009

Stop adjusting the text size in iphone when you Rotate the Screen

There are many CSS3 properties available for you to use in Safari on the desktop and iPhone OS. CSS properties that begin with -webkit- are usually proposed CSS3 properties or Apple extensions to CSS.

Adjusting the text size is important so that the text is legible when the user double-taps. If the user double-taps an HTML block element—such as a <div> element—then Safari on iPhone OS scales the viewport to fit the block width in the visible area. The first time a webpage is rendered, Safari on iPhone OS gets the width of the block and determines an appropriate text scale so that the text is legible.

If the automatic text size-adjustment doesn’t work for your webpage, then you can either turn this feature off or specify your own scale as a percentage. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look better. In these cases, use the -webkit-text-size-adjust CSS property to change the default settings for any element that renders text.

In addition to controlling the viewport, you can control the text size that Safari on iPhone OS uses when rendering a block of text.

To turn automatic text adjustment off, set -webkit-text-size-adjust to none as follows:

html {-webkit-text-size-adjust:none}

To change the text adjustment, set -webkit-text-size-adjust to a percentage value as follows, replacing 200% with your percentage:

html {-webkit-text-size-adjust:200%}

Setting the text size adjustment property:

<body style="-webkit-text-size-adjust:none">

<table style="-webkit-text-size-adjust:auto">

<div style="-webkit-text-size-adjust:200%">