Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Thursday, August 15, 2013

JQuery - Create a Flag by animation using Canvas and Div tag

Please use browser other than IE to see the animation present inside the circle because it is code in canvas tag.
Output :






Happy Independence Day
















      In this article we are going to see how to animate with canvas in Div tag, It is used to draw graphics on the fly. Animate method is used to animate the given element and slide Down is used to slide down the element with timing.Here we are going to do a sample program with the following two elements to animate and draw a flag Canvas, Div and following three methods to do the actions animate, slideDown, SlideUp.





JQuery - Animate using Canvas in Div tag to Draw a Flag - (HTML Source)

Html Source :

<div>

<div id="stick" class="stick"></div>
<div id="br" class="br" style="margin-top: -300;margin-left: 45px;" >
            <div id="sf">
            <div id='sfc'></div>


            </div>
            <br />
            <div id="wh">


<canvas id="c">
<canvas id="s1">
</canvas>
<canvas id="s2">
</canvas>
<canvas id="s3">
</canvas>
<canvas id="s4">
</canvas>
<canvas id="s5">
</canvas>
<canvas id="s6">
</canvas>
<canvas id="s7">
</canvas>
<canvas id="s8">
</canvas>
<canvas id="s9">
</canvas>
<canvas id="s10">
</canvas>
<canvas id="s11">
</canvas>
<canvas id="s12">
</canvas>
<canvas id="s13">
</canvas>
<canvas id="s14">
</canvas>
<canvas id="s15">
</canvas>
<canvas id="s16">
</canvas>
<canvas id="s17">
</canvas>
<canvas id="s18">
</canvas>
<canvas id="s19">
</canvas>
<canvas id="s20">
</canvas>
<canvas id="s21">
</canvas>
<canvas id="s22">
</canvas>
<canvas id="s23">
</canvas>
<canvas id="s24">
</canvas>
<canvas id="s25">
</canvas>
</canvas>
            </div>
                 <br />
            <div id="gr">
              <div id='grc'>

              </div>



            </div>
<div id="bt" class="bt">
 </div>
<br />
<br />
 </div>

<div id="name" class="name">
Happy Independence Day
</div>
</div>







JQuery - Animate using Canvas in Div tag to Draw a Flag

Output :






Happy Independence Day
















      In this article we are going to see how to animate with canvas in Div tag, It is used to draw graphics on the fly. Animate method is used to animate the given element and slide Down is used to slide down the element with timing.Here we are going to do a sample program with the following two elements to animate and draw a flag Canvas, Div and following three methods to do the actions animate, slideDown, SlideUp.





Sunday, July 28, 2013

Add Row Dynamically in Table Using JQuery

Below code is used to add the row dynamically to table using JQuery.

How to find the row in tbody inside the Table using Jquery : 
$(‘#Search_table’).find("tbody").find("tr");

<table id="Search_table">
<thead>
<tr><td>USER ID</td>
<td>USER NAME</td>
<td>CURRENT POINT</td>
<td>ADD POINT</td>
<td>ADD DESCRIPTION</td>
<td>ACTION</td>
</tr>
 </thead>
<tbody> </tbody>
</table>

<script>
$(document).ready(function ()
{      
var table_tr="<tr><td>RajeshG</td><td>Rajesh
</td><td>100</td><td>100</td><td>
point added </td><td>ACTION </td></tr>";

$('#Search_table').find("tbody").append(table_tr);
//to append the tr in the tbody tag                  
});
</script>