Open Thinkering

Menu

Page Peel Script

Posted on by Doug Belshaw

Peel

Please note that this script is NOT my own work! As I have stated below, I am simply making it available here in case it is taken down elsewhere. I have no idea on how to modify it. Sorry.

If you’re reading this on the blog rather than via the RSS feed, you’ll probably have already noticed the new addition in the top right-hand corner. The way in which the page ‘peels back’ to reveal a link to my educational consultancy business was inspired by a number of sites I’ve seen recently who use it for advertising. It’s remarkably easy to accomplish. Here’s how… 😀

After a few initial searches I thought I was going to have to stump up $8 for the script. Not so. I came across this post which offered the script for free download. I’m providing it in the more compatible ZIP format below in case it becomes unavailable elsewhere.

Zip Peel.zip

The README file explains all, but it’s a very simple process:

  1. Extract the ZIP file.
  2. Edit the small.jpg file to your liking.
  3. Edit the large.jpg file to your liking.
  4. Open peel.js in a text editor such as Notepad or TextEdit.
  5. Search for, and replace http://www.dougbelshaw.com with the name of the site to which you want the advert to point.
  6. Upload the peel folder to the root directory of your website.
  7. Add the following between the <head> and </head> just after the <body> tag in the HTML of your homepage:
<script src="peel/peel.js" type="text/javascript"></script>

You should then see something similar to what I’ve got on this site. Let me know if and when you do something similar! 🙂

Related Posts:

83 thoughts on “Page Peel Script”

  2. @Richard: It looks great on your site – well done! 🙂

    @Andrew: I really don’t want it to say ‘andragogically-sound educational technology solutions’ for 2 reasons:

    As far as I understand it, ‘andragogy’ is the art and science of adult learning. Whilst I understand that I will be training teachers, I’m more focused on the learner at the end of the chain, as it were.
    The vast majority of people won’t understand what it means and therefore no-one will require my services!

    Reply

    1. Thanks for your help Jeff
      My ‘spekking’ is correct for the URL. I added the forward slash but with no luck.
      Will keep fiddling with it and let you know if (and when) I come up with the answer.

      Reply

  3. I would suggest that the definition of andragogy is changing. Basically, as I've said a couple of times I think your whole ethos is much more appropriately described using the term.

    Andragogy is now coming to mean the art and science of learning, whereas pedagogy is the art and science of teaching. Whilst you may indeed be training teachers, the whole idea is to encourage everyone to become effective learners. The fact you are more focused on the learner at the end of the chain is my exact point why it is best to avoid the word pedagogy.

    Technology should be encouraging us all to break away from the pedagogical relationship of the past 130 or so years. Anyway – it doesn't really matter – but do have a look at some of the links I've pushed your way – especially conference notes by Steve Molyneux – http://www.google.co.uk/search?q=steve+molyneux+a…

    Plus, I haven't even mentioned heutagogy yet.

    Reply

  4. Not wishing to get involved in the beard stroking comments of above – but to instead talk 'geek' – Have you got this script to work in IE? Firefox: fine, Safari: no problems – but IE: no!

    Reply

  5. Nothing works on IE, does it? I've just fired it up at school and the background to this site doesn't work and it says there's an error on the page.

    I'm tempted to use Explorer Destroyer, even if Google Adsense isn't paying the $1 referrals any more… ;-)

    Reply

  6. Greetings …

    I wonder if you've come across this or not but … the script works great in Firefox but not at all in IE7 !

    I've checked the other link which Richard Allaway published in his reply, and that's the same … works in Firefox OK but not in IE7.

    Strange !!

    Reply

    1. Great script. I got it to appear after moving it into the as suggested by Jeff. Only problem is that it won’t go to chosen URL when clicked. I would also prefer that to go to a so that I don’t lose them from the current site. Any ideas, anybody?

      Reply

      1. Oops. Certain words omitted because they showed up as code. Should read:
        Great script. I got it to appear after moving it into the body as suggested by Jeff. Only problem is that it won’t go to chosen URL when clicked. I would also prefer that to go to a new blank page (target=_blank) so that I don’t lose them from the current site. Any ideas, anybody?

        Reply

        1. Well Doug, After spending a little time looking into this, the error is a very elementary one relating to the item number 7 above … “7. Add the following between the and sections in the HTML of your homepage:

          ”

          It does NOT go where you indicate it should … change the location and it works, OK!

          Reply

  9. Any clue on how to get it to point to the chosen URL when clicked. Went back to your original and that will not open to your site either. Perhaps that is an IE7 problem

    Reply

    1. Hi Richard,

      There is only one slight alteration that you may wish to make to the peel.js file which may help … where it reads :

      jaaspeel.ad_url = escape(‘http://www.dougbelshaw.com’);
      try altering this to :
      jaaspeel.ad_url = escape(‘http://www.********.***/’); where the asterisk are your web address of choice … just try adding the forward slash … this sometimes helps resolve web addresses where there is no index.html file present in the root directory or where the directory is protected by the use of passwords using htaccess and htpasswd files.

      Other than that, the script file is a definite working model !
      Without wishing to insult you … have you checked your spekking of the web address and the punctuation … maybe a comma in there instead of a full stop ????

      Hope this helps.

      JD

      Reply

  10. Greetings … first off, apologies for the spekking of 'spelling' lol … we are all human after all lol

    … and as an after thought for Richard … if all else fails, then check your settings for the flash player which is installed in your browser extensions … it could well be that you have it set so that it does NOT connect with the web page you are trying to access ?!

    Just a thought ! Hope it helps ;-)

    Jeff

    Reply

    1. This looks good Doug – especially as it works on multiple browsers.

      However, it reminds me that you’ve never properly responded to my attempts to get you to appreciate that you don’t really mean ‘pedagogically-sound technology solutions’. You really do (honest) mean ‘andragogically-sound technology solutions’.

      This is – I believe – a far more appropriate description of how ICT tools can support student-centred learning. Such a description would also generate further discussion that I would be delighted to assist with!

      Anyway, completely off blog topic – apologies.

      Reply

  11. Hi,
    Well in that case it must be your settings in the flash player that the browser is using … u need to check the settings and allow access. That’s all it can possibly be.

    Reply

    1. Hi all,
      is there someone that can help me in removing the link? I don't wanna to have no link on the peel.. is it possible? i hope so.. and i dont know what to try else :(

      Reply

  12. Hi Francesca …

    All you need to do is to edit the peel.js file.

    Open the file using either Microsoft Wordpad or Notepad … (you can find these usually in the programs list …

    Start > All Programs > Accessories … then choose either Wordpad or Notepad

    Scroll down to the second line which reads as follows :

    jaaspeel.ad_url = escape(‘http://www.dougbelshaw.com’);

    then edit the line to read as follows :

    // jaaspeel.ad_url = escape(‘http://www.dougbelshaw.com’);

    Anything in the .js file which is preceded by a “//” is ignored for the purposes of the script. Therefore, putting “//” in front of the second line causes the script to skip past that line without executing it … end result … no link to another page etc.

    Hope this helps ?!

    JD

    Reply

  14. Anyone know how to play video when revealed? I have a small flash movie that i would like to use instead. I tried changing the large.jpg to video.swf but had no luck:

    jaaspeel.small_path = ‘/peel/small.swf’;
    jaaspeel.small_image = escape(‘/peel/small.jpg’);
    jaaspeel.small_width = ‘100’;
    jaaspeel.small_height = ‘100’;
    jaaspeel.small_params = ‘ico=’ + jaaspeel.small_image;

    jaaspeel.big_path = ‘/peel/large.swf’;
    jaaspeel.big_image = escape(‘/peel/movie.swf’);
    jaaspeel.big_width = ‘650’;
    jaaspeel.big_height = ‘650’;
    jaaspeel.big_params = ‘big=’ + jaaspeel.big_image + ‘&ad_url=’ + jaaspeel.ad_url;

    Reply

    1. Using frames is a bit old-school: in the long-term you might want to consider using CSS for your layouts. 🙂

      In the short-term, you need to tell the script to load the link either in a whole new blank page, load the link in a particular frame, or to get rid of the frames and load the link without any frames on the page.

      The following tags within the link might help:

      * “_blank”–Loads the link into a new blank window.
      * “_parent”–Loads the link into the immediate parent of the document the link is in.
      * “_self”–Loads the link into the same window. (default)
      * “_top”–Loads the link into the full body of the current window.

      Check out this resource for more help! 😀

      Reply

  15. Neil,
    It's not quite that simple I'm afraid :-(
    The 'control function/s' for the script are the big.swf and small.swf files which actually use the big.jpg and small.jpg images.
    Simply changing the big.jpg file for your .swf file will have no action other than to not display the big.jpg image.
    In essence, to achieve what you want to do requires some 're-engineering' of the original big.swf file … and that will be no small task.
    There is an alternative format for this script which involves the same functionality but has a multi-page rotator which simply means that instead of revealing the same ad/image every time (big.jpg), you have a number of different image files (i.e. big1.jpg, big2.jpg, big3.jpg etc. etc.) which the script will rotate through each time the script is activated. It's a little more complex to set up, but is very effective if u have a number of different things you'd like to 'advertise'.
    Hope this helps ?!

    Reply

  16. Neil,

    The flash files are there in the script package.

    If you download the script (from the above link) then unpack it, you’ll find you have the following :

    A folder called ‘peel’ … and inside the folder should be 7 files …
    index.html
    peel.js
    README.txt
    small.jpg
    large.jpg
    small.swf
    large.swf

    It is these last two .swf files (flash movie files) which control the visual ‘nuts and bolts’ of the script. The peel.js file is the control function which the index.html file uses to implement the script.

    However, before you can work on the swf files you will need to convert them to working Flash files (.fla) so you’ll need a copy of ‘Sothink SWF Decompiler’ (or similar) to decompile the swf movie back into the original flash (.fla) file which you can then work on in Flash 8 Pro or similar.

    Unless you absolutely understand how to work with Flash files … and I do mean ABSOLUTELY ! … then you are going to be on a hiding to nothing ! Working in FLash is NOT recommended for beginners … well, not this sort of stuff anyway … even Flash ‘nurds’ have trouble with some of this stuff !

    Anyway … assuming that you can rewrite the flash file to do what you want, you will then have to save the .fla file back as a flash movie (.swf) to replace the original in the script package.

    All I can say is, GOOD LUCK buddy … and let me know if u succeed !?!?

    Reply

  17. Neil,
    Perhaps the easiest and quickest way round this is to put up a web page into which you have embedded you flash movie (use Dreamweaver or similar for a quick and easy result) then simply change the large.jpg file for some sort of ‘redirection graphic’ which simply says, ‘Click Here’ (or similar) and change the link to point to your web page which has the flash movie embedded into it.
    It may not be an elegant or perfect solution but it’s a quick and much easier fix than trying to fiddle around with the Flash files ! Hope this helps.

    Reply

  18. I have a little knowledge of flash, but when it comes to complex ActionScript i get a little lost!

    Never tried Sothink SWF Decompiler so I’ll have a look for it now.

    Thanks for your help.

    Neil

    Reply

  19. Hi Neil,
    Can’t help you there, bud, sorry !
    Flash just ain’t my ‘thing’ ! … I only tinker, at best LOL … like they say, a little bit of knowledge can be a dangerous thing.
    I’ve spent may hours chatting with others about this script … and I have yet to find anyone who actually can explain to me the nuts and bolts of it, let alone how to successfully manipulate it.
    If you want to continue this in depth, perhaps MSN Messenger might be better … u can always find me using [email protected]

    Reply

    1. Ok, tried Sothink SWF Decompiler and something happens to the file. When you export it (even if you don’t change anything) and view the web page its no longer got the reflection. Its transparent! Its really odd because non of the code/ actionscript has changed.

      The bit i need to change is:

      {
      getURL(_root.ad_url, “_blank”);
      };

      to:

      {
      getURL(_root.ad_url, “_self”);
      };

      Reply

  20. The script is excellent.We are trying to implement it.But the problem is,my home page is divided into different frames which are loaded with different pages.To get this effect in the home page ,i included this script in one of the pages.Now on clicking on the link(url specified in the script),the target page gets loaded only in that particular frame which is not wat is desired.Any way out??I mean i want the target page be loaded entirely…hope u all get wat i require and suggest a way out…thanks in advance

    Reply

    1. Yes it does, but I mean on links on red line “Prijavi me”=Login, “Registracija”=Register, actualy all links beneath large.swf

      Reply

    2. Hello I was wondering if anyone else was having trouble with this script. I have made the changes necessary to peel.js and have uploaded everything thats needed. Now I’m only seeing the script inside Firefox only. In Firefox when I go to click on the AD the effect disappears and nothing happens.

      Is anyone else having this problem?

      Thanks!

      Reply
  22. Pingback: geographyalltheway.com Updates » Blog Archive » Page Peel Removed … for a while

  23. I am testing out using the peel script but have a question. I have various web ads on the page, some of which are done in Flash. When testing the peel down, I have noticed that the peel down goes behind the flash ads rather than peel down over them. Non-Flash ads work like a charm and the peel down goes over them.

    Is this normal behavior for a peel down script?

    Reply

    1. Can somebody tell me how to fix it to get it working with IE? It works perfectly with Firefox, but IE.. 🙁
      Please mail me the solution to fix this..

      Thanks you,

      Roy

      Reply

  24. Hello I had just posted up a comment regarding the script not working for me. Well I got it to work but the problem that I’m seeing is getting it to work in IE7.

    Has anyone got this to work in both browsers?

    Thanks in advanced!

    Reply

  28. I actually bought the script from
    the main website and I am trying to figure out how to make the link open in the _self page as well. Any help from anyone on this?

    Also I found the peel to be a bit small at 100×100 so I increaseed it to 200×200 and made a new image at that size however the text that is written on the image is not visible for some reason.

    can anyone help?

    Thanks
    Leon

    Reply

  31. Love the script! Works great in IE and Firefox. We are going to use this to market new items on our website, and we would like it to not open an new window when it is clicked. How can I do that?

    Thank you!

    Reply

  32. Great script! Any way to get rid of the scroll bar that appears when you view at 1024×768? I've tried adjusting the height and width options to 641 and 641 but that just distorts the image :(

    Reply

  33. thanks…
    good one…
    can anyone say why none of the java script works with dropdownlist… ddl is not sent to back… its showed aboke the peel effect….

    Reply

  34. All,

    I saw a reply on getting this great feature to work with IE but didn't quite understand it. Can some please help me to get this to work with IE.

    Reply

  35. I have another question. In Safari, the peel works as I would like with the correct small and large images. In Firefox, the small and large images are not what they should be. I am not even sure where they are coming from. The feature works but the images are not mine.

    Reply

  36. Please disregard my above two questions. I have since figured them out.

    As another question, I would love to have this feature on the left side of the screen too. It would be nice to be able to simple peel the web pages back and forth. Does anyone know if the peel feature has been created to work on the left side of the page as well??

    Thanks!

    Reply

  38. I feel like an idiot, but I have a question and any help would be great.

    I build my sites using cs3 dreamweaver. I build layouts in photoshop, then I slice them up and export all the images files and html file to a new folder which I then load into dreamweaver.

    In dreamweaver, my site structure is pretty simpple, I have a simple index file with an images folder. I created a new folder called peel and put all the files into it.

    I then made the appropriate substitutions but despite this, I don’t think I’m putting the script in the right place, nor do I think I’m doing this properly, I can’t get it to work.

    Please help!!

    Where in the html should I put this? On a new line?

    Reply

    1. Marko:

      Well what I was doing wrong was have the call for the script within the tages. What I did was place that within the body tag of the page that you would like that effect to take place.

      <!–
      –>

      Hope this helps.

      Reply

  39. can you tell me how i can change the location of the peel? i want to bring it down and the left little more. right now its peeling on my page blank white space instead i want it to come down more.

    Reply

  40. using the script in two pages (HOME & PROMUOVI APS) regularly working even with flash and absolute urls in the .js
    The only thing is that it opens the new page in a blank one and i really can't find how to tell the script to open new page in _self or framename…

    Reply

  45. Hello Doug,

    I’m also using this same page peel. However, we are now experiencing a problem where the ear won’t close and being asked to add functionality for the end-user to do so.

    Since this example doesn’t the FLA, do you know of a way to modify the file in order to change the mouseOver to onClick?

    Your help is appreciated!!!

    bMills

    Reply

  46. hi people,

    i was trying this fabulous peel on my site, but it never worked. Does someone know if the reason is because in the html there is a huge swf?
    help please..

    Reply

  47. uahoo

    so stupid errors… i didn’t upload the small swf :S
    Thanx a lot for such a great and easy to apply script!! we love u doug 🙂

    Reply

  49. Excellent work, Ive been using this on a couple of my sites, it worked great for a while, at first it hated my CSS and screwed the padding on my content wrapper.

    I found tha tif the script was in certed within the 2nd div, it worked correctly for about 2weeks, then randomly after a flash update, it no longer displays in browser other than IE, and this is IE8 too! its so strange i'm about ready to give up on it. Anyone else had the same thing?
    http://www.seomysite.co.uk

    However….

    Reply

  51. I have installed this script and it works fine, but the graphics are not showing up. I edited the graphics with some generic artwork, and kept both the sizes the same as the original, but still no luck.

    Any suggestions would be appreciated.

    BTW. Thanks for the script. Awesome work.

    Reply

  52. Thanks Doug

    Killer feature. I am kicking myself for not searching for it sooner.

    I as well am having issues with it not working with IE or Opera. Firefox it works great.

    I wonder as I use the free site builder synthasite.com and can only insert code into the HTML widgets they provide is there some workaround in getting it to be cross browser compatible using these widgets? Has anyone tried it using the synthasite builder?

    I would love to have it work in all three…

    Thanks again
    Ed

    Reply

  53. Hey,

    i used ur script and it worked for me for a few months, but recently i vistited my website and the page peel doesnt work anymore. could u please advise me on what i could do to make this better.

    thanks

    Reply

  54. Hey,i used ur script and it worked for me for a few months, but recently i vistited my website and the page peel doesnt work anymore. could u please advise me on what i could do to make this better. thanks

    Reply

  59. This is a great script, cheers! Is there anyway to have the target for the link not open in a new window? I’m assuming this is set in the swf, so not something that I can change without the fla.

    Reply

  60. Can you provide a version of the swf’s where the link target is parent not new? I’d really like to use this to direct people to a certain page on my site.

    Reply

  62. You may want to check this out http://www.FreePagePeel.com

    It’s basically what you have hear, but it will automatically configure all the javascript for you and generate a simple zip file of all the files you need to get the Page Peel working

    Reply

  63. I am using peel script but its causing animated gifs on my site on internet explorer to freeze, does anyone know how to fix it?

    Thanks

    Reply

Leave a Reply to Doug Belshaw Cancel reply

Your email address will not be published. Required fields are marked *

css.php