ASP.NET Page Curls using jQuery

Posted by: Suprotim Agarwal , on 5/15/2010, in Category jQuery and ASP.NET
Views: 81518
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.
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:
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="">
<head runat="server">
    <title>Page Curls</title>
    <script src=""
    <script src=""
    <script type="text/javascript" src="Scripts/turn.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/turn.css" />
    <style type="text/css">
        width: 80%;
    <script type="text/javascript">
        $(document).ready(function() {
        var opts = {
            side: 'right',
            directory: 'imgs',
            startingWidth: 200,
            autoCurl: true            
<form id="form1" runat="server">
      <h1>Join US</h1>
      <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:Image ID="target" runat="server" ImageUrl="imgs/Subscribe.png" />
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:
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

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
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 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..