Pagepeel Type Banner Application: Pageear

Pagepeel, or the “magic corner” type banners were invented by Visualsteel.

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”.

Pageear Pagepeel Banner

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









Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum


Smart Floating Banners

Floating a banner or content definitely increases the visibility of them. But have some limitations (which we’ll remove).

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.

JavaScript Floating Smart Banner

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.

   
contents

   

       

       

   

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.

Download JavaScript Floating Banners

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.

Google Trends For Websites And Ad Planner

Google Trends for Websites is a web-based service where you can compare the visitor statistics of websites.

Google Website Trends

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.

Google Adplanner

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

More info can be found at Inside Adwords blog.

Creating A Page Peel Effect With jQuery & CSS

Page Peel effects can be very useful as they create new areas -which are mostly used for banners- on websites.

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.

jQuery Page Peel Effect

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.