Skip to main content

Posts

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe
3 comments
Read more
Recent posts

Juqery Event

(1)Click Event example:- ​<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("p").click(function(){     alert("The paragraph was clicked.");   }); }); </script> </head> <body> <p>Click on this paragraph.</p> </body> </html> (2)Mouseenter  Event Example  :- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("p").mouseenter(function(){     $("p").css("background-color", "yellow");   });   $("p").mouseleave(function(){     $("p").css("background-color", "lightgray");   }); }); </script> </head> <body> <p>Move the mouse po
Post a Comment
Read more

Jquery Method Chaining

jQuery Method Chaining:- Until now we have been writing jQuery statements one at a time (one after the other). However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s). Tip: This way, browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action. The following example chains together the css(), slideUp(), and slideDown() methods. The "para1" element first changes to red, then it slides up, and then it slides down: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#para1").css("color", "red").slideUp(2000).slideDown(2000);   }); }); </script> </head> <body> <p id="
Post a Comment
Read more

jQuery Callback Functions

jQuery Callback Functions:- JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: $(selector).hide(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("p").hide("slow", function(){       alert("The paragraph is now hidden");     });   }); }); </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html>
Post a Comment
Read more

Juqery stop

jQuery stop() Method:- The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).stop(stopAll,goToEnd); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown(5000);   });   $("#stop").click(function(){     $("#panel").stop();   }); }); </script> <style> #panel, #flip {   padding: 5px;   font-size: 18px;   text-align: center;   background-color: #555;   color: white;   border: solid 1px #666;   border-radius: 3px; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <button id="stop">Stop sliding</button&g
Post a Comment
Read more

​jQuery Animations

​jQuery Animations - The animate() Method:- The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); Note:- By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("div").animate({left: '250px'});   }); }); </script> </head> <body> <button>Start Animation</button> <p>Animate example </p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> </html>
Post a Comment
Read more

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.
11 comments
Read more