Posts

Showing posts with the label Jquery

jQuery Resources | Support and tutorial help

jQuery has a number of Official and Nonofficial websites and Online resources dedicated to it. Where you’ll find information like tutorials, plugins download’s and more. It here will be sharing a few of these website which valuable for jQuery lovers. ·          Jquery.com ·          Jqueryui.com ·          Jquery4u.com ·          Smashingmagazine.com ·          Jqueryplugins ·          Visualjquery.com ·          Jqueryvideo casts ·          marcgrabanski.com ·          digital-web.com forgive me if I have missed out any other useful resources . do comment about any other resources so that I’ll add them to existing resources.
Post a Comment
Read more

Advanced Jquery easing | Demo and Download

Image
Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods. Download  DEMO   <! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div...
Post a Comment
Read more

How to add Jquery easing effects | Jquery tutorial

Image
Lets start with the a little introduction, easing refers to the acceleration and declaration that occurs during the course of an animation to give it a more responsive and natural feel. There are two types of easing methods that the core Jquery library supports, which are Linear and Swing lets us see how to implement this easing methods, but before that lets see a brief description on linear and swing easing methods. Linear easing: Linear easing method accelerates and deacclereates at a constant rate which makes it look fairly boring but it is good to know the linear easing might comin handy. Linear Easing Swing easing: Swing easing method starts off slowly before gaining speed and slows down again towards the end of the animation , which makes it look more natural compared to Linear easing Swing easing             Download Demo <! DOCTYPE HTML> </head> <script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <scri...
Post a Comment
Read more

Selecting elements with Jquery | styling html elements with Jquery

Image
We’ll be looking on how to select a HTML element lets say for instance an <h1> tag and change the background color and the font color when clicking it, let’s get started. To select an element in Jquery we simply pass the element’s name as a string parameter to the $ function (note the $ symbol is the short form for Jquery). Here is how the code will look <! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function() { $('h1').click(function(){ $(this).css('background-color','#F00')//setting a background color $(this).css('color','#fff') // setting font solor });//click function end });//document ready function end </script> <h1>click me and change the Background</h1> <style> h1{ border: 1px solid #999; border-radi...
Post a Comment
Read more