Bel-Technology: September 2013

Java Script calendar tool (jsDatePick)

5:15 AM Bel-technology 0 Comments

Featured content slider for your website

10:57 PM Bel-technology 0 Comments

Jquery to create photo Album like Slider

Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience.

Let’s start with it..

Add JavaScript Files

First of all, grab the jQuery and jQuery UI libraries, if you have already include them in your page header.

1. "http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"

2. "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"

Complete code for Featured content slider:-

<head >

<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>

$(document).ready(function(){

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

});

</script>

</head>

<body>

<h3>» Featured Content Slider Using jQuery</h3>

</ul>

<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>

</div>

<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>

<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>

</div>

<h2><a href="#" >35 Amazing Logo Designs</a></h2>

<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>

</div>

<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>

<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>

</div>

</body>

By this code you will get Photo album like slider. Above code is functional.

If you find any problem in applying this please comment or visit us at www.bel-technology.com.

Populate one Drop-down list from another using Ajax(php)

11:57 PM Bel-technology 0 Comments

Populate one Drop-down list from another using Ajax(php)

By using following code you can populate a drop-down list on selection of item of the other one using Ajax. Both drop-down lists will be dynamic.

Replace database and table names with your database and table.

Apply this code to your index. php

Required javascript Functions

function getXMLHTTP() { //fuction to return the xml http object

var xmlhttp=false;

try{

xmlhttp=new XMLHttpRequest();}

catch(e) {

try{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");}

catch(e){

try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e1){

xmlhttp=false;

}

return xmlhttp;

}

// To populate first dropdown(ex. state dropdown)

function getState(countryId) {

var strURL="findState.php?country="+countryId;

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

document.getElementById('statediv').innerHTML=req.responseText;

} else {

alert("There was a problem while using XMLHTTP:\n" + req.statusText);

}

req.open("GET", strURL, true);

req.send(null);

}

// To populate second dropdown from first(ex. state dropdown)

function getCity(countryId,stateId) {

var strURL="findCity.php?country="+countryId+"&state="+stateId;

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

document.getElementById('citydiv').innerHTML=req.responseText;

} else {

alert("There was a problem while using XMLHTTP:\n" + req.statusText);

}

req.open("GET", strURL, true);

req.send(null);

}

</script>

HTML Design:

<tr>

<td width="150">Country</td>

<option value="">Select Country</option>

<option value="2">Canada</option>

</select></td>

</tr>

<td>State</td>

<option>Select Country First</option>

</select></div></td>

</tr>

<option>Select State First</option>

</select></div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

Create a page findState.php

<? $country=intval($_GET['country']);

$link = mysql_connect('localhost', 'root', ''); //change the configuration in required

if (!$link) {

die('Could not connect: ' . mysql_error());

}

mysql_select_db('db_ajax');

$query="SELECT id,statename FROM state WHERE countryid='$country'";

$result=mysql_query($query);

<select name="state" onchange="getCity(<?=$country?>,this.value)">

<option>Select State</option>

<? while($row=mysql_fetch_array($result)) { ?>

<? } ?>

</select>

Create another page find City.php

<? $countryId=intval($_GET['country']);

$stateId=intval($_GET['state']);

$link = mysql_connect('localhost', 'root', ''); //change the configuration in required

if (!$link) {

die('Could not connect: ' . mysql_error());

}

mysql_select_db('db_ajax');

$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";

$result=mysql_query($query);

<option>Select City</option>

<? while($row=mysql_fetch_array($result)) { ?>

<? } ?>

</select>

By this code you will get filled State drop-down list on page load and city will populate on change of state. Above code is functional.

If you find any problem in applying this , please comment or write us at www.bel-technology.com .

Newer Posts

Bel-Technology

Translate

About Us

Click here to know what we do

Popular Posts

Labels

Pages

Java Script calendar tool (jsDatePick)

Featured content slider for your website

Populate one Drop-down list from another using Ajax(php)

Advertisement

Join the Tech Hunters

recent posts

Our Logo

Like us on Facebook

Blog Archive