menu

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!

jQuery UI Slider

price-slider 
READ MORE 
DEMO 

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

<script>
$(document).ready(function(){

 var x=parseInt($("#env_amt").val());
 var y1=parseInt(0);
// alert(x);
//----------envolope price-----------
 $(".parax").each(function(){

 var y=parseInt($(this).val());
 //alert(y);
 y1=y1+y;
 });
  var z=(x*y1);
 $("#para1").html(z);

 $(".parax").keyup(function(){
 var m =parseInt(1);
var z1 = parseInt(0);
 var x=parseInt($("#env_amt").val());
 var y1=parseInt(0);

 $(".parax").each(function(){

 var y=parseInt($(this).val());
  y1=y1+y;
  var x1=parseInt($(".qtyprc"+m).val());
 var y2=parseInt($(this).val());
  m++;
   z1 += (x1*y2);
 });

 var z=(x*y1);
 z3 =  z1+z;
 $("#para1").html(z);
  $("#para2").html(z1);
  $("#para3").html(z3);
  $("#amount").val(z3);
 });
//-------------Price calculate------
  var x1;
 var m =parseInt(1);
var z1 = parseInt(0);
 $(".parax").each(function(){
 var x1=parseInt($(".qtyprc"+m).val());
 var y2=parseInt($(this).val());
  m++;
   z1 += (x1*y2);
    z3 =  z1+z;
 //alert(z1);
 });

 $("#para2").html(z1);
  $("#para3").html(z3);
  $("#amount").val(z3);

 /*$(".parax").keyup(function(){
var x1;
 var m =parseInt(1);
var z1 = parseInt(0);
$(".parax").each(function(){
 var x1=parseInt($(".qtyprc"+m).val());
 var y2=parseInt($(this).val());
  m++;
   z1 += (x1*y2);
   z3 =  z1+z;
//alert(z1);
 });
  $("#para2").html(z1);
  $("#para3").html(z3);
 });*/

});
</script>
/* -----------html and php --------*/

<?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>