Ajax (pronounced /ˈeɪˌdʒæks/) (shorthand for Asynchronous JavaScript  and XML) is a group of interrelated web development techniques used on the client-side  to create interactive web applications. With Ajax, web applications can retrieve data from the server  asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

If you’re working on Ajax based websites, you’ll always face usability problems when users click on the Back or Forward buttons on the broswer. Using Really Simple History (RSH) allows you over come this issue.

The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.

In addition, RSH provides a framework to cache transient session information that persists after a user leaves the web page. This cache is used by the RSH framework to help with history issues, but can also be used by your own applications to improve application performance. The cache is linked to a single instance of the web page, and will disappear when the user closes their browser or clear their browser’s cache.

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Link: Really Simple History
Demo Link: testDhtmlHistory.html (try using the browser back button after you get to this demo)

Many times we are searching for Javascript and css compression.

Few days before i was searching for Jquery JS library compression.
Yes there is compressed version available but i want to make some changes in JS files as per my project requirements.
So i want to compress my JS and CSS files without getting any error.
YUI Compressor 2.4.2. is the very nice tool for that. But i dont want to spend time on how YUI compressor is working.

So here is solution- I got online YUI compressor.
You can use that:
http://refresh-sf.com/yui/
It has very nice options.

http://compressor.ebiene.de/

http://www.cssdrive.com/index.php/main/csscompressor

Various implementations of Drag & Drop sortable lists using JS and CSS.

“In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.”

Link: Drag & Drop Sortable Lists with JavaScript and CSS

If you want the nice slide animation effect with javascript. you can use following javascript. Here I am not using any third party javascript library for creating the slide effect.

For In page popup slide effect you can use following JavaScript code.

id="popup-container" style="height:200px;weight:200px;overflow: hidden; display: block; position: absolute; z-index: 1027;">

<a href="#" onclick="movead();" ><span>slide</span></a>

</div>

and use the following javscript code in your document.

function movead(){
timerID = setInterval("mocontainer()", 50);
}

function mocontainer(){
 var popup_element = document.getElementById('popup-container');
 animate_moveit(popup_element,0,-5);
}

function animate_moveit(obj, x, y){
obj.style.left = parseInt(obj.style.left) + x +"px"
obj.style.top = parseInt(obj.style.top)+ y + "px"
}

For changing the slide direction change the values in following line and put in to the mocontainer function

animate_moveit(popup-element,-5,0);  – this is for right to left

animate_moveit(popup-element,0,-5);  – bottom to top

You can change that to as per need.

I you want the minimize functionality for your in page pop-up use following code for minimize and restore button. Following code you can use for showing the minimize button on pop-up.

Note: Here for this example My in page popup div id name is “popup-container”. For using following example you should keep the main popup continer id name is “popup-container”.

<a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>

<a id="dialog-minimize-return" href="#" onclick="minimize_restore();" style="display:none;"><span>Min</span></a>

Use following javascript function in your document.

function minimize(){

 var main-containter = document.getElementById('popup-container');
 window.divh = main-containter.style.height;
 window.divw = main-containter.style.width;
 window.divtop = main-containter.style.top;
 window.divleft = main-containter.style.left;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "block";

 main-containter.style.position ="absolute";
 main-containter.style.left ="10px";
 main-containter.style.bottom ="0px";
 main-containter.style.marginBottom ="-100px";
 main-containter.style.top = "auto";
 /* css({position:"absolute", left:"10px", width: 250, height: 100, bottom:"-60px"});
 top: 389px; left: 381px; bottom: -60px;
 */
}

function minimize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "none";
}

Above function will swap the minimize and restore button through javascript.

Using following function you can achieve the maximize and maximize restore functionality using the simple javascript. following code you need to use in your html for maximize button.

<a id="dialog-maximize" onclick="maximize();" href="#" style="display: block;"><span>Max</span></a>

<a id="dialog-maximize-return" onclick="maximize_restore();" href="#" style="display: none;"><span>Max</span></a>

following javascript code you need to use in your document.

function maximize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "none";
}

function maximize(){

 var popup_element = document.getElementById('popup-container');
 window.div_height = popup_element.style.height;
 window.div_width = popup_element.style.width;
 window.divtop = popup_element.style.top;
 window.divleft = popup_element.style.left;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "block";

 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 myWidth = myWidth -25;
 myHeight = myHeight -20;
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left ="10px";
 popup_element.style.height = myHeight +"px";
 popup_element.style.width = myWidth +"px";
 popup_element.style.top = "5px";
}

If you having any issue with this script please get back to me.

html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.

<script>
document.body.onload = function () {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}

</script>

You just need to minus the header and footer height from middle_container.

With CSS you can use the following code

.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });

You just need to use following code in your head tag

var starttime = new Date().getTime();
window.onload=function() {
 var loading_time = new Date().getTime()-starttime;

 alert('Webpage loading time in ' + loading_time + 'ms - milisecond');
}

[script]
/*
* This get_mouse_coordinates function we are using for capturing the Mouse coordinates of on browser
*/
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.load = get_mouse_coordinates;
document.onmousemove = get_mouse_coordinates;

function get_mouse_coordinates(e) { // as per Document body

var x_pos;
var y_pos;
if (!isIE) {
x_pos = e.pageX;
y_pos = e.pageY;
}
if (isIE) {
x_pos = event.clientX + document.body.scrollLeft;
y_pos = event.clientY + document.body.scrollTop;
}

alert(x_pos);
alert(y_pos);
}

[/script]

clientX and clientY will work in only Firefox, safari, chrome and opeara. That will not work in IE browsers.

So We need to write condition for IE browsers.
In IE browser use window.event.x and window.event.y methods.

Given example is cross browser tested…

Lets say I kept div height auto and width as 200px fix and data is dynamic for eash user. So how we can get the div height.

We can use two javascript functions for fetching the div height.
1. offsetHeight – this will return the value which are specified in your CSS

2. clientHeight – this function will return real inner height of element that does not matter about CSS.
I recomend to use this function.

Exmaple code as follows:

<style>
#wordpressapidiv{ width:200px; height:auto;border:#ccc 1px solid}
</style>
<div id=\"\wordpressapidiv">
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.

This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content.
</div>

<script>
function getDivHeight(divID){
gd = document.getElementById(divID).clientHeight;
alert(gd);
}

function getDivWidth(divID){
gw = document.getElementById(divID).clientWidth;
alert(gw);
}

</script>

<input name="test" type="button" onclick="getDivHeight('wordpressapidiv')" >

Function above code you can fetch the div height and width using the javascript.

Our basic need are as follows in any IDE, the IDE need to support following things:

• CSS
• XHTML/HTML
• JavaScript
• PHP
• MySQL

I created a list of IDE which I used daily  to do a development. Here I need to clarify IDE is language specific. I work in PHP, Ruby on Rails, Adobe Air, Flex, Javascript, CSS.

I recommend following IDEs which I really found useful for all the developer who are working in wordpress, joomla, drupal development.

1. eclipse (Compatible  on Windows and Linux)

Description: Eclipse is best IDE for all language development. Eclipse IdE is basically Java development but still that provides PHP, ROR and other language support. I like this IDE for java development but I did not recommend for PHP or Ruby on Rails.

2. NetBeans (Compatible  on Windows and Linux)

Description: This IDE has also all language support. I specially like this IDE from Ruby on Rails development. I Used this IDE for Ruby on Rails development as well as some times for PHP development. Among the Ruby on Rails developer this IDE is so popular.

3. Komodo (Compatible  on Windows and Linux)

Description : This IDE is also support for all languages. This IDE is really good support for PHP. I really love this IDE for PHP development. Simple and fast and still nice features about PHP. This IDE is really popular among the PHP developers.

4. Aptana (Compatible  on Windows and Linux)

Description : This IDE is mainly made for Ruby on Rails development. This is also popular among Ruby developers. This IDE has features like eclipse. I like this IDE for Adobe Air and flex development.  This IDE has also PHP support.

5. EditPlus (Compatible  on Windows)

Description: This IDE is plain simple text editor. Shows you simple color highlight features. I specially recommend this IDE for PHP development and new PHP developer always start with this IDE so they will get filmier with PHP functions and methods because this IDE is does not provide any help. I love the use this IDE in daily use for any language development.

If you want to add any more IDEs. You can comments on this article.

This is senorio:
If content is less then footer need to go bottom of browser and if content is more then footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. Becasue this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following javascript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 //Non-IE
 browserHeight = window.innerHeight;
 } else if( document.documentElement && (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body && (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 }
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";
</script>

Here in this javscript I am assuming middle_container is your main block of content. You can change the variables as per your need.

Still Most of all web designers are fighting all the time for IE6 issues and hacks. All web designers and Web development companies are still spend so much to to solve the issue with IE6 browsers.

There is reason behind that. In all over the world, still some big corporate companies and offices are using IE6. Many big companies and brands announced to ban IE6 in 2009 itself.

The Google and March 1 references come from that company’s recent announcement that it would drop IE6 from the list of supported browsers for its Google Docs online applications and its Google Sites hosting services starting on Monday, March 1. Yesterday, Google’s popular video site YouTube named March 13 as the end-of-support date for IE6.

There is big issue with IE6 browser but still some web developer are not aware of that. IE6 is majorly lacking to provide a web security. I can say, IE6 is kind of hackers browser.

Microsoft‘s browser has weathered a “kill IE6″ campaign since February 2009, when Facebook prompted IE6 users to upgrade. It accelerated last summer when Digg announced it would curtail IE6 support, and an “IE6 Must Die” Twitter petition collected thousands of names. Microsoft has endorsed the anti-IE6 efforts, going so far as to say that “Friends don’t let friends use IE6,” although it has refrained from forcing users or companies to upgrade to IE7 or IE8, arguing that the old browser is still required by some enterprises.

There are new technologies are coming like HTML5, CSS3 but still IE8 is also not providing the basics of that. So web deverloper’s need to struggle for that. The biggest issue I will say here is project estimation. Due to IE6 browser estimation will go always wrong. This is really frustrating.

There are multiple issues with IE6. I will talk about some here.

• z-index issue – most bad part in IE6
• inline-block – display property not work
• min-height and max-height css property
• child selectors in CSS
• PNG transparent images- biggest issue
• Poor Javascript support
  

Microsoft is planning to launch IE9 but still they are not included the some nice features of HTML5 and advanced javascript methods and CSS3 attributes.

What I say more.. Web designers are saying what to do with IE6…..

Many times we heard about soap but we really dont know about what is soap.

What is soap?

SOAP, the Simple Object Access Protocol, is the powerhouse of web services. It’s a highly adaptable, object-oriented protocol that exists in over 80 implementations on every popular platform, including AppleScript, JavaScript, and Cocoa. It provides a flexible communication layer between applications, regardless of platform and location. As long as they both speak SOAP, a PHP-based web application can ask a C++ database application on another continent to look up the price of a book and have the answer right away. Another Internet Developer article shows how to use SOAP with AppleScript and Perl.

If you want to use the soap then you need to install libxml on your server. In your PHP.ini file

you need to check following setting are available or not if not then put it.

SOAP is an XML-based web service protocol. The most common external specifications used by a SOAP-based service is WSDL to describe its available services, and that, in turn, usually relies on XML Schema Data (XSD) to describe its data types. In order to “know” SOAP, it would be extremely useful to have some knowledge of WSDL and XSD. This will allow one to figure out how to use the majority of SOAP services.

Here is the basic WSDL Structure

<definitions>
 <types>
 …
 </types>
 <message>
 …
 </message>
 <portType>
 …
 </portType>
 <binding>
 …
 </binding>
 </definitions>

Filled example:

 <xsd:complexType name="ResultElement">
 <xsd:all>
 <xsd:element name="summary" type="xsd:string"/>
 <xsd:element name="URL" type="xsd:string"/>
 <xsd:element name="snippet" type="xsd:string"/>
 <xsd:element name="title" type="xsd:string"/>
 <xsd:element name="cachedSize" type="xsd:string"/>
 <xsd:element name=
 "relatedInformationPresent" type="xsd:boolean"/>
 <xsd:element name="hostName" type="xsd:string"/>
 <xsd:element name=
 "directoryCategory" type="typens:DirectoryCategory"/>
 <xsd:element name="directoryTitle" type="xsd:string"/>
 </xsd:all>
 </xsd:complexType>

Soap is nothing but xml format web service to talk with cross domain servers. There are othere ways also to create web services. XML-RPC is good one and that is not to much hard to learn also. Use can use following code in your PHP file.

// create a soap object
 $Soap_Object = new SoapClient("http://anywebsite.com/any.wsdl", array('trace' => true));

 // setting params to authenticate to web service
 $params_Authenticate = array('username' => 'username', 'password' => 'password');

 // authenticate to web service
 $do_login=  $Soap_Object->login($params_Authenticate);

 // take sesstion id from anywebsite.com
 $your_session_id= $do_login->loginReturn->sessionId;

 // Set the query parameters.

 $soap_query = 'select book_id from Time where book = 52435455';
 paramsQry = array('queryString' => $soap_query);

 // Make a soap call.
 $objResponse = $Soap_Object->query(paramsQry);

 header('Content-Type: text/xml; ');
 print($Soap_Object->__getLastRequest());

Soap is nothing but a web service with xml so use PHP functions to create the Soap service. Following graph will help you to understand more and in detail about SOAP.

Both function are many times used by developer in javascript functions, Ajax calls, Web services and many JS libraries.

So We need understand the similarities and differences and limitation about document.write and innerhtml.

First whenever and where you calls document.write function that more important.

Here I am going to show you how to use the document.write first.

<script type="text/javascript">

var hello_world = function() {
document.write('Wordpressapi is good website'); // print hello world in DOM

var mytext = "Wordpressapi is best website";
document.write(mytext); // print again through variable.

}
</script>

Using above code you can print or execute the so much HTML content in DOM.

Here I am going to show you how to use the innerHTML in DOM.

<script type="text/javascript">
document.getElementById('sample_Div').innerHTML="Wordpressapi is good website"; // add simple text
//document.getElementById('sample_Div').innerHTML="<img src=sample.jpg></img>"; // add image
</script>

Note: In your document “sample_Div” id with div need to be present.
put following code in your document.

<div id=\"sample_Div\">
Sample Text
</div>

Loading iframe using innerhtml is the best techniqe and solution for web services and cross domain calls.

document.getElementById('sample_Div').innerHTML = "<iframe src='http://wordpressapi.com/'></iframe>";

Both the techniques are stand for as per situation and use

For Ajax and adding the dynamically content in DOM we have actually we ways.
First is simple document.write function and second function is using innerHTML.

There is some cross browser issues with both the method. First I will talk about document.write.
If we use document.write in our DOM then there is no control over the content which we are adding through document.write

Basically when we use document.write then this function will execute or add the HTML content in DOM where we call this function.

If you want to avoid this this behavior I suggest use the innerHTML. But innerHTML method is also having some issues with nested innerHTML executing with 2 or 3 level with Major browsers.
Microsoft is now planning to launch the IE9 version. But in that version they are not supporting this kind of functionality.

So Major JS library developer need to think about new approach which will give some good alternate solution.

We can achieve the nested innerHTML but we need to do some very complex development in javascript.

With innerHTML method: The property is read/write for all objects except the following, for which it is read-only:
COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value. Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer
5.

In this article I am going to give example about executing the simple javascript function in innerHTML.

<br />function add_cont() {<br />var html_cont = '&lt;a href="javascript:alert(\'hello world\')"&gt;click for hello world test&lt;/a&gt;'+<br /> '&lt;script&gt; alert(\'tests\');'+<br />'var wordpressapi = document.createElement("div");'+<br />'wordpressapi.innerHTML = "some ad";&lt;\/script&gt;'<br />;<br />document.getElementById('test_htm').innerHTML = html_cont;<br />}<br /><br />&lt;div id="test_htm"&gt;&lt;/div&gt;<br />&lt;a href="javascript:add_cont()"&gt;Insert test div and text with javascript on click event.&lt;/a&gt;<br />

Other best solution is all the tradtional but still trusted.

<br />document.write("&lt;iframe src='inner_cont.html'&gt;");<br />// ... Javascript code will goes here... //<br />document.write("&lt;/iframe&gt;");<br />

I am still working on this issue to for adding nested innerHTML content.

I recomend not to use these JS library because these library will take some brandwidth of your website. Most of the code these JS library is useless or un useful to your website.
Still you are adding these JS library to your website.

In this article I will show you very easy technique to the javascript form validations with minium code.

Just copy paste the following code in to your head section first.

<script type="text/javascript">
// Set maxlength value for your required fields
var maxlength = 255;
/*
* You can pass three parameters this function
* Example : ValidateRequiredField(phone,"Telephone must be filled out!", "number");
* For string format no need to pass any strFormat.
*/
function ValidateRequiredField(field,alerttxt,strFormat) {
with (field) {
if (value == null|| value == "") {
field.style.background= "grey";
alert(alerttxt);return false;
} else if (value.length > maxlength ) {
field.style.background= "grey";
alert('Maxlenth should be not more than 255 charactor');return false;
} else if (strFormat == 'number' && isNaN(value) ) {
field.style.background= "grey";
alert(field.name + ' is not a number, Please put in Numric format');return false;
} else {return true;}
}
}

/*
* Using the function you can validate the email functions
* Example: ValidateEmailAddress(email,"Email is not in Valid format!")
* Return true or false
*/
function ValidateEmailAddress(field, alerttxt) {
with (field) {
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos < 1 || dotpos-apos < 2)
{alert(alerttxt);return false;}
else {return true;}
}
}

/*
* Using the function you can validate the checkbox in the form
* Example: ValidateCheckBox(agreement,"Agreement is not checked!")
* Return true or false
*/
function ValidateCheckBox(field,alerttxt) {
with (field) {
if (!field.checked == 1) {
alert(alerttxt);return false;
} else {return true;}
}
}

/*
* Using the function you can validate the checkbox in the form
* Example: ValidateRequiredField(website,"Website name is required!")
* Return true or false
*/
function ValidateWebAddress(field,alerttext) {
with(field) {

var companyUrl = value;

var RegExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;

if(RegExp.test(companyUrl)) {
return true;
} else {
alert(alerttext);
return false;
}
}
}

function ValidateCompleteForm(thisform) {
with (thisform) {

if (ValidateRequiredField(full_name,"First name is required!")== false) {full_name.focus();return false;}

if (ValidateRequiredField(email_address,"Email must be filled out!")== false) {email_address.focus();return false;}

if (ValidateEmailAddress(email_address,"Email is not in Valid format!")== false) {email_address.focus();return false;}

if (ValidateRequiredField(website_name,"Website name is required!")== false) {website_name.focus();return false;}

if (ValidateWebAddress(website,"Website Address is not incorrect format!")== false) {agreement.focus();return false;}

if (ValidateRequiredField(mobile,"Mobile must be filled out!", "number")== false) {phone.focus();return false;}

if (ValidateCheckBox(sex,"sex is not checked!")== false) {sex.focus();return false;}

}
}
</script>

And in you body where you are using the form just add the onsubmit=”return ValidateCompleteForm(this)” words in Form tag.

Exmaple:

<form action="submit.php" onsubmit="return ValidateCompleteForm(this)" method="post" >

Note: you can change the parameter as per your form fields names. Maxlength I kept 255 you can change this value as per your requirment.

Still if you have any doubts about this function please ask me.

You many times heard about getElementsByTagName javascript method but you did not tried.

getElementsByTagName function is very useful when you are working with javascript events. Using this function you can attach the event to any tag which is present in HTML body.

Here I am going to give the image example. Following script will attach the mouseover event to all images which are present in DOM.

<script type="text/javascript">

var all_images = document.getElementsByTagName('img');

for (var i = 0; i < all_images.length; i++) {

addEvent(all_images[i], 'mouseover', myfunction, false);

}

function myfunction () {

 alert('this is image mouse over alert');

}

/**
 * cross-browser event handling for IE5+, NS6 and Mozilla
 * By Scott Andrew
 */
//This addEvent function we are using for external class use
this.addEvent = function(elm, evType, fn, useCapture) {
 if (elm.addEventListener) { // Mozilla, Netscape, Firefox
 elm.addEventListener(evType, fn, useCapture);
 return true;
 } else if (elm.attachEvent) {  // IE5 +
 var r = elm.attachEvent('on' + evType, fn);
 return r;
 } else {
 elm['on' + evType] = fn;
 }
}

</script>

If you copy paste the following code in your document and If you mouseover on any image then alert with message will come.

This script will work in any browsers. (IE 6,7,8, FF3,2, Safari3,4)

JavaScript code to make a JSONP call will as follows:

function common_jsonpRequest(url, name, query) {

 if (url.indexOf("?") > -1)
 url += "&jsonp="
 else
 url += name + "&";
 if (query)
 url += encodeURIComponent(query) + "&";
 url += new Date().getTime().toString(); // prevent caching

 var JSONPscript = document.createElement("script");
 JSONPscript.id = 'wordpressapi_jsonpRequest';
 JSONPscript.setAttribute("src", url + "&CacheBuster=" + Math.random());
 JSONPscript.setAttribute("type","text/javascript");

 // write the jsonp script tag
 document.body.appendChild(JSONPscript);
 //script.text = "";

}

function returncall (data){
 alert(data);
// you can use data as a variable also.
}

In same javascript you should write the returning function as above.

You can call JSONP this function as follows;

<a href="http://wordpressapi.com/files/JSONP-request.gif"><img class="alignnone size-medium wp-image-1167" title="JSONP-request" src="http://wordpressapi.com/files/JSONP-request-300x125.gif" alt="" width="300" height="125" /></a>
common_jsonpRequest(base_url+'getData.php?jsonp=mycallback&name=for_wordpressapi');

Notel: getData.php file will beahave like externaal javascript file so handle this file carefully.
getData.php sample file.

<?php
$data = "this is our dynamic data";
if($_REQUEST['name']=='for_wordpressapi'){

echo "returncall(".$data.")";

}

?> 

This will return the "this is our dynamic data" as a alert.

But I want customize every thing like color of rounded corner header background, footer background and border also.

I did so much R&D about same but did not found any solution.

So I tried to code myself in CSS and I got succeed in that.
In this article I am going to share the code with you.

first put my style sheet in your webpage.

<style type="text/css">
body {background-color: #fff;font: normal 10pt ,Arial,sans-serif;}

img{border:none;}

.wordpressapi-main{
 clear:both;
 float:left;
 width:300px;
 /*border:1px solid #f00;*/
}

.wordpressapi_round_header {
 background-color: #ddd;

 -moz-border-radius: 15px 15px 0px 0px;
 -webkit-border-radius: 15px 15px 0px 0px;
 border-radius: 15px 15px 0px 0px;
 /*behavior: url(border-radius.htc);*/
 text-align:center;
 padding:5px 0px 5px 0px;
 clear:both;
 float:left;
}

.wordpressapi_round_footer {
 background-color: #ddd;

 -moz-border-radius: 0px 0px 15px 15px;
 -webkit-border-radius: 0px 0px 15px 15px;
 border-radius: 0px 0px 15px 15px;

 /*behavior: url(border-radius.htc);*/
 text-align:right;

 clear:both;
 float:left;

}
.wordpressapi_round_middle {
 text-align:center;
 color:blue;
 clear:both;
 float:left;
}
.inner_ad {
 padding:10px;
 text-align:left;
 color:black;
 font-size:12px;
 vertical-align: middle;

}
.round_heading{
font-size:16px;
line-height:26px;
font-weight:bold;

}

/* rounded corners */
.wordpressapi-blue-round-container{ /*margin-top:10px;*/}
.wordpressapi-blue-round-container-top, .wordpressapi-blue-round-container-bot, .wordpressapi-acco-top, .wordpressapi-acco-bot {
 display:block;
 background:#fff;
 font-size:1px;
 clear:both;

}
.blue-round-t1, .blue-round-t2, .blue-round-t3, .blue-round-t4 {display:block; overflow:hidden;}
.blue-round-t1, .blue-round-t2, .blue-round-t3 {height:1px;}
.blue-round-t2, .blue-round-t3, .blue-round-t4 {
 background:#0000FF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.blue-round-t1 {
 margin:0 5px;
 background:#0000FF;
 border-top:1px solid #ccc;
 height:0px;
}
.blue-round-t2 {margin:0 3px; border-width:0 2px;}
.blue-round-t3 {margin:0 2px;}
.blue-round-t4 {height:2px; margin:0 1px;}

.white-round-t1, .white-round-t2, .white-round-t3, .white-round-t4 {display:block; overflow:hidden;}
.white-round-t1, .white-round-t2, .white-round-t3 {height:1px;}
.white-round-t2, .white-round-t3, .white-round-t4 {
 background:#FFF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.white-round-t1 {
 margin:0 5px;
 background:#FFF;
 border-top:1px solid #ccc;
 height:0px;
}
.white-round-t2 {margin:0 3px; border-width:0 2px;}
.white-round-t3 {margin:0 2px;}
.white-round-t4 {height:2px; margin:0 1px;}

.wordpressapi-blue-round-contents{
 display:block;
 border:1px solid #000;
 border-width:0 1px;
 padding: 0 15px;
 background:#0000FF;
 color:#000;
 text-align:justify;
 width: 878px;
 clear:both;
 float:left;

}

.hold{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 clear:both;
 float:left;
 width:298px;
}

.inner-adds-bottom{
 padding-top:1px;
 clear:both;
 float:left;
}

/* rounded corners */

.cross-img, .cross-img:link, .cross-img:hover{
 background:url(close_button.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}

.info-img, .info-img:link, .info-img:hover{
 background:url(information_btn.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}
</style>

Then Put following code in your HTML body.

You will get the following result as follows:

Download the main html file from  here: Advanced rounded corner with CSS