Friday, 7 November 2014

by Shiva

in ,

Comments (0)

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

by Shiva

in ,

Comments (0)

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>

Monday, 21 July 2014

by Shiva

in ,

Comments (1)

Search By click

Another jQuery filter by click event Usage: Here my requirement is i need to search users by using their category(ex: music director and singer) on click
As of now i don't have demo space..
Simply take a copy of this code and paste in a notepad then save as html open in browser and check
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple and Small Jquery Filter</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <ul  style="float:left">   <li>     <div class="name">Devi sri prasad</div>     <div class="ltype">Music director</div>   </li>   <li>     <div class="name">Mani Sharma</div>     <div class="ltype">Music director</div>   </li>   <li>     <div class="name">anoop rubens</div>     <div class="ltype">Music director</div>   </li>   <li>     <div class="name">yesu dasu</div>     <div class="ltype">singer</div>   </li>   <li>     <div class="name">S.P.Balu</div>     <div class="ltype">singer</div>   </li>   <li>     <div class="name">shankar mahadevan</div>     <div class="ltype">singer</div>   </li>   <li>     <div class="name">Shreya Ghoshal</div>     <div class="ltype">singer</div>   </li>   <br> </ul> <div style="float:left"><a href="javascript:void(0);">singer</a> <br> <a href="javascript:void(0);">Music director</a> </div> <script> $(document).on('click','a',function(){ var searchval = $(this).text(); $("ul li .ltype:contains("+searchval+")").parent('li').css("display","block"); $("ul li .ltype:not(:contains("+searchval+"))").parent('li').css("display","none"); }); </script> </body> </html>

by Shiva

in ,

Comments (1)

Simple Jquery text filter


A simple jquery filter  ..!

Usage: Here my requirement is to search users by category (ex: music director and singer).

By using this code we can filter users


Demo



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
      <input type="text" name="search" placeholder="search" id="search" />
 <p id="nodata"></p>
<ul  style="float:left">
  <li>
    <div class="name">Devi sri prasad</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">Mani Sharma</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">anoop rubens</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">yesudasu</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">S.P.Balu</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">shankar mahadevan</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">Shreya Ghoshal</div>
    <div class="ltype">singer</div>
  </li>
  <br>
</ul>
 <script>
  $(document).on('keyup','#search',function(){
  $("#nodata").text('');
 $.extend($.expr[":"], {
  "containsIN": function(elem, i, match, array) {
  return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
  }
 });
  var searchval = $(this).val();
  $("ul li .ltype:containsIN("+searchval+")").parent('li').show();
  $("ul li .ltype:not(:containsIN("+searchval+"))").parent('li').hide();
  var count = $("ul li:visible").length;
  if(count==0)
  {
  $("#nodata").text("No Data Found");
  }

   });
 
</script>

</body>
</html>

Sunday, 20 July 2014

by Shiva

in ,

Comments (3)

Why $(document).ready(function(){});?


Remember the traditional method of calling $(document).ready() ?
<script>
$(document).ready(function(){

// Code Goes Hear
});
</script>

We have to use this function in the head section of our html page. This is because we do not have all our elements instantiated when the page is being compiled.

After loading the complete page,  we do not need to write $(document).ready(function(){ }); at all.


Example 1 :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
    // in head section if we want to run jquery we need to write document ready like below ..
    $(document).ready(function(){
    $("button").click(function(){
    alert("click works");
    });
    });
 //for more conformation copy this code and remove document ready and check
  </script>
</head>
<body>
    <button>click me!</button>
</body>
</html>
 Example 2 :
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
<body>
    <button>click me</button>
 <script>
    // hear the DOM element (button) is ready so no need to write document ready
    $("button").click(function(){
    alert("click works");
    });
  </script>
</body>
</html>