WebSite Development

Wednesday 2 April 2014

how to create Cascaded Dropdown with jQuery Ajax and PHP

Posted By: Unknown on 11:28

in this tutorial i have provide that how to create dropdown using jQuery and PHP.a dropdown easy to create in php using jquery.It's provide good idea to filter and show that user what is needed to be displayed. Suppose we have create a dropdown for top business man with his country.so first ask him to select a country.and than second dropdown list he will be see only business man of each country.

so here we will create a simple cascaded dropdown with country, state and each state cities dropdown. here i have created one database with three tables to store country, state, and city information. by clicking

download button to you can get full source code of this tutorial.below given sample code,

PHP Code :



<p style="text-align: justify;">



<div id="dropdowns">




 <div id="center" class="cascade">



 <?php



 $sql = "SELECT * FROM tbl_country ORDER BY country_name";



 $query = mysqli_query($con, $sql);



 ?>



 <label>Country:



 <select name="country" id = "drop1">



 <<span id="IL_AD6" class="IL_AD">option value</span>="">Please Select</option>



 <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>



 <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>



 <?php } ?>



 </select>



 </label>



 </div>



 <div class="cascade" id="state"></div>



 <div id="city" class="cascade"></div>



 </div>



</p>

Now below given jQuery code to create second dropdown for selected country states.



<p style="text-align: justify;">



<script>



$(document).ready(function(){



$("select#drop1").change(function(){



var country_id = $("select#drop1 option:selected").attr('value');



// alert(country_id);



 $("#state").html( "" );



 $("#city").html( "" );



 if (country_id.length > 0 ) {



 $.ajax({



 type: "POST",



 url: "fetch_state.php",



 data: "country_id="+country_id,



 cache: false,



 beforeSend: function () {



 $('#state').html('<img src="loader.gif" alt="" width="24" height="24">');



 },



 success: function(html) {



 $("#state").html( html );



 }



 });



 }



});



});



</script>



</p>

I love to help people in solving their problems.Join this blog to solve your problems.

how to get latitude and longitude from address in php

Posted By: Unknown on 20:57

you can easily find latitude and longitude using address.here i am using Google Maps API to get latitude & longitude using php.just copy below code and run this code to you can easily find latitude or longitude of any address in the world.

HTML Code :

<html>
<head><title>Simple</title></head>
<body>
<br />
    <form name="frm" id="frm" method="post" enctype="multipart/form-data" action="get_lati_longi.php">
        Type Your Location : <input type="text" name="myaddress" />
        <input type="submit" value="get lati longi">
    </form>
<br />

PHP Code :

<?php

if(isset($_POST['myaddress'])){
$myaddress = urlencode($_POST['myaddress']);
$url = "http://maps.googleapis.com/maps/api/geocode/json?address=$myaddress&sensor=false";
$getmap = file_get_contents($url); 
$googlemap = json_decode($getmap);

foreach($googlemap->results as $res){
     $address = $res->geometry;
     $latlng = $address->location;
     $formattedaddress = $res->formatted_address;


}
echo "Latitude: ". $latlng->lat ."<br />". "Longitude:". $latlng->lng; 
}
?>

</body>
</html>

How to create fly to cart / basket effect using jQuery and CSS

Posted By: Unknown on 21:10

in this post i have explained for your shopping cart projects you can add this very beautifull effect to add to cart here i created add produt in the cart with fly effect.this is a basically an animation of jQuery when you click on any item "add to cart" button thats item fly and take place in your cart.it is a not a complate cart it is a just jQuery animation of fly to cart or basket.

How to use :

this is a simple jQuery code.

<script>
    $('.add-to-cart').on('click', function () {
        var cart = $('.shopping-cart');
        var imgtodrag = $(this).parent('.item').find("img").eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
 
            setTimeout(function () {
                cart.effect("shake", {
                    times: 2
                }, 200);
            }, 1500);
 
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });
</script>

CSS code.

<style>
    * {
    margin: 0;
    padding: 0;
}
body {
    background-color: #F2EEE9;
    font: normal 13px/1.5 Georgia, Serif;
    color: #333;
}
.wrapper {
    width: 705px;
    margin: 20px auto;
    padding: 20px;
}
h1 {
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 4px 20px;
    float: left;
}
.clear {
    clear: both;
}
.items {
    display: block;
    margin: 20px 0;
}
.item {
    background-color: #fff;
    float: left;
    margin: 0 10px 10px 0;
    width: 205px;
    padding: 10px;
    height: 290px;
}
.item img {
    display: block;
    margin: auto;
}
h2 {
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
button {
    border: 1px solid #722A1B;
    padding: 4px 14px;
    background-color: #fff;
    color: #722A1B;
    text-transform: uppercase;
    float: right;
    margin: 5px 0;
    font-weight: bold;
    cursor: pointer;
}
span {
    float: right;
}
.shopping-cart {
    display: inline-block;
    background: url("shoping_cart1.png") no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}
</style>

This code create items or product listing with each images.

<div class="wrapper">
     <h1>Easyscript Shopping</h1>
    <span><i class="shopping-cart"></i></span>
 
    <div class="clear"></div>
    <div class="items">
        <div class="item">
            <img src="item1.jpg" alt="item" />
             <h2>Item 1</h2>
 
            <p>Price: <em>$1449</em>
            </p>
            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <div class="item">
            <img src="item2.jpg" alt="item" />
             <h2>Item 2</h2>
 
            <p>Price: <em>$649</em>
            </p>
            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
    </div>
</div>

the above given all tutorial very simple and easy to understand you can see live demo or free to download complete source code of all tutorial.

How to create Google API?

Posted By: Unknown on 21:43

in this tutorial i have explained that how to create Google API. a google api is very useful for web developers. you can use multiple google api and get more usefull information from google related your development area.

there are given below step fllow and create google api.

1. Visit https://console.developers.google.com/

2.Click on Create Project Button.

3.Fill out your Project Details.

4.Click on the Create Button

5.You can see the Activities happening on the bottom of the page.

6.When your project will be created,then click on the APIs and auth Button from the left sidebar

7.Enable the APIs which you needed to get data from google.

8.Click on the Credentials Button from the left sidebar

9.Click on the CREATE NEW CLIENT ID Button.

10.Select Web Application from Application type
Then,Fill out other required information .
Then, Click on the Create Client ID Button.

After Creating new Client ID,You will get your Client ID,Client Secret and Redirect URI.

how to create Redis, chat application in php

Posted By: Unknown on 21:20

many of my blog readers are want to get better chatting system in php.and i have been working with many powerfull technologies like php with node.js etc..a Redis is a open source advanced keyvalue database storage system and it is same as working like NoSQL database. redis operations can be executed on the server side. it is mainly used for cache to create a speed up web application. you can download full source code absolutley free.

here you want first add below extension on php.ini

extension=redis.so

windows

first download redis for click here go to

bin directory then extract redisbin.zip and run the redis-server.exe file.

now add below extension on php.ini

extension php_redis-2.1.3-5.3-ts.dll

Redis Sample Code


<?php

$redis = new Redis();

$redis->connect('127.0.0.1', 6379);

$key="Key_Name"

$redis->set($key, 'Key Value');

echo $redis->get($key);

?>

index.php


<script src="js/jquery.1.9.1.min.js"></script>

<script src="js/jquery.timeago.js"></script>

<script src="js/jquery.livequery.js"></script>

<script src="js/jquery-linkify.min.js" ></script>

<script type="text/javascript">

//HTML encoding. 

function htmlEscape(str) {

return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

}




//Jquery ajax call. 

function ajax_data(typeMethod,url,dataString,success){

$.ajax({

type:typeMethod,

url:url,

data :dataString,

dataType:"json",

cache:false,

timeout:20000,

beforeSend :function(data) { },

success:function(data){

success.call(this, data);

},

error:function(data){

alert("Error In Connecting");

}

});

}




// Appending values in ol#update tag

function Action(json){

$("ol#update").empty();

var b="";

for (var i = 0, len = json.length; i < len; i++)

{ 

var msg=htmlEscape(json[i][2]);

var time=htmlEscape(json[i][1]);

var name=htmlEscape(json[i][0]);         

b='<li><b>'+name+': </b>'+msg+' - <a href="#" class="timeago" title="'+time+'"></a></li>'; 

$("ol#update").prepend(b); 

} 

$(".timeago").timeago();  

}







// Inserting records into chat table

$(document).ready(function()

{

// Text to link 

$("#update li").livequery(function()

{

$(this).linkify({

target: "_blank"

});

});



var user='<?php echo $user_sessions;?>';

// Requesting to chat_get.php every 2 seconds

if(user.length>0)

{

var auto_refresh = setInterval(function ()

{

var dataString = 'user='+ user;

ajax_data("POST","chat_get.php",dataString, function(data) {

Action(data);

});

}, 2000);

}




$('#post').click(function()

{

var content = $("#content").val();

var dataString = 'user='+ user + '&content=' + content;

if(boxval.length > 0)

{

ajax_data("POST","chat.php",dataString, function(data) {

Action(data);

});

$('#content').val('').focus();

}

return false;

});







});

</script>

// HTML Code

<ol id="update" > </ol>

<input type="text" name="content" id="content" autocomplete="off" maxlength="250"/>

<input type="submit" value="Post" id="post" />

redis_config.php


<?php

$key="Key_Name"; // Redis Key Name

$redis = new Redis();

$redis->connect('127.0.0.1',6379);

?>

chat.php


<?php

include 'redis_config.php';

include 'arrayToJSON.php';

if(isset($_POST['content']) && isset($_POST['user']) )

{

if($redis && !empty($_POST['content']) &&  !empty($_POST['user']))

{

$message=$_POST['content']; //Message

$user=$_POST['user']; //Username 

$time=date("c", time()); //Timestamp 

$redis->lpush($key, serialize(array($user,$time, $message)));

}

$data=$redis->LRANGE($key,0,30);

$newData = arrayToJSON($data);

echo $newData;

}

?>

chat_get.php


<?php

include 'redis_config.php';

include 'arrayToJSON.php';

if(isset($_POST['user']))

{

$data=$redis->LRANGE($key,0,30);

$newData = arrayToJSON($data);

echo $newData;

}

?>

it will be return json output like below,


[

["User One","2013-12-30T09:18:37+01:00","Hi"],

["User Two","2013-12-30T08:57:00+01:00","Hello"],

["User One","2013-12-28T18:46:41+01:00","Hi Everyone"],

......

......

]

arrayToJson.php


<?php

function arrayToJSON($arr)

{ 

if(count($arr) > 0)

{  

for($i=0; $i<count($arr); $i++)

{

$data = @unserialize($arr[$i]);

if($data !== false )

{

$arr[$i] = unserialize($arr[$i]); 

} 

}

}

return json_encode($arr);

}

?>

How to create Facebook Style popup with CSS

Posted By: Unknown on 21:29

if you want to display facebook type popup in your website than don't worry in this post i have create a beautiful facebook type popup just using few simple css.just use below code or free download complate example to get facebook type popup.

CSS

.facebook_window
{
background-color:white;
width: 445px;
min-height: 120px;
border: 1px solid #535156;
border-top: 0px;
border-radius:2px;
box-shadow : 0px 0px 0px 10px rgba(115,115,115,0.8);
}
 
.facebook_title
{
font: 14px Verdana;
color: #fff;
background-color: #6d84b4;
border: 1px solid #3b5998;
font-weight: bold;
margin: -1px;
margin-bottom: 0;
padding: 5px 10px;
}
 
.facebook_message
{
width: 425px;
min-height: 30px;
padding: 10px;
margin: 0px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}
 
.facebook_container
{
height: 42px;
line-height: 42px;
width: 100%;
margin: 0px;
margin-top: -1px;
padding: 0px;
background-color: #f2f2f2;
border-top: 1px solid #e6e6e6;
text-align: right;
}
 
.s_btn
{
border: 1px solid #666;
border-top-color: #e7e7e7;
border-left-color: #e7e7e7;
background-color: #f7f7f7;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid gray;
text-align:center;
}
 
.b_btn
{
color:#FFFFFF;
background-color:#5c75a9;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}
 
.g_btn
{
background-color:#68a64c;
color:#ffffff;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}

HTML

<div class="facebook_window">
<div class="facebook_title">Subscribe Easyscript4u.com</div>
<div class="facebook_message">
if you want to display <a href="http://www.easyscript4u.com">facebook</a> type popup in your website than don't worry in this post i have create a beautiful
facebook type popup just using few simple css.just use below code or free download complate example to get facebook
type popup.
</div>
 
<div class="facebook_container">
<input type="button" value="CSS" class="g_btn">&nbsp;
<input type="button" value="Friends" class="b_btn">&nbsp;
<input type="button" class='s_btn' value="Cancel">
&nbsp;
</div>

How to create Facebook badge using jQuery & CSS

Posted By: Unknown on 21:06

Facebook is world's largest social networking website and it will give you many widgets for your website.Today in this post i have explained that how to create facebook badge on your website using jQuery and css.you can create here same as facebook header with like count,Like Button,Display icture and Cover image.here follow just fea step to create facebook widget.

1. Include jQuery files

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="http://demo.phpgang.com/facebook-badge-using-jquery-and-css/jquery.faceBadge.js"></script>
<link rel="stylesheet" href="http://demo.phpgang.com/facebook-badge-using-jquery-and-css/faceBadge.css">

2. Call jQuery function of faceBadge

<script type="text/javascript">
    $(document).ready(function() {
        $(".test").faceBadge({
        pageId: "9H9Gang", // Your Facebook page name or id
        loaderText: "Creating badge...", // message to show when loading page
        width: 350,  // width of your badge
        coverHeight: 120, // height of cover image
        showDesc: false,  // show your page description 
        linkToPage: true // enable / disable like button
    });
});
</script>

<div class="test"></div>

you can add multiple badges on a single web page.
below Demo and Download the complete source code free available.

WebSite Development

Wednesday 2 April 2014

how to create Cascaded Dropdown with jQuery Ajax and PHP

Thursday 20 March 2014

how to get latitude and longitude from address in php

Wednesday 19 March 2014

How to create fly to cart / basket effect using jQuery and CSS

Monday 17 March 2014

How to create Google API?

Saturday 15 March 2014

how to create Redis, chat application in php

Friday 14 March 2014

How to create Facebook Style popup with CSS

How to create Facebook badge using jQuery & CSS

Categories

Followers

Popular Posts

About Easyscript4u