In general, they are created with the help of Flash but Soh Tanaka is featuring a a very nice tutorial on creating a page peel effect with jQuery & CSS.

The logic of the effect is simple & smart. It is created by animating the size & position of a peel image which is originally positioned over the content to be shown.

To see a demo for this nice tutorial, click here.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Would You Like To Advertise At WebResourcesDepot?
• What You See Is What You Ajax: WaveMaker
• wForms: Easy JavaScript Form Controls

The data displayed is daily unique visitors (after logging in, you can see the numbers that graphs represent) and currently, up to 5 websites can be compared.

Google Ad Planner provides you information about websites by simply entering demographics and sites associated with your target audience. This is a tool to be used when you are planning or searching for websites to advertise.

Ad Planner, currently, can be used by invitation only. You can apply for it here.

More info can be found at Inside Adwords blog.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Would You Like To Advertise At WebResourcesDepot?
• Track Website Activities From Your Desktop With Snoop
• Tips For Faster Websites By Google
• Search-Based Keyword Tool From Google
• Pagepeel Type Banner Application: Pageear

In general, floating banners are used when there is no other content at their column as they are always at the "float" (position:fixed) state.

This is a better & smarter solution that will float the banners when needed, re-position them and can be used in any type of banner – content combinations.

And, best of all, you don’t need to set any fixed heights in the code.

We’ll be using jQuery but these simple functions can easily be ported to other JavaScript frameworks.

Before reading further, here are the examples. Check both example 1 and example 2 and scroll down.

Logic of this smart floating banners:

• Position of element (probably div) holding the banners won’t be mentioned as "fixed" in the beginning.
• We insert an identifier element to understand the exact original position of the end of the contents.
• When a user scrolls, with a JavaScript function, we check if the last part of the content is visible or not.
• If not visible, we set the position of the div holding the banner to fixed.
• If visible we re-set the position to relative (or absolute).
• That’s all.

The HTML:

A standard 2 column webpage.

<div class="mainWrap">
    <div class="leftWrap">contents</div>
    <div class="rightWrap">
        <div class="banner">banner</div>
        <div class="smartBannerIdentifier"></div>
    </div>
</div>

The CSS:

The important part is, we are not setting CSS "fixed" position to the banner.

.mainWrap {
    width: 500px;
    margin: 0 auto;
}
.leftWrap {
    float: left;
    width: 250px;
    background-color: #CCCCCC;
}
.rightWrap {
    float: right;
    width: 250px;
    background-color:#666666;
}
.banner {
    width: 250px;
    background-color: #FF0000;
}

JavaScript:

We have a function which simply:

• Understands if the scrolled amount is bigger than the "smartBannerIdentifier" which defines the end of contents.
• If yes, sets the CSS position of the banner to fixed.
• If no, sets the CSS position of the banner to relative and "top" to the original value using the smartBannerIdentifier’s offset value.

$(document).ready(function(){
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "fixed");
      $("#banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "relative");
      $(".banner").css("top", $(".smartBannerIdentifier").offset);
    }
   });
});

Dependencies:

JavaScript function used requires some objects from jQuery 1.2.6+. For lower jQuery versions, you’ll need the dimensions plugin.

Using this JavaScript floating banners you can:

• Definitely show your banners or content more with a simple non-flickering method.
• Order your contents and banners in any way and it will work.
• Can do some special tricks like adding effects when they begin to float or else.

Script is tested on major browsers at Windows OS. I’m not sure about the compatibility on Mac and others but must be ok as it uses standard jQuery functions. If you live any problems, just share them at the comments.

P.S. Download includes 2 example files.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Image Preloading From CSS With jQuery
• Tooltips Over Images With Tipmage
• Table Sorter Plugin For jQuery: tablesorter
• Slideshow JS: Unobtrusive JavaScript Slideshow
• Skin Your Ajax Applications: ThemeRoller

They create a new banner area for websites without effecting the current banner areas and easy to implement. On the other hand, pagepeel banners have a relatively high "click per view ratio".

Including Pageear to the websites requires the steps below:

- Download Pageear files.
- Unzip the filed in a folder.
- Create to images with sizes 100×100 and 500×500. 100×100 sized image is the one which will be shown when Pageear is closed and 500×500 will be shown when user mouse overs the Pageear banner. You can pageear_b.jpg ve pageear_s.jpg files as an example. BTW, .GIF and .PNG are not supported.
- Open the Pageear.js file wit a text editor and update the paths to the .JPG and .SWF files depending on your setup.
- Include Pageear.js and AC_OETags.js in to the webpages where Pageear banner will be displayed (example below).
- Place the writeObjects() javascript function under your body tag.
- That’s all.

Pageear can also be implemented easily with the ready to use Wordpress plugin, Joomla module or Typo3 extension (download links below).

Html Code Example

<html>
<head>
<title></title>
<script src= " /path_on_your_server/AC_OETags.js " mce_src= " /path_on_your_server/AC_OETags.js " language= " Javascript " ></script>
<script src= " /path_on_your_server/pageear.js " mce_src= " /path_on_your_server/pageear.js " type= " text/Javascript " ></script>
</head>
<body>
<! – Beginning of contents – >
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<! – End of contents->

<script type= " text/Javascript " >
writeObjects ();
</script>

</body>
</html>

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Would You Like To Advertise At WebResourcesDepot?
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Ruby On Rails Social Network Plugin: Community Engine
• Rounded Corners With No Images Using curvyCorners
• Photoshop Icon Plugin