If screen res > 1024, show banners on the sides positioned via CSS

I would like to position banner on the sides to all visitors with resolution bigger than 1024x768.
What i found so far is javascript redirecting to page designed for the higher resolution.
But i would like to just add piece of css+html to the existing page in the case of bigger resolution.

 

Below are steps:

1. Always keep a blank container for banner on right.
2. Do screen resolution detection using javascript.
3. If its greater than 1024X768, then using ajax fill up content for that container. Alternative to this, you can use iframe, and on screen resolution greater than 1024X768, provide iframe with source and reload it

Hope you know how to detect screen resolution, ajax and iframes..

 

i was looking for practical advices or best, sample code
theoretical instructions would be great for someone familiar with javascript and ajax
thank you

 

This should do it:

<div id="mybanner" style="display:none">YOUR BANNER GOES HERE</div>
<script type="text/javascript">
document.getElementById("mybanner").style.display = (screen.width>1024) ? "block" : "none";
</script>

Code (markup):

There is no need to involve AJAX with this, just place your banner in the div. If screen res is right, then the div is displayed.

 

Personally I'd go with AJAX just to be safe. Companies that provide ads are very pretentious when it comes to the way their ads are shown and having invisible ads may raise some flags. What is the webmaster doing here? Generating false clicks and using this method to lower his CTR? Wasting the ad server's resources? Personally I wouldn't want to answer these questions, especially to companies like google who will ban you on the spot without the option to appeal.

 

<div id="mybanner" style="display:none">YOUR BANNER GOES HERE</div>
<script type="text/javascript">
var adCode = "ad code or an iframe code goes here";
document.getElementById("mybanner").innerHTML = (screen.width>1024) ? adCode : "";
</script>

Code (markup):

 

No need use javascript for this purpose.

Here is a tool to generate fixed - liquid - fixed layout which applies to ant res. The fixed columns are for banner or menus.

http://www.pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm

Depending on the number of the columns of your layout, select different tool.

 

Works brilliant! Thank you, you are the best!


p.s.
why is the second version?

 

screen.width will report desktop size. what if the user's browser is not maximised? use document.body.clientWidth instead - they could be at 1280x1200 but the effective browser space can be 1000px or whatever - which would cock up otherwise.

 

thanks, that's very useful, but for this particular project i need those "extra" ads to be really shown only to the people with extra sceen space
not just to fluently move them somewhere

 

Good point, although he did say screen res. But I would go with your idea, it seems to make more sense.

 

yeah but in that case he could have scrollbars even for the 1024x design
so he shouldnt mind to scroll a bit more for the banners....

 

when would anyone make an effort to scroll in order to see an advert (bud wassup ads? )

if you want to maximise ROI then you want to show a different one instead when the browser size does not permit the side one. also, keep in mind if you are not on ppc but on displays, even if something is off-screen / invisible, it will still count towards a view, which is bad. even if you are PPC, you want to know the ratio of shown vs clicked, hence camjohnson's -pseudo code that would only embed / request an advert if allowed, as opposed to do it anyway and hide it.

 

i meant that if the ads make his browser show scrollbars that's bad, but if he has them anyway, he wouldnt mind that the banners make them a bit longer... :>

i agree with the rest.
This is just a way for me to show an extra advertisement to 70% of my traffic and not annoy the rest 30% with scrollbars.