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.

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal