Different AdSense Ad depending on Screen Size

javascript within a javascript - sorry newbie!

[nonstop]

I have this code to check the users screen size
but how can I use it to display another javascript
script, inside a javascript! if that makes any sense!
(no pun) :)

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
Load large adsense ad here
}
else
{
Load small adsense ad here
}
//-->
</SCRIPT>

Can anyone help me?

[DrDoc]

You can use document.write to write the applicable JavaScript tags to the page:

document.write("<scr" + "ipt src='foo.js' type=text/javascript><" + "/scr" + "ipt>");

screen.height and screen.width are not very reliable though...
Plus, what if the browser isn't maximized? You're better off checking JUST the inner width of a page (or height, depending on which one you're interested in ... just not both).

[jonrichd]

I've been trying to make this work.

My code reads:

<script language="javascript"> 
var browseWidth; 
if (document.layers){ 
 browseWidth=window.outerWidth; 
} 
if (document.all){ 
 browseWidth=document.body.clientWidth; 
} 
if (browseWidth >= 900) { 
document.write("<table width='100%' align='center'>"); 
document.write(" <tr><td align='center'>"); 
document.write("<scr" + "ipt type='text/javascript'><!--"); 
document.write("google_ad_client = 'pub-XXXX';"); 
document.write("google_ad_width = 728;"); 
document.write("google_ad_height = 90;"); 
document.write("google_ad_format = '728x90_as';"); 
document.write("google_ad_channel ='XXXXX';"); 
document.write("google_color_border = '040B6D';"); 
document.write("google_color_bg = 'FFFFFF';"); 
document.write("google_color_link = '0000CC';"); 
document.write("google_color_url = '008000';"); 
document.write("google_color_text = '000000';"); 
document.write("//--></sc"+"ript>"); 
document.write("<scr"+"ipt type='text/javascript'"); 
document.write(" src='http://pagead2.googlesyndication.com/pagead/show_ads.js'>"); 
document.write("</scri"+"pt>"); 
document.write("<br><br></td></tr></table>"); 
} 
else 
{ 
document.write("<table width='100%' align='center'>"); 
document.write(" <tr><td align='center'>"); 
document.write("<scr" + "ipt type='text/javascript'><!--"); 
document.write("google_ad_client = 'pub-XXX';"); 
document.write("google_ad_width = 468;"); 
document.write("google_ad_height = 60;"); 
document.write("google_ad_format = '468x60_as';"); 
document.write("google_ad_channel ='XXXX';"); 
document.write("google_color_border = '040B6D';"); 
document.write("google_color_bg = 'FFFFFF';"); 
document.write("google_color_link = '0000CC';"); 
document.write("google_color_url = '008000';"); 
document.write("google_color_text = '000000';"); 
document.write("//--></scr"+"ipt>"); 
document.write("<scr" + "ipt type='text/javascript'"); 
document.write(" src='http://pagead2.googlesyndication.com/pagead/show_ads.js'>"); 
document.write("</scr"+"ipt>"); 
document.write("<br><br></td></tr></table>"); 
}  
</script>  

When I go to display the page, I don't see any ads, but I don't see any JavaScript errors either. Am I missing something?

[nonstop]

I get the same thing.. :(

[Rambo Tribble]

Try rewriting your document.writes so that the resultant HTML incorporates double qoutes on the tag attributes. HTML does not recognize single quotes. Use the single quotes to enclose the entire document.write string and double quotes within, or escape your quotes within so as to end up with double quotes in the final write string.

[jonrichd]

I've tried it with quotes for document.write, and \" to delimit the parameters; ' for document.write and \" for the parameters; and ' for document.write, and " for the parameters.

None of the three combinations results in displaying the ad.

[jonrichd]

I've come up with an alternative solution that will work if you are using ASP to display the pages.

Use JavaScript to determine the window width, and then set a cookie with that value.

Then, open up an ASP coding block, and retrieve the value of the cookie using ASP. At that point, you can use an if/then block and response.write to put the appropriate AdSense code in the document.

This gets you out of having embedded JavaScript within Javascript, and displays the correctly sized ad:

<script language="javascript">
var browseWidth;
if (document.layers){
browseWidth=window.outerWidth;
}
if (document.all){
browseWidth=document.body.clientWidth;
}
setCookie ("mywidth", browseWidth);
</script>

<%
xmywidth = Request.Cookies("mywidth")
if not isnumeric(xmywidth) then ' this is true if there is no cookie
xmywidth = "800" ' set a low initial value as default
end if

if (xmyWidth >= 900) then
response.write("code for big ad here")
else
response.write("code for small ad here")
end if

The only problem is that the first time the use displays a page with this code, he won't have the cookie. By reading the cookie in and seeing if it is numeric, you can display a small ad by default (and if cookies are off).

Note that I didn't put in the JS code for setCookie and getCookie.

[Rambo Tribble]

It appears that when you use document.write to load a new script src, you are losing your reference to any existing objects within the window. The apparent alternative is to use one script to set the variables conditionally, then another set of tags to set the src. There doesn't appear to be any real reason to use document.write, at least based on what you have in your post. Here is an example, working off of your code, but something isn't right with the smaller ad display with the values provided.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Untitled</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
<script type="text/javascript"> 
var bodWid=0;  
if(document.body.clientWidth)bodWid=document.body.clientWidth; 
if(bodWid>= 900) { 
 google_ad_client = "pub-XXXX"; 
 google_ad_width = 728; 
 google_ad_height = 90; 
 google_ad_format = "728x90_as"; 
 google_ad_channel ="XXXXX"; 
 google_color_border = "040B6D"; 
 google_color_bg = "FFFFFF"; 
 google_color_link = "0000CC"; 
 google_color_url = "008000"; 
 google_color_text = "000000"; 
}else{ 
 google_ad_client = "pub-XXX"; 
 google_ad_width = 468; 
 google_ad_height = 60; 
 google_ad_format = "468x60_as"; 
 google_ad_channel ="XXXX"; 
 google_color_border = "040B6D"; 
 google_color_bg = "FFFFFF"; 
 google_color_link = "0000CC"; 
 google_color_url = "008000"; 
 google_color_text = "000000"; 
} 
</script> 
<table width="100%" align="center"> 
<tr> 
<td align="center"> 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> 
</td> 
</tr> 
</table> 
</body> 
</html> 

[nonstop]

in the Adsense TOC

Your Site(s), including without limitation by not modifying the JavaScript or other programming provided to You by Google in any way, unless expressly authorized in writing by Google (including by electronic mail).

so the cookie version might be better

any other suggestions? it really is annoying :)

[Rambo Tribble]

This begs the question, "What did Google provide?" Without seeing their unmodified code, it's hard to come up with any ideas. If you have a link to Google's code on their site, I imagine that wouldn't violate the TOS.