Advanced Web Tutorial

Wednesday, 20 November 2013

Sliders or Range Selecter and Mobile Price Sliders jQuery

This post is a list of jQuery Mobile Price Sliders. These plugins can be used for numbers, prices or anything that requires a range of selection. Mobile slides provide the mobile user with an easy way to select values simply by sliding any touch device by finger and the current value is displayed in the box. Our favourite is #2 as it allows for easy creation, min/max set and themes. Enjoy!

Monday, 18 November 2013

How to take a screenshot of the current screen of web page and save it as a png image through php

// an example html page
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="./javascripts/html2canvas.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#screenshot').on('click', function(e){
                e.preventDefault();
                html2canvas($('body'), {
                    onrendered: function(canvas){
                        var imgString = canvas.toDataURL();
                        window.open(imgString);
                        $.ajax({
                            url: '',
                            type: 'POST',
                            data: {
                                file: imgString
                            },
                            success: function(response){
                                //alert('Everything works fine.');
                            },
                            error: function(response){
                                //alert('Server response error.');
                            }
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>

<div style="width: 800px; margin: auto;">
    <input type="button" id="screenshot" value="Screenshot!"/>
    <div style="height: 100px;border: 1px solid #D8D8D8;">
        Big header!
    </div>
    <div style="height: 500px;border: 1px solid #D8D8D8;">
        Medium Content
    </div>
</div>

</body>
</html>



// Your php side script
<?php
if($_POST['file'] != "") {
    header('Content-Type: application/json');
    $file = base64_decode(str_replace('data:image/png;base64,','',$_POST['file']));
    $im = imageCreateFromString($file);
    if($im){
        $save = imagepng($im, '/path/to/the/new/file.png');
        echo json_encode(array('file' => true));
    }
    else {
        echo json_encode(array('error' => 'Could not parse image string.'));
    }
    exit();
}

?>

Read More

Thursday, 7 November 2013

how to get java script variable in php variable

First way =>
-------------------------------
<script>
var x = document.write(""<?php echo $b; ?>) ;
alert(x);
</script>

--------------------------------------
Second way =>
--------------------------------------
<script>
var id = jQuery(this).attr("id");
        var comment = jQuery("#"+id).val();
        var dataString = "comment="+comment+"&user_id=<?=base64_encode(json_encode($_SESSION['user_id']))?>"+"&ans_id="+id;
jQuery.ajax({
                type: "POST",
                url: "page/xyz.php",
                data: dataString,
                beforeSend:function(){
                  jQuery('#loader_pic').css("display","block");
                },
                success: function(data){
                    //alert(data);
                    jQuery('#loader_pic').css("display","none");
                    jQuery("#show_more_comment_"+id).append(data);
                    jQuery("#"+id).val('');
                },
                error:function(data){
                    jQuery('#loader_pic').css("display","none");
                    alert(data);

                }
            });
</script>
<a href="" onclick="abc(12)" />

Friday, 1 November 2013

how to calculate price on change of item value

<?php

$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='His'){
// echo $itemindex.'.';?> <li class="box">
<?php if(isset($item)) { ?>
<span><img src="<?php echo $item["imgsrc"];?>"></span>
<?php } ?><input type="text" name="qtyItem<?php echo $itemindex;?>" class="parax" value="1" size="2" maxlength="3"/>$<input type="hidden" class="qtyprc<?php echo $itemindex;?>" value="<?php echo $item["itmprc"];?>" size="2" maxlength="3" readonly/><span><?php echo $item["itmprc"];?></span></li>
<?php $itemindex++; $totalcost+=$item["itmprc"]; $itemcount++; }}?></ul>

Wednesday, 30 October 2013

save and fetch data through jquery / java script and php without data base using push and pop

//---------------------- SCRIPT PART -----------
<script>
function addondblclick1(addobj)
{
if($('.her1 .box ').size()< 5)
{
itemcounts++;
var cat=$(addobj).attr('cat');

var catname=$(addobj).attr('catname');

var imagename=$(addobj).attr('imagename');

var imagecounter=$(addobj).attr('imagecounter');
var yaddfavtype =$(addobj).attr('addfavtype');
var user_email=$('#user').attr('value');
var sessionid=$('#sessionid').attr('value');
var openedtr=0;
$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

inp=$('#add_to_list_'+ cat + '_' + imagecounter);

$.ajax({
type: "POST",
url: "createpageajax/addtolist.php",
data: {
session_id : sessionid,
email : user_email,
catid : cat,
imgsrc:$(addobj).attr('imagename'),
xcatname:catname,
xaddfavtype:yaddfavtype,
item:inp.val()
}
}).done(function( msg ) {

$('#popup_box_for_progress').fadeOut("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');
// alert(msg);
if(itemcounts < listexpandtrcount)
{
//alert('if');
var rowCount=0;
var Count=0;

openedtr=openedtr+1;
// alert('open'+openedtr);
var count=$('#rowcount').attr('value');
//alert(count);
if(count>=1)
{
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
}
else
{
///////////////--count favlist rows--////////
$('#rowcount').attr('value',openedtr);
}
/*$('#table_item_count_' + itemcounts ).append("<span><img src='"+ $(addobj).attr('src') + "' /></span><h5>" + catname + "-" + inp.val() + "</h5><a href='#' index='" + msg + "'><img src='covers/removeicon.png' /></a>");*/
$('.her1').append("<li class='box'><img src='"+ $(addobj).attr('imagename') + "' /></span>" + "<a href='#' index='" + msg + "'>X</a></li>");
$('.table_listdata a').addClass("fav_list_ul_li_a");

}
else
{
//alert('else');
var rowCount=0;
var Count=0;

openedtr=openedtr+1;
// alert('open'+openedtr);
var count=$('#rowcount').attr('value');
//alert(count);
if(count>=1)
{
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
}
else
{
$('#rowcount').attr('value',openedtr);
}

var table_item='<li class="box"><span><img src="'+ $(addobj).attr('imagename') + '"></span>' + '<a index="'+ msg +'" href="#" class="fav_list_ul_li_a">X</a>';
$( ".her1" ).append(table_item);

$('.her1 a').addClass("fav_list_ul_li_a");

}
inp.val('');

$('.fav_list_ul_li_a').click(function() {

$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

$.ajax({
type: "POST",
url: "createpageajax/removefromlist.php",
data: {
index:jQuery(this).attr('index')
}
}).done(function( msg ){

//alert('dblclc');
//alert("Remove 1");

//alert(msg);

var rows=$('#rowcount').attr('value');
rows=Number(rows)-1;
$('#rowcount').attr('value',rows);

$('#popup_box_for_progress').fadeOut("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');

});
$(this).parent().remove();
//$(this).parent().parent().remove();
//alert('remove');
/*$('.her1 .table_listitem .table_listcounter').each(function(index) {
$(this).html(index+1);
}); */
});
});
}
else
{
alert("You cannot add more than 5 items in her favs");
$('#popup_box_for_max_items').fadeIn("slow");

}
}
</script>
//-------------------- HTML with PHP -------------
<html>
//----in loop----
<span class="her" imagename="<?php echo $fb_music['image']; ?>>" cat="<?php echo $row3['category_id'];?>"
catname="<?php echo $row3['category_name'];?>"
imagecounter="<?php echo $imagecounter;?>" addfavtype="Her" onClick="addondblclick1(this);">+ ADD ITEM</span>
//-------loop end---------------
<div class="right-box">
<p><span class="ch">Choose 10 items</span></p>
<ul class="her">
<li>Her Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<ul class="his">
<li>His Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<ul class="her1">
<li> </li>

<?php $itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='Her'){ ?>
<li class="box">
<?php

if(isset($item))
{
?>
<span><img src="<?php echo $item["imgsrc"];?>"></span>

<a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
<?php

}

?></li>
<?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
<tr class="table_listitem">
<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
<td id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
</tr>
<?php

$itemindex++;
}*/

?>
</ul>
<ul class="his1">
<li> </li>

<?php

$itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='His'){ ?>
<li class="box">
<?php

if(isset($item))
{
?>
<span><img src="<?php echo $item["imgsrc"];?>"></span>

<a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
<?php

}

?></li>
<?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
<tr class="table_listitem">
<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
<td id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
</tr>
<?php

$itemindex++;
}*/

?>
</ul>
</html>
-------------------------------------------------------------------------------------------
<?php
//--------Dvelopeped by- Atul Sharma (R&D)
//include('../config/config.php'); // you can create db connection if you want to save data in database
//----------------
session_start();

$item["catid"]=$_POST["catid"];
$item["imgsrc"]=$_POST["imgsrc"];
$item["item"]=$_POST["item"];
$item["catname"]=$_POST["xcatname"];
$item["addfavtype"]=$_POST["xaddfavtype"];
$email=$_POST["email"];
$sessionid=$_POST["session_id"];
$imgpath=$item["imgsrc"];
$catid=$item["catid"];

$items=array();

$items=$_SESSION["items"];

if(count($items)<=0)
$items=array();

if(count($_SESSION["items"])<=10)
{
$index=array_push($items,$item);

$_SESSION["items"]=$items;

array_pop(array_keys($items));
//print_r($_SESSION);
echo $index;
}
array_slice($_SESSION['items'], 0, 10);

?>

how to fetch value of selected radio button in javascript

By the Loop through those elements to check which is checked. You can try document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. 



You can see this example of how to fetch the value of the checked button from a set of radio buttons with the name "selected".

You can do similar for check box.

<html>
    <head>
        <script type="text/javascript">
          function get_radio_value() {
            var inputs = document.getElementsByName("selected");
            for (var i = 0; i < inputs.length; i++) {
              if (inputs[i].checked) {
                return inputs[i].value;
              }
            }
          }

          function onSubmit() {
            var id = get_radio_value();
            alert("selected input is: " + id);
          }
        </script>
    </head>
    <body>
        <form onsubmit="onSubmit();">
            <input name="selected" value="1" type="radio"/>1<br/>
            <input name="selected" value="2" type="radio"/>2<br/>
            <input name="selected" value="3" type="radio"/>3<br/>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>

Tuesday, 22 October 2013

Thumbnail Image Upload Example jQuery AJAX

We are showing here how to upload images using Ajax and show a thumbnail so I decided to do a quick demo to show you how it can be done. The Script facilitates the process of uploading an image via Ajax and using PHP to create a thumbnail, return the image source and display to the user as a thumbnail of the image uploaded. All without the page reloading. To help you understand how it works I’ve commented on a few of the key parts below.
View Demo
Read More

ajax-image-upload

Thursday, 5 September 2013

how to Post Picture in Facebook Wall with PHP

Posting pictures on Facebook works similar as Posting to Facebook Page Wall, you can post not just photos, but questions, status, notes etc in a similar way. In previous post we have seen how we can post a photo to page wall by specifying its relative path, but in this tutorial we will upload picture and directly post to user profile page using an upload form.

I have created 3 PHP files in similar manner as before, index.php, config.phpand process.php. Index.php contains an image upload field and message box. Once user clicks on upload photo, the data is sent to process.php and if everything seems ok, the uploaded picture will appear in users’ profile wall.