Mini website in Banner Ad

[RonJaxon]

Hello everyone. I haven't been here in a while but I've found this forum helpful in the past. So I'm hoping I might find some help or suggestions on a project I'm working on. I'm fairly knowledgeable in HTML and some basic Javascript. But what I'm working on here is a little out of my league but I'm willing to research any suggestions you might have.

Ok, here's the deal. In a forum I'm helping to maintain we offer banner ad space. The forum is for magicians so they place banners images to their websites and/or products. The banner ad size is 190 x 148px. You can see the exact forum I'm talking about here (http://magictalk.com/forum/index.php) (See banner images on right side of that forum).

Now what I'm working on is to not just allow them to place an ad image there. But to actually create a mini website that fits in that small space. Kind of like a widget but this mini website will have a menu. They can browse this menu, ready about their products and even make purchases (The purchase will open in a separate window of course). All without leaving the forum. They can obviously add a "Home page" link to their menu that'll take them to their actual full size site as well.

Now I made a demonstration of what I'm shooting for using some simply HTML and Javascript just to show what I'm trying to do. Click here to see the rough example I made (http://magicjax.com/minisite/).

The plan is to have these with an affiliate program. So if a purchase is made from this "mini website" a commission of the sale will go to the forum. We're a pretty small community so I understand the affiliate situation. But what I'm really looking for is any help of suggestions for the best way to create this mini website.

I was thinking that maybe flash would be the best way to go as far as the design of these mini websites. But I'm not sure if that's wise either.

So would any of you have any suggestions on this project? Thanks for your time.

Ron

[kaafmim]

add this to the header of your page (assuming the :

<style>object {width: 100%;height: 100%;}</style>
<script>
function updateObjectIframe(which) {
document.getElementById('banner_div').innerHTML = '<object id="foo1" name="foo1" type="text/html" data="' + which.href + '"><\/object>';
}
</script>

and add this to the header
then, in the container of that banner put this:

<div id="banner_div">
<object id="foo1" name="foo1" type="text/html" data="http://magicjax.com/minisite/"></object>

This will do what you want.

[RonJaxon]

Thank you.

I added the proper width and height that I need. I put it on a test forum here (http://www.magicjax.com/subtitle/index.php).

Now, how do I put a no scroll in a DIV? Sorry for my lack of knowledge.

I also wonder if it's possible to make it no scroll unless the menu is popped out. In other words I drag mouse over "MENU" and menu opens. If I add more links to this menu the DIV will be able to be scrolled up and down. I can do this now but when they return "home" to the main page in the mini-site the scroller remains there which is what I don't want. I only want it to scroll when the menu is open. Is this possible?

Thanks again for the help.

Ron

[kaafmim]

Add overflow:hidden; to the definition of banner_div.

for example, instead of the previous code, use this:

<div id="banner_div" style="overflow:hidden;">
<object id="foo1" name="foo1" type="text/html" data="http://magicjax.com/minisite/"></object>

But it is better if you use the previous code, and add the overflow property to your css definition. Hope it helps.

[RonJaxon]

Thanks again.

I can't get it to scroll right. I want "no scrolling" and I no matter what I do with a DIV there's a scroller. So I'm just using iframe for now.

A strange thing is happening though. Go to the below link to see what I mean. When the page first loads everything is fine. But if I use the menu then return to the "home" link. The image in it drops down lower.

To see what I mean go to the below link. Use the menu to visit one of the pages in the iFrame. Then use the menu again and click the "home" link. You'll see that the image drops down and the word "E-book download" will be cut in half.

http://magicjax.com/minisite/

Any idea why this is happening?

Ron