Tuesday, October 28, 2008

dropdown list with ajax

ajax drop down menu is easy to learn,
i just find how to create dropdown list.

here is the example

For This Example, I using PHP Code and MySQL Database
1. Create Dropdown List (state_dropdown.php)

<form name=sel>
States: <font id=states><select>
<option value=""> ----- </option>
</select></font>

Cities : <font id=cities><select>
<option value='0'<=== none ===>/option>
</select$gt;</font>
?$gt;

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

window.onLoad=dochange('states', -1); // value in first dropdown
</script>


2. Select States and Cities to Show in Dropdown (state.php)

<?
$data=$_GET['data'];
$val=$_GET['val'];
//set database
$dbhost = "localhost";
$dbuser = "";
$dbpass = "";
$dbname = "test";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='states') { // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">";
echo "<option value='0'>==== choose state ====</option>";
$result=mysql_db_query($dbname,"select `id`, `state` from states order by `state`");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>====choose cities ====</option>\n";
$result=mysql_db_query($dbname,"SELECT `id`, `city` FROM cities WHERE `state_id` = '$val' ORDER BY `city` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>


Preview:

Friday, October 24, 2008

Image Transparency - Mouseover Effect

Example 2 - Image Transparency - Mouseover Effect

Mouse over the images:
klematisklematis


The source code looks like this:


<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.


The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.
When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.


Learn More at http://www.w3schools.com