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.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: