Well, assuming that you've a bit HTML knowledge so you can add each code to a seperate "div", follow the steps:
1.- Add to headinclude template:
Code:
<script type="text/javascript">
function SetResState()
{
if(screen.width <= 800)
{
document.getElementById('adcode1').style.display = 'block';
document.getElementById('adcode2').style.display = 'none';
}
else
{
document.getElementById('adcode1').style.display = 'block';
document.getElementById('adcode2').style.display = 'block';
}
}
</script>
The above Javascript code checks at client-side the user's screen resolution. If it's <= 800 then activates only the "div" adcode1 and hides the adcode2. If the resolution is hogher than 800 then activates both blocks. Offcourse you can change the minimum resolution. eg to 1024.
2.- On the SHELL template change the BODY to:
HTML Code:
<body onload="SetResState()">
3.- Now in your template you need to create 2 blocks. One will holds the adcode for A product, and the other the adcode for B product:
HTML Code:
<div id="adcode1" style="display: none;">
..........Code for Ad 1.............
</div>
<div id="adcode2" style="display: none;">
..........Code for Ad 2.............
</div>
!!!! Please be aware that I did a change to Javascript code. This one now is the correct.
I've tested it at:
http://www.christeris.com/adblocks.html and works
Chris