1. Why Peeling Page effect?

The Peeling Page is an effect is used by advertisers to show advertisements. Normally it appears at the top right corner of the page. By this effect advertisement can be shown which would occupy space larger than what is available on a page.

2. Tutorial site to create Peeling Page Effect – jQuery and Mootools

This tutorial will show you how to create Peeling Page effect using jQuery plug-in.

Simple Page Peel Effect with jQuery and CSS by Soh Tanaka

Page Peel Effect with jQuery.pagePeel by Simple Multimedia

This tutorial will show you how to create a cool Peeling Page effect using Mootools.

Page Peel Effect Using MooTools by David Walsh

This tutorial will show you how to create Peeling Page effect using peel.js JavaScript.

Create a Peel Away Effect using JavaScript

3. Additional resource to create Peeling Page Effect in Word press

Creating Page Peel Advertisement in Word press

4. Word press plug-in for Peeling Page Effect in your blog

Page Cornr

download plug-in

Page Peel

download plug-in

Creating Page Peel Advertisement in Word press

download plug-in

How to use?

Insert the jquery and jQuery UI libraries to the header section of html

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>

The HTML Structure is as follows.
In the example there is two vertical columns defined by div with class=”column” that hold our panels. You can increase the number of panels by adjusting the width in the style sheet for .column. Each panel is a div with class=”dragbox”. And the content of each panel resides within div
with class=”dragbox-content”.

	<div class="column" id="column1">
		<div class="dragbox" id="item1" >
			<h2>Handle 1</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Handle 3</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
	</div>
	<div class="column" id="column2" >
		<div class="dragbox" id="item4" >
			<h2>Handle 4</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here-->
			</div>
		</div>
		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >
				<!--Panel Content Here-->
			</div>
		</div>
	</div>

The CSS code

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}
.dragbox h2.collapse{
	background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
	font-size:11px; font-weight:normal;
	margin-right:30px; float:right;
}

The JavaScript Code
This code is to make the boxes dragable and droppable for this we will be using Portables function from jQuery UI library.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
})
.disableSelection();

In this the connectWith lets you move panels across different columns and handle defines the tag which is used to drag the panel. The placeholder parameter is the CSS class to use for the panel placeholder which is displayed when you drag a panel to show the possible position of the dragged panel. forcePlaceholderSize makes sure that placeholder size is equal to the size of the dragged panel and at last opacity sets the opacity of the panel while dragging.
To collapse the content of a panel box when you click on the panel header and show the configure link on panel header on hover, use the below code in jQuery document ready function.

$('.dragbox').each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});

One thing you’ll notice after adding this code is that when you drag the panel, the content of the panel toggles as when you drag the click event of panel header also fires that toggles the state of content. To fix this, you need to add another parameter to storable so that when drag is finished, state of content does not toggle.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        $(ui.item).find('h2').click();
    }
})
.disableSelection();

Here I added another parameter stop that defines the function to use when drag is complete. Once the drag is complete, click event of panel header is fired so that the original state of content is restored.

You can view the demo here
Download the source file from here.

Some sites that explains Drag and Drop

Wil-linssen

Brothercake

Snook.ca

Chris Bolson

How does it work?

Plug-in wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

How to use?

Insert the jquery and filestyle js files to the header section of html

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

The button image used in the code is here.

The java script code for styling the file input is as follows.

$("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
 });

You can view the demo of the plug-in from here
Download the javascript file from here.

The Sticky Footer Layout posted here is from css sticky footer, A List Apart, Cameron Adams and, lwis.net.

Here is the basic structure of HTML code.

You’ll notice how the footer div is outside of the wrap div and header is placed inside the wrap but above the main. If you wanted to place any elements outside wrap or footer then we have to use absolute positioning for particular element else it messes up the 100% height calculations.

Here is the CSS code

we are not done just yet.

We need to add the clearfix properties to the main div to get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and sidebar to the other.

Here is the clearfix code

When coding sites for ASP.net where each page is inside a form tag, make sure to add the form tag to the height:100% statement.

Example 1: The Simplest jQuery Tooltip

The script takes a title attribute of an A tag and place it inside the popup element.
Here is the code :

View demo

Example 2: Image Preview Gallery

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Here is the code :

or if you want to use caption add a title attribute:

View demo

Example 3: Links With URL Preview

This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you’ll need here is a small size screenshot of the target url. You’ll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Here is the code :

again, if you wish to use caption add a title attribute:

View demo

Download all 3 tricks