jQuery Page Peel 1.2.1 - One step further

Demos

If you haven't seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box!

Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one's set up as 500x500). Also, I've set the bottom padding of this box to 105px so I don't cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.

I guess I should show you a bit of code on how to accomplish this... here it goes.

Adding to Your Website

To add this you'll need jQuery and jQuery.pagePeel.js, then add the following to the head of your document: <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.pagePeel.js"></script>

<script type="text/javascript">

$().ready(function(){
$('pagePeel').pagePeel({}); }

</script>

<body>

<div id="pagePeel"> </div>

The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening '<body>' tag. If you want it added inside a div, place it right after the opening '<div id='yourDiv'>' tag. Be sure that div's position is set to relative in you CSS.

Options

options, options, options... That's the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options.

SET WIDTH / HEIGHT OF SMALL AD
smallWidth: 120
smallHeight: 120
smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located

SET WIDTH / HEIGHT OF INTRO
introWidth: 300
introHeight:300

SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF)
bigWidth: 500
bigHeight: 500
bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located
bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located
bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory

ADD LINK AND TARGET OPTIONS
adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied
adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank')

SET POSITION OF YOUR AD
hPosition: 'right' // can use 'left' or 'right'
vPosition: 'top' // can use 'top' or 'bottom'

CHOOSE WHETHER TO USE FLASH OR NOT
flash: true

note: Only upper-right source .fla's are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name.
WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE
introAnim: false
bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file

note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla.

Other Plugins

Right now I've only got 1 other one, but be assured, the list will grow.

jQuery Link Control: A jQuery plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.

Fixes

jQuery.pagePeel.1.2.1 - Quick fix, when using an intro animation the holder was set to 300x300 and when moused over, the user couldn't access content behind it. Now when the user mouses over the div magically pops back to the default small size until moused over.

In a nutshell, I'm allowing content behind the intro animation to be clicked.