Friday 7 November 2014

How to read image Using Jquery & Html5

How to read image  using jquery & html5

File reader API is used to read a file from your local hard drive

We can find Atricle  about File reader


DEMO



 HTML PART :

<input id="imageread" type="file" />
<canvas id="img"></canvas>


Jquery Code :

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">  $('input').change(function() {     var readimg = new FileReader;     readimg.onload = function() {         var img = new Image;         img.onload = function() {             var c=document.getElementById("img");             var ctx=c.getContext("2d");             ctx.drawImage(img,0,0,200,180);                 }         img.src = readimg.result;                 };      readimg.readAsDataURL(this.files[0]);    }); </script>

Monday 3 November 2014

Add Extra Field Like Google Plus

Jquery code to add extra field using jquery.




Demo




 HTML PART :

<div class='extdiv'>
<input type="text" class="addmore"  />
</div>



JQUERY CODE :

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>
$(document).on("keyup",".extdiv .addmore",function(){
    var dynamic = $(this).attr("class");
    var countoftext = $("."+dynamic).length;  // count of entered value
    var nextcount = $(this).parent(".extdiv").nextAll(".extdiv").length; // finding next class count
    if(this.value.length >= 1 && nextcount == 0 )  // if length of textbox values greate than or equal to one and nextdiv class count is equal to zero
    {
        $(this).after("<button>remove</button>"); // appending remove button to that field
        var extrabox = "<div class='extdiv'><input type='text' class= 'addmore' /></div>" // creating required field
        $(this).parent(".extdiv").after(extrabox); // appending
    }
    });
    $(document).on("click","button",function(){
    $(this).parent("div").remove();

    });
  

</script>