jQuery kwicks plugin
Posted on: August 13, 2010 at 12:00 AM
Posted on: August 13, 2010 at 12:00 AM
jQuery kwicks plug-in
In this section, you will learn how to implement 'kwicks' plug-in in your html page. In this example , a title is given , when you hover on it, it will display text along with every letter.
kwicks.html
| <html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en" dir="ltr"> <head> <title>Kwicks Example</title> <link rel="stylesheet" type="text/css" href="kwicks/kwicks.css" /> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="kwicks/jquery.easing.1.3.js" type="text/javascript"> </script> <script src="kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"> </script> <script type="text/javascript"> $().ready(function() { $('#example .kwicks').kwicks({ max: 200, duration: 400, sticky: true }); }); </script> </head> <body> <h1>jQuery Kwicks Examples</h1> <div id="example"> <ul class="kwicks"> <li> <div class="kwicks_inner_inner"> <div class="bigLetter">I</div> <div class="smallLetters">Incredible Culture</div> </div> </li> <li> <div class="kwicks_inner"> <div class="bigLetter">N</div> <div class="smallLetters">National integration</div> </div> </li> <li> <div class="kwicks_inner"> <div class="bigLetter">D</div> <div class="smallLetters">Dynamic Peoples</div> </div> </li> <li> <div class="kwicks_inner"> <div class="bigLetter">I</div> <div class="smallLetters">Intelligent workers</div> </div> </li> <li> <div class="kwicks_inner"> <div class="bigLetter">A</div> <div class="smallLetters">Adorable places</div> </div> </li> </ul> </div> <div style="clear:both;"></div> </body> </html> |
OUTPUT
When application starts :
When you hover mouse on "N" , it will display :
Similarly , when you hover mouse on any letter it will display a message along side it'
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
