Share on Google+Share on Google+

jQuery kwicks plugin

Advertisement
In this section, you will learn how to implement 'kwicks' plug-in in your html page

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'

Download Source Code

Click here to see demo

Advertisements

Posted on: August 13, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.