Expandable Banners Options

[filipe]

I found a good and simple cross-browser solution for this that may be useful for some of the many people who experience problems with expandable banners. It doesn't require any code into the flash banner or by the OpenX operator, who may know nothing of programming languages.

Here it goes:

A simple solution is to create a DIV (id="theDiv") surrounding the banner and putting a javascript code to be delivered together with the expandable banner (OpenX > "Expandable Banner" > Advanced Tab) that resizes the DIV to the retracted size (in my case, 90px).

CODE

<script language="javascript">
document.getElementById("theDiv").style.height = "90px";
</script>

This solution works fine on all browser, but, on non-browsers like IE, the div size doesn't become smaller than the banner expanded size, so there's a gap that pushes the HTML down.

A complete solution is to create two DIVs surrounding the banner, one to occupy the default banner height and another (a floating and transparent one) to contain the banner itself. This way, the HTML and the banner will always be on the same place and when the banner is expanded, it overlaps the HTML seamlessly.

CODE

<div id="occupationDiv">
<div id="bannerDiv" style="position: absolute; background-color:transparent;">
{OPENX_BANNER_CODE}
</div>
</div>

With this done, you just need to tell the Zone to always adjust the divs height when there's a banner delivered (if there isn't a banner to be delivered, the divs will stay invisible). To do this, go to OpenX > Zones > "Expandable-or-not Banners Zone" > Advanced and put the following HTML code to be delivered (sign the option to not deliver the code when there are no banners to be delivered):

CODE

<script language="javascript">
document.getElementById("bannerDiv").style.height = "90px";
document.getElementById("occupationDiv").style.height = "90px";
</script>

That's all. It worked for me on all browsers and even on IE.

I don't know if this solution depends on the banner also, but I don't think so.

Hope it helps.

Regards,

Filipe

[frank239]

is this banner useful in all templets.

[Ram Kumar]

Hi

I tried this. Its working fine for me.

It's really useful for me.


Thanks

I found a good and simple cross-browser solution for this that may be useful for some of the many people who experience problems with expandable banners. It doesn't require any code into the flash banner or by the OpenX operator, who may know nothing of programming languages.

Here it goes:

A simple solution is to create a DIV (id="theDiv") surrounding the banner and putting a javascript code to be delivered together with the expandable banner (OpenX > "Expandable Banner" > Advanced Tab) that resizes the DIV to the retracted size (in my case, 90px).

CODE

<script language="javascript">
document.getElementById("theDiv").style.height = "90px";
</script>

This solution works fine on all browser, but, on non-browsers like IE, the div size doesn't become smaller than the banner expanded size, so there's a gap that pushes the HTML down.

A complete solution is to create two DIVs surrounding the banner, one to occupy the default banner height and another (a floating and transparent one) to contain the banner itself. This way, the HTML and the banner will always be on the same place and when the banner is expanded, it overlaps the HTML seamlessly.

CODE

<div id="occupationDiv">
<div id="bannerDiv" style="position: absolute; background-color:transparent;">
{OPENX_BANNER_CODE}
</div>
</div>

With this done, you just need to tell the Zone to always adjust the divs height when there's a banner delivered (if there isn't a banner to be delivered, the divs will stay invisible). To do this, go to OpenX > Zones > "Expandable-or-not Banners Zone" > Advanced and put the following HTML code to be delivered (sign the option to not deliver the code when there are no banners to be delivered):

CODE

<script language="javascript">
document.getElementById("bannerDiv").style.height = "90px";
document.getElementById("occupationDiv").style.height = "90px";
</script>

That's all. It worked for me on all browsers and even on IE.

I don't know if this solution depends on the banner also, but I don't think so.

Hope it helps.

Regards,

Filipe

[nisal]

Hi,

Can anyone help me on what does it means "{OPENX_BANNER_CODE}". I would really appreciate if anyone can post full example code as I'm new for OpenX.

Thanks
Nisal

[gandaria7001]

Expandable banner ads load on the page as a standard sized banner ad, and upon rollover, they expand to show one or more panels with additional messaging.




__________________
Band Merchandise

[janetvelasquez80...]

Hi,

Does this work for Netscape Explorer?

thanks

Hubschrauber selber fliegen

[padunic]

Hi,

First sorry about my bad english.

i made step by step your suggestion and works, but i dont know if because i'm using joomla the banner expand behind of some elements of template.

Could you, please, help me about that?

The url: http://www.informesaude.com.br/privacidade

Thank you so much.

Padunic

[padunic]

Hi,

First sorry about my bad english.

i made step by step your suggestion and works, but i dont know if because i'm using joomla the banner expand behind of some elements of template.

Could you, please, help me about that?

The url: http://www.informesaude.com.br/privacidade

Thank you so much.

Padunic

Hi, all.

I made it works in Joomla template (www.saudemail.com.br/informesaude/), but I had not realized that the links in the menu were visible, but inaccessible. It seems that the layer is in front of them.

someone could, please, verify and give me some suggestion?

regards

Padunic

[mathg]

I had that same problem where my expand would go over my nav and make it disabled even when closed.

I added theses small jquery lines on the page needing the expand.

CODE

<script type="text/javascript">
$(document).ready(function(){
$('#bannerDiv').mouseover(function(){
$('#bannerDiv').height(350);
return false;
})

$('#bannerDiv').mouseout(function(){
if($('#bannerDiv').height()==350){
$('#bannerDiv').animate({height:'-=260'},500);
}
return false;
})
});
</script>

And on the banner div I added the style "overflow: hidden;" and now everything works like a charm!