jQuery kwicks plugin


 

jQuery kwicks plugin

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

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

Ads