menu

Thursday 19 December 2013

Improve your experience by adding svg graphic editor to your website


This is probably the coolest free add-on you can embed into your website in 120 seconds or less. SVG is a free open source vector graphics editor that is much more powerful than you might first think. You may be surprised that it has layers. You can load graphics in just by clicking and dragging them in. It does not yet allow you edit graphic files you bring in, but you can use these images as objects in your graphic creation. SVG even supports layers. The following instructions will help you learn how to embed this graphics editor into your website in just a couple minutes. I will also show you how you can alternatively download the source and serve it up yourself. In addition, as time permits, additions will be made to this wiki, including a few of the features it will bring to your user's experience when they visit your website.

Embed SVG Graphic Editor using an iframe from the latest stable version via svn
You can embed directly from svn the latest stable release which has the added benefit of always serving the latest version without the need for you to do anything.

<iframe 
  src="http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html"
  width="800" 
  height="700"
/>
Alternatively you can choose to embed a particular release directly from svn. This way you can checkout new versions before releasing them to your website visitors. Once you are comfortable you want to rollout the new version you can simply change the version number to the latest branch.

<iframe 
  src="http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html"
  width="800" 
  height="700"
/>

Thursday 5 December 2013

how to show loader image before loading from ajax data php

<html>
<body>
<script language="javascript">function loaddata(){
datastring = 'favour='+id+'&itemsId='+chkItem;

                        jQuery.ajax({

                        type: "POST",  

                        url: "cuponcode.php",  

                        data: datastring,   
                        beforeSend:function(){

                        jQuery('#overlay_loader').css("display","block"); 

                        },
                        success: function(data){ 

                        jQuery('#overlay_loader').css("display","none");

                        alert('Your coupon code is created successfully for selected items');

                        // jQuery("#fav_itm").html(data);

                        },

                            error:function(data){

                            alert(data);

                            }       

                        });
}
</script>
<style>#overlay_loader {
     display:none;  
    position:fixed; 
    left:0px;       
    top:0px;        
    width:100%;     
    height:100%;    
    /*background:#000; */
    opacity:0.5;    
    z-index:99999;
    background:url("images/loader_icon.gif") no-repeat center center rgba(0,0,0,0.5);
    }
</style>
<div id="overlay_loader"></div>

<button name="send" onClick="loaddata();">Send</button>
</body>
</html>

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>


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>&nbsp;</li>
<!--
<li class="box"></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">
                    <!--<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata">--><?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

}

?><!--</td>
                  </tr>--></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>&nbsp;</li>
<!--<li class="box"></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">
                    <!--<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata">--><?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

}

?><!--</td>
                  </tr>--></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.phpconfig.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.
Read more       Demo

Wednesday 7 August 2013

Create Dynamic Pie Chart in php and mysql

Graphical or visual representation of data is usually a requirement for a software, mostly, business apps. Today I'm going to show you the two and free ways to generate dynamic Pie Charts for your web applications. We say "dynamic" because the data that will be shown in the pie chart were pulled from a database which can be updated frequently. 

You can also create other types of charts such as bar charts, line charts, and many other types of charts, but in this post, we will cover pie charts only which can give you a good idea on how to create dynamic charts.
generate dynamic pie charts code

Monday 5 August 2013

How to block Inappropriate content with javascript validation

Some bad networkers or user write bad words and you have to manually manage these posts then we are making a system where peoples come and give there reviews or accept content from public post . Now with this article you will be able to manage inappropriate words and restrict peoples to write on website.
Its a simple and easy to implement program hope you enjoy it.

Saturday 27 July 2013

jQuery AJAX Chat Script




 
Do you need a jQuery chat on your website like you see on Facebook and Gmail? You're in the right place!
This powerful, ready-to-use AJAX chat is easy to insert and adjust ! Try it now ! Demo is very simple, some features is not inlcuded ! If you want the full version then purchase now !
FEATURES
 
  • - Based on AJAX, PHP and MySQL
  • - Detailed documentation, MySQL sample database and demo is included with full source
  • - Cross browser supported: IE 8+, Chrome 16+, FireFox 8+, Safari 5+, Opera 11+
  • - Commented, clean code, easy to integrate and adjust
  • - It works like in Gmail or Facebook:
    • - Chat with multiple user
    • - Displays if user is typing
    • - Header of chatbox flashing if new message arrived
    • - You hear a sound if new message arrived
    • - Converts string to link if starts with http://
    • - Easy to add smileys (80 emoticons inluded)
    • - If chat window is minimized, it displays if new message arrived
    • - Displays last message's sent time after 2 minutes
    • - Store the place of the chatboxes and his state (opened,minimized, maximized)
    • - Scrolls to bottom on new message
    • - If user close window or navigates away, then user goes offline automatically
    • - Chat partner instantly receives notification if other part goes offline

Embed instant messaging into your Web App!

ChatJS is a full-featured, lightweight, Facebook style jQuery plugin for instant messaging. ChatJS also comes with a server side implementation for ASP.NET/SignalR out of the box.
Download Leave demo chat
... or visit the project at GitHub.

How it works:

The client part is divided in two JavaScript files. The file jquery.chatjs.jscontains the main jQuery plugin $.chat() andjquery.chatjs.signalradapter.js contains the adapter function needed to tell the plug-in how to interact with the server.
Once the server is set up, the client code is quite simple. These are all the options:
$.chat({
    // your user information
    user: {
        Id: 3,
        Name: 'John Silver',
        ProfilePictureUrl: 'http://www.foo.com/avatar/123'
    },
    // text displayed when the other user is typing
    typingText: ' is typing...',
    // the title for the user's list window
    titleText: 'ChatJS demo chat',
    // text displayed when there's no other users in the room
    emptyRoomText: "There's no one around here.",
    // the adapter you are using
    adapter: new SignalRAdapter()
});

Features:

  • Real time message sharing (Oh really?).
  • Automatically parses URLs and emoticons .
  • Automatically remembers opened windows across diferent requests (through cookies).
  • Triggers a sound notification when the user receives a message.
  • Indicates when the other user is typing.
  • Supports multiple chat rooms. If you have a multi-tenancy app you can create a room for each tenancy, for instance.
  • Supports multiple browser windows opened with the same session. They all get properly sinchronized.
  • Customizable texts. You can easily translate it to your language.
  • Both client and server code ready to be used for ASP.NET with SignalR.


Find URLs in Text, Make Links

The basic function of this is to find any URLs in the block of text and turn them into hyperlinks. It will only find URLs if they are properly formatted, meaning they have a http, https, ftp or ftps.
<?php

function autolink($str, $attributes=array()) {
 $attrs = '';
 foreach ($attributes as $attribute => $value) {
  $attrs .= " {$attribute}=\"{$value}\"";
 }

 $str = ' ' . $str;
 $str = preg_replace(
  '`([^"=\'>])((http|https|ftp)://[^\s<]+[^\s<\.)])`i',
  '$1<a href="$2"'.$attrs.'>$2</a>',
  $str
 );
 $str = substr($str, 1);
 
 return $str;
}

?>

Syntaxe

string autolink ( string $str [, array $attributes = array() ] )

Arguments

  1. str - La chaîne d'entrée.
  2. attributes - Optionnel. Si spécifié, ce paramètre doit être un tableau associatif de format $arr['attribute'] = $value.

Valeurs de retour

Retourne une copie de la chaîne str dont les urls ont été encapsulées dans des balises <a>.

Exemples

Exemple #1 Exemple avec autolink()
<?php
$str 'A link : http://example.com/?param=value#anchor.';
$str = autolink($str);
echo $str// A link : <a href="http://example.com/?param=value#anchor">http://example.com/?param=value#anchor</a>.
?>
Exemple #2 Exemple avec autolink()
<?php
$str 'http://example.com/';
$str = autolink($strarray("target"=>"_blank","rel"=>"nofollow"));
echo $str// <a href="http://example.com/" target="_blank" rel="nofollow">http://example.com/</a>
?>