Ajax Email validator :) AJAX PHP

November 17th, 2008 by admin

I think the most important aspects of building and processing a form is how you validate data here is a script build via AJAX  and PHP  with example how to check if your email address is real one  :

this is HTML part  :

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; ” />
<title>Email Validator AJAX and PHP</title>

<script language=”JavaScript” type=”text/javascript”>
var request;

/**
* Load XMLDoc function
* here you need put your backend-script   url
*/

function doLoad(url) {
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
request.onreadystatechange = processRequestChange;
request.open(“GET”, url, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
if (request) {
request.onreadystatechange = processRequestChange;
request.open(“GET”, url, true);
request.send();
}
}
}

/**
* Event on request change
*/
function processRequestChange() {
document.getElementById(“resultdiv”).style.display = ‘none’;

abortRequest = window.setTimeout(“request.abort();”, 10000);
// if all is ok
if (request.readyState == 4) {
clearTimeout(abortRequest);

if (request.status == 200) {
document.getElementById(“resultdiv”).style.display = ‘block’;
document.getElementById(“responseHTML”).innerHTML = request.responseText;
} else {
alert(“Sorry can’t receive your dates :n” + request.statusText);
}

}

}
</script>
</head>

<body>

<input type=”text”
id=”emails”
value=”Enter your email pls:”
onFocus=”this.value=”; document.getElementById(‘resultdiv’).style.display=’none’;”/>
<input type=”button”
value=”send”
onClick=”doLoad(‘q.php?email=’+document.getElementById(‘emails’).value);”/><br /><br />

<div id=”resultdiv” style=”display: none;”>
Results:
<span id=”responseHTML”></span>
</div>

</body>
</html>

now we need a php script we will call it  q.php:

<?php

/**
* here we receive a headers
*/

header(“Content-type: text/plain; charset=utf-8″);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0″, false);

$emailw = $_GET["email"];

if (!preg_match(“/^(?:[a-z0-9]+(?:[-_]?[a-z0-9]+)?@[a-z0-9]+(?:[-_.]?[a-z0-9]+(?:[-_]?[a-z0-9]+))?\.[a-z]{2,5})$/”,trim($emailw))){
echo “Pls enter correct email”;
exit;
}
else
{
$email_arr = explode(“@” , $emailw);
$host = $email_arr[1];

if (!getmxrr($host, $mxhostsarr))
{
echo “We try to find $host but can’t .Can you enter another email or check this one pls $emailw”;
exit;
}
getmxrr($host, $mxhostsarr, $weight);
echo “Congratulations your mail is valid : $emailw <br>”;
}

?>

that’s all :)

if you have any questions  pls  let me konow Branding-Studio.com

Your own Scrollbar color

November 4th, 2008 by admin

In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a “Strict” mode in IE, the scrollbar properties need to be assigned to the “HTML” tag instead of the conventional “BODY” in order to work.

The CSS (for non “strict” doctypes):

body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}

The CSS (for “strict” doctypes):

html{


}

CSS image effect ;) you can use it in your gallery;)

November 1st, 2008 by admin

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.


CSS code:

<style type=”text/css”>

/*URL: http://www.Branding-Studio.com.com/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image’s height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

HTML code:

<div class=”gallerycontainer”>

<a class=”thumbnail” href=”#thumb”><img src=”images/firstimage.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/firstimage.jpg” /><br />Simply beautiful.</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/ocean.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/ocean.jpg” /><br />Beautiful OCEAN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”><img src=”images/fun.jpg” width=”100px” height=”75px” border=”0″ /><span><img src=”images/fun.jpg” /><br />Is it FUN?</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/horse.jpg” width=”100px” height=”70px” border=”0″ /><span><img src=”images/horse.jpg” /><br />RUN RUN RUN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Super Man<span><img src=”images/super.gif” /><br />Super Man</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Google<span><img src=”images/google.gif” /><br />Google</span></a>

</div>

Just change some files or paste your own images in this html code ;)