Home Tutorial Jquery jQuery kwicks plugin

 
 

Share on Google+Share on Google+
jQuery kwicks plugin
Posted on: August 13, 2010 at 12:00 AM
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

Advertisement

Related Tags for jQuery kwicks plugin:


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.

Posted on: August 13, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com