Rotating Links and Loading Pages in DIV using jQuery

Sometime back, I had written an article on Load pages in DIV using JQuery.

In this article, we will see how to load multiple pages in the DIV using a Link which rotates and presents a different site to the user on each rotation. This can be a nice UI technique to present a set of pages in your website. I will use the Cycle Plug-in for this purpose. Download the Cycle Plugin.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Rotate Links and Load in DIV</title>
<
style type='text/css'>
.divPage
{
border:Solid 1px;
width:300px;
height:200px;
}

</style>
<
script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</
script>
<
script type="text/javascript"
src="jquery.cycle.all.min.js" >
</
script>

<
script type="text/javascript">
$(document).ready(function() {
$('#Links').hide();
$('#A1').click(function() {
$('#Links').show();
$(this).hide();
$('#Links').cycle('fade');
});
$('#Links a').click(function() {
$("#LoadPage").load(this.href);
return false;
});
});


</script>
</
head>
<
body>
<
div id="LoadPage" class="divPage">
<
a href="#" id="A1">Start</a>
</
div>

<
div id="Links">
<
a href="link1.htm">Link 1</a>
<
a href="link2.htm">Link 2</a>
<
a href="link3.htm">Link 3</a>
</
div>
</
body>
</
html>



You can use the Effects Browser page to preview all the effects that are available with the Cycle Plug-in.

That’s it! Load the page and click on the ‘Start’ link to start the Link Rotation. Clicking on each link will display a new page in the DIV.

You can see a Live Demo over here.






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: