ASP.NET Page Curls using jQuery

Posted by: Suprotim Agarwal , on 5/15/2010, in Category jQuery and ASP.NET
Views: 71972
Abstract: In this short article, I will show you how to use this jQuery plug-in to add curls to your existing ASP.NET pages.
Have you seen pages with a curl in the corner, which on a mouse over, curls further to reveal an image or a page element kept under it? They are also called as ‘Dog Ears’ or ‘Page Peels’.
Although creating them looks like a tedious job, plug-ins like the Sexy Curls jQuery Plugin makes it very simple to add Page Curls to your web pages. In this short article, I will show you how to use this jQuery plug-in to add curls to your existing ASP.NET pages. The same concept can also be applied to an HTML page. Note: Remember not to overuse this feature in your web pages.
[Note: If you are using jQuery with ASP.NET Controls, you may find my EBook 51 Recipes with jQuery and ASP.NET Controls helpful]
As the author Elliott Kember states in his blog, along with the jQuery Library, this plug-in also requires the jQuery UI Resizable module. I am using the jQuery and jQuery UI scripts hosted on Google CDN. However you can always customize your jQuery UI download by selecting only the resizable module from here.
Here’s a screenshot of how the curls look like on a page.
JoinUS
Open an existing ASP.NET website. Download the turn.js, turn.css and fold.png files from here and arrange them in a directory structure, similar to the following:
Curls
The Subscribe.png is the image that will be kept underneath the Page Curl. You can replace it with any other image of your own.
Now write the following code to add a Curl to your page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Curls</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"
    type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/turn.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/turn.css" />
    <style type="text/css">
    div{
        width: 80%;
        text-align:justify;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
        var opts = {
            side: 'right',
            directory: 'imgs',
            startingWidth: 200,
            startingHeight:180,
            autoCurl: true            
        };
        $('#target').fold(opts);
    });
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
      <h1>Join US</h1>
      <br/>
      <asp:Panel ID="Panel1" runat="server">     
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tincidunt sem. Suspendisse a nulla nec tellus commodo porta quis sit amet turpis. Ut condimentum, felis vitae convallis vestibulum, odio urna pharetra tellus, in commodo urna sem ……
       </asp:Panel>
       <asp:Image ID="target" runat="server" ImageUrl="imgs/Subscribe.png" />
    </div>       
</form>
</body>
</html>
As you can see, we have set some options and then passed it to the fold() method. The directory option is the folder where you keep the images that create the Curl effect. The autoCurl option enables curl/uncurl when the mouse is hovered over/out of it. If you set the autoCurl option to false, the user has to manually hold the corners to ‘peel’ it off.
That's it. Run the page and on hovering your mouse over the curl, the ‘peeled’ off Curl will look like this:
JoinUS_1
The code has been tested and works well on the latest browsers.
I hope you liked this short article and I thank you for viewing it. The entire source code of this article can be downloaded over here
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by nitin on Monday, May 17, 2010 7:56 AM
Does it work in IE8??
Comment posted by Suprotim Agarwal on Monday, May 17, 2010 8:41 AM
Nitin: Yes and in most other browsers too!
Comment posted by Nitin on Monday, May 17, 2010 11:20 AM
Suprotim : I tried it in IE8 but it didn't work, however it worked firefox.
Comment posted by SeanJA on Monday, May 17, 2010 12:05 PM
This has nothing to do with ASP.net you know... it works for PHP and plane old html as well... or rails, or django...
Comment posted by dave S on Monday, May 17, 2010 1:59 PM
i've spent a few months just trying to find out the name of this page curl style so i could try to find example on how to use it. So I thank you very much for writing this.
Comment posted by Suprotim Agarwal on Wednesday, May 19, 2010 4:44 AM
Nitin: Is compatibility mode ON?

SeanJA: Yes and that is why in the beginning of the article I mentioned "The same concept can also be applied to an HTML page"

Dave: You are welcome!
Comment posted by aisha on Thursday, November 15, 2012 1:19 AM
hai, i had try ur article. But i dnt knw where to place Subscribe.png is the image that will be kept underneath the Page Curl...Please Help me..

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel