Another reason to upgrade to Yola Pro. Get a really cool Cross Browser page peel that works with Yola and can be seen in all the major browsers. A Honey Bear Playhomes tip...

  • 2
  • Idea
  • Updated 8 years ago
To get a Cross Browser page peel like the one I have here http://honeybearplayhomes.com you will need to upgrade to Yola Pro where you will be able to upload to your file manager the necessary .js file to make it work on your website. This took a week of me playing around with the code to get it to work flawlessly with Yola and if you do not follow these steps to the letter it will not function properly.

1. Download the following file to your computer (Page peel file)

A) Click on the link above.
B) When you see the code on the page click "File" in the toolbar above.
C) Click "Save page as" and save to your computer.

2. Save all of the following files to your computer.

A) large.png (you must first click on the image then save the image in it's original size on the following page)


B) small.png (you must first click on the image then save the image in it's original size on the following page)


C) large.swf
large.swf

D) small.swf
small.swf

3. Add content to the small.png file to your liking. Only the top right corner (Top left corner to lower right corner) This will be the constant page flap 100px x 100px.

When you add your content to the small box make sure that you place your content off set and not butted up to the right side as you see in the following three examples:







You need to do this only on the small image to ensure that your content is completely visible and not cut off. Several attempts and I am sure you will get one to work perfectly. It still sometimes takes me 3 tries to get it just right.

4. Add content to the large.png box to your liking. Only the top right corner (Top left corner to lower right corner) This will be seen when after the mouse is passed over the corner 500px x 500px and the peel folds down to reveal the larger image.

Alternately, you can use any color background but the small image must be 100x100 pixels and the large image must be 500x500 pixels. If you use a jpg or gif image you need to show this change in the page-peel.js file and edit it accordingly. (I always use png for the image quality).

5. Open page-peel.js in Notepad

6. Change "THE-WEBSITE-YOU-WANT-TO-LINK-TO.com" to the URL you wish the page peel to link to once clicked.

7. Change all four times in the code where you see "YOUR-WEBSITE-URL.com" to the URL of the site that will contain the images and files from above.

<!--

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://THE-WEBSITE-YOU-WANT-TO-LINK-T...;

jaaspeel.small_path = 'http://YOUR-WEBSITE-URL.com/resources...;
jaaspeel.small_image = escape('http://YOUR-WEBSITE-URL.com/resources...;
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://YOUR-WEBSITE-URL.com/resources...;
jaaspeel.big_image = escape('http://YOUR-WEBSITE-URL.com/resources...;
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;

function sizeup987(){
document.getElementById('jcornerBig').style.top = '0px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}

function sizedown987(){
document.getElementById("jcornerSmall").style.top = "0px";
document.getElementById("jcornerBig").style.top = "-1000px";
}

jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/sh...;
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflash...;
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/sh...;
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflash...;
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();

-->

8. Click “File” then “Save”

9. Upload the following files to your file manager of your website:

1) small.swf
2) small.png
3) large.swf
4) large.png
5) page-peel.js

10. Add the following code into an HTML widget on your page

<script src="/resources/page-peel.js" type="text/javascript"></script>

11. Update your site.

Please note: The page peel does not show in your page preview. (Only in the published page) It will show in your sitebuilder as what appears to be an out of place image depending on the HTML widget placement but it will appear in the upper right corner on your published site.

Hope that all was explained well enough for you. ;)

Happy site building
Ed

You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
  • sleepy after all that typing.. ;)

Posted 9 years ago

  • 2
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Awesome tutorial. Thanks!

By the way, make sure you and the other champs read our Valentines Day newsletter coming soon! :) Bit of Yola love coming your way.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hmmm interesting I will look for it...
Photo of AmyP

AmyP

  • 30 Posts
  • 2 Reply Likes
It is very cool that you have taken the time to share your goodies. I can only imagine how long it took you to type it all out. Just wanted to let you know it was appreciated. I used them on my sisters site at http://www.personalpromakeupartist.com and http://www.erniesilvaphotography.com.