Helpful Information
 
 
Category: Ajax and Design
Load External Data in a Div Problem

Ok so I am using a great ajax script from:

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

and everything was going great untill I tried to put my adsense and search into my first tab. All that shows up is my search feature and no adsense.


Check it out: http://www.casino-spot.com

Click Sponsors.:confused:

The link to the external page I am loading into the div is http://www.casino-spot.com/test.html
and the stylesheet I am attempting to load is http://www.casino-spot.com/style2.css

Thanks for your help in advance!

When I go to that site in IE7 Sponsors is already the selected tab and I see a search box and an Ads by Google box. What exactly is the problem?

david_kw

Only because the content for sponsors is loaded on my index.html . So on my index.html I have that information the search and adsense in my div but if you try to click on sponsors the adsense disapears and the search stays because it is loading the external page. My problem is that the adsense disapears when the external page is loaded into the div. I need that to stay. Did that make any sense?

Ok I see now. I believe the problem is Google ads are generated by javascript, but your code is using innerHTML to set the code in the div. And javascript (for the most part) is not run when the script is added by innerHTML. It can be done using DOM methods only.

Here is a sample bit of code to demonstrate it.



<html>
<head>
<title>Load Script Tag</title>
<script type="text/javascript">
function innerLoad() {
var adiv = document.getElementById("adiv");
adiv.innerHTML = "<" + "script type='text/javascript' src='innerHTMLscripttag.js'><" + "/script>";
}

function domLoad() {
var adiv = document.getElementById("adiv");
var n = document.createElement("script");
n.type = "text/javascript";
n.src = "innerHTMLscripttag.js";
adiv.appendChild(n);
}
</script>
</head>
<body>
<div>
<button onclick="innerLoad();">Load with innerHTML</button>
<button onclick="domLoad();">Load with DOM</button>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


The code shows adding the <script> through innerHTML doesn't do anything. FF seems to actually add it if you look a the generated text, but IE doesn't. You can use

javascript:alert(document.body.innerHTML);

on the address bar to see the generated text.

So I think you are going to have to do a special case for the google ads to get it to work. I can't think of a way you where you can just use your test.html to do it.

david_kw

So are you saying it can't really be done with the method I am using? Is there any other way to do it that has the same effects as ajax perhaps? If not do you think I should redesign the site because I do not really see this layout working if I cannot use ajax, it would look bad if you had to refresh the page everytime and bring the other sections back to their original page.

Thanks for your help! :D

Well you are moving beyond the "does this work" to the "what do you recommend" stage. There are so many ways to do things it is hard to answer. I can give an idea how this way might work, although it is a bit of a hack.



function loadpage(page_request, containerid, doAds){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
var adiv = document.getElementById(containerid);
adiv.innerHTML=page_request.responseText;
if (doAds) {
var n = document.createElement("script");
n.type = "text/javascript";
n.src = "test_advars.js";
adiv.appendChild(n);
n2 = document.createElement("script");
n2.type = "text/javascript";
n2.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
adiv.appendChild(n2);
}
}
}


test_advars.js



google_ad_client = "pub-5041827444844508";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text";
//2007-04-05: HomeRC2
google_ad_channel = "5409911834";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";


This is totally untested. I'm not quite sure if it will work because I'm not sure what happens if the second script actually ends up loading first. I suppose one way would be to hardcode the google ad variables in to the main page then just load the js script.

Anyway, something to think about. ;)

Let me know if I can make things more complicated... umm, I mean help further. :)

david_kw

Haha thanks again for the help! Honestly I can't give enough respect to this community. But really I am very new with all this ajax and actually new with the scripting side of coding. So exactly how would I implement this nifty hack? Like I get I would save the second part as test_advars.js but what do I do with the ajax part uptop do I put that in the head section of my main page or maybe the head section of my test page?

Thanks again your help is very appretiated and if your ever looking for help or a freebee on the design side I would love to help out.

Hmm, well I couldn't get it to work in FF and I'm not sure why. As I was trying to figure it out I thought of a much easier method since its a bit of a hack anyway. The ad is created when the page first loads and the google ad is in a div called "adsense". Instead of getting rid of it then trying to recreate it, it is easier to just hide it when you don't want it seen then put it back when the sponsor tab is clicked again.

To do this only 3 changes need to be made (I think).

1) Clear out any google adsense stuff from test.html so I think it would look something like this



<div id="rightc">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.ca/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.PicSpot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.PicSpot.com" id="ss1"></input>
<label for="ss1" title="Search www.PicSpot.com"><font size="-1" color="#000000">www.PicSpot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5041827444844508"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="1054467746"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>


2) Change the code in the header to look something like this



function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid, url=="test.html");
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid, doAds){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
var adiv = document.getElementById(containerid);
adiv.innerHTML=page_request.responseText;
if (doAds) {
document.getElementById("adsense").style.display = "";
} else {
document.getElementById("adsense").style.display = "none";
}
}
}


3) And last move the "adsense" div outside the "rightc" div.

Notice that the doAds variable is set when the url == "test.html" and when that is not true it sets the style display of the adsense div to "none" and clears it otherwise.

Here is my overall test code. I was having issues with loadobjs() so I commented it out since I didn't download all the styles, graphics and such but just the html.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid, url=="test.html")
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid, doAds){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
var adiv = document.getElementById(containerid);
adiv.innerHTML=page_request.responseText;
if (doAds) {
document.getElementById("adsense").style.display = "";
} else {
document.getElementById("adsense").style.display = "none";
}
}
}

/*
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
*/

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Upload Images &amp; Win Prizes | PicPrize.com</title>
</head>

<body>
<div id="container">

<div id="header">
<div id="logo">
<a href="index.php"><img src="images/logo.png" alt="PicPrize.com" width="208" height="69" /></a>
</div>
<div id="nav">
<ul class="nav">
<li class="fs_home"><a href="index.php">Home</a></li>
<li class="fs_about"><a href="about.php">About</a></li>
<li class="fs_other"><a href="other.php">Other</a></li>
<li class="fs_sponsors"><a href="javascript:ajaxpage('test.html','rightc');">Sponsors</a></li>
<li class="fs_winners"><a href="javascript:ajaxpage('test2.html','rightc');">Winners</a></li>
<li class="fs_links"><a href="javascript:ajaxpage('test3.html','rightc');">Links</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="leftc">
<div id="register">
<a class="reg" href="register.php">Register to Win Prizes!</a>
</div>
<div id="login">
<form method="post" enctype="multipart/form-data" action="upload.php">
<div id="form">

<label><strong>Username:</strong></label>
<input name="username" type="text" value="Username" size="20" maxlength="10" />
<label><strong>Password:</strong></label>
&nbsp;<input name="password" type="password" value="Password" size="20" maxlength="10" />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="register.php" class="links">Need to register?</a>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="password.php" class="links">Forgot your password?</a> </div>


<div id="form2">

<input name="login" type="image" src="images/login.png"/>

</div>
</form>
</div>

<div id="prize">
<h1 class="title">This Weeks Prize</h1>


<a href="prize.php"><img src="images/prize.png" alt="Win Me!" border="0" /></a>

</div>
<div id="sponsor">

<h1 class="title">Sponsor</h1>

<div id="info">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-04-04: HomeLC1
google_ad_channel = "9765978322";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="upload">

<h1 class="title">Upload a Picture</h1>

<div id="info2">
<center>
<h3 class="subtitle">Select a Picture File to Upload</h3>

<form method="post" enctype="multipart/form-data" action="upload.php">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="file" name="userfile" size="25" />
<br /> <br />
<input name="login" type="image" src="images/upload.png"/>
</form>
</center>
</div>
</div>
</div>
<div id="rightc">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.ca/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.PicSpot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.PicSpot.com" id="ss1"></input>
<label for="ss1" title="Search www.PicSpot.com"><font size="-1" color="#000000">www.PicSpot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5041827444844508"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="1054467746"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
</div>
<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text";
//2007-04-04: HomeRC1
google_ad_channel = "3330026039";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>


</div>

<div id="footer">
<div id="btmlinks">
</div>
</div>
</div>
</body>
</html>


david_kw

Looks like its getting close to completed! My only problem now is that because you took the div out of the #rightc div, the adsense is showing up at the bottom of my page. Your idea of hiding the adsense is working perfectly and I tried to just put it back in the #rightc div and it just seems to disapear again when sponsors is clicked. I also tried just positioning the adsense div absolute but that causes cross browser problems.

Any ideas thanks for all the help I know its probably like pulling teeth because im so noob with coding.

Hmm, good point. I think you can do one more level of nested divs to fix the problem (unless you are doing something really tricky in your css).



<div id="rightc">
<div id="rightc_replace">
</div>
<div id="adsense">
</div>
</div>


Then change your links to

<a href="javascript:ajaxpage('test.html','rightc_replace');">

david_kw

Now im really confused :) Ok so how exactly is this supposed to work? How would I implement this? On my end if I put that new div into my index and fix the sponsors link I just get an error when I try to go to another ajax tab and come back. Sorry for all this confusion.

You also have to change the code for the other two tabs.

<a href="javascript:ajaxpage('test2.html','rightc_replace');">

<a href="javascript:ajaxpage('test3.html','rightc_replace');">

The idea is that you have a div "rightc" that changes each time a tab is hit. There is a div "rightc_replace" that gets set by the ajax request. Also in "rightc" is the "adsense" div that is either hidden or shown depending on which tab you are on.

Unfortunately it is difficult for me to test but here it is with the changes I mentioned.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid, showAds){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid, showAds)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid, showAds){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
var adiv = document.getElementById(containerid);
adiv.innerHTML=page_request.responseText;
if (showAds) {
document.getElementById("adsense").style.display = "";
} else {
document.getElementById("adsense").style.display = "none";
}
}
}

/*
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
*/

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Upload Images &amp; Win Prizes | PicPrize.com</title>
</head>

<body>
<div id="container">

<div id="header">
<div id="logo">
<a href="index.php"><img src="images/logo.png" alt="PicPrize.com" width="208" height="69" /></a>
</div>
<div id="nav">
<ul class="nav">
<li class="fs_home"><a href="index.php">Home</a></li>
<li class="fs_about"><a href="about.php">About</a></li>
<li class="fs_other"><a href="other.php">Other</a></li>
<li class="fs_sponsors"><a href="javascript:ajaxpage('test.html','rightc_replace', true);">Sponsors</a></li>
<li class="fs_winners"><a href="javascript:ajaxpage('test2.html','rightc_replace', false);">Winners</a></li>
<li class="fs_links"><a href="javascript:ajaxpage('test3.html','rightc_replace', false);">Links</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="leftc">
<div id="register">
<a class="reg" href="register.php">Register to Win Prizes!</a>
</div>
<div id="login">
<form method="post" enctype="multipart/form-data" action="upload.php">
<div id="form">

<label><strong>Username:</strong></label>
<input name="username" type="text" value="Username" size="20" maxlength="10" />
<label><strong>Password:</strong></label>
&nbsp;<input name="password" type="password" value="Password" size="20" maxlength="10" />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="register.php" class="links">Need to register?</a>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="password.php" class="links">Forgot your password?</a> </div>


<div id="form2">

<input name="login" type="image" src="images/login.png"/>

</div>
</form>
</div>

<div id="prize">
<h1 class="title">This Weeks Prize</h1>


<a href="prize.php"><img src="images/prize.png" alt="Win Me!" border="0" /></a>

</div>
<div id="sponsor">

<h1 class="title">Sponsor</h1>

<div id="info">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-04-04: HomeLC1
google_ad_channel = "9765978322";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="upload">

<h1 class="title">Upload a Picture</h1>

<div id="info2">
<center>
<h3 class="subtitle">Select a Picture File to Upload</h3>

<form method="post" enctype="multipart/form-data" action="upload.php">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="file" name="userfile" size="25" />
<br /> <br />
<input name="login" type="image" src="images/upload.png"/>
</form>
</center>
</div>
</div>
</div>
<div id="rightc">
<div id="rightc_replace">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.ca/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.PicSpot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.PicSpot.com" id="ss1"></input>
<label for="ss1" title="Search www.PicSpot.com"><font size="-1" color="#000000">www.PicSpot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5041827444844508"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="1054467746"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>

</div>
<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text";
//2007-04-04: HomeRC1
google_ad_channel = "3330026039";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>


</div>

<div id="footer">
<div id="btmlinks">
</div>
</div>
</div>
</body>
</html>


david_kw

By the way, I also changed the ajaxpage() to be

function ajaxpage(url, containerid, showAds){

so instead of checking if the url=="test.html" you can just pass true for tabs where you want to show the ad at the bottom. Is all in the code I put in my last post.

david_kw

Ok so I have no idea what is going on now. Check out whats happening at www.casino-spot.com . Here is what I currently have uploaded so you can see if I am doing things right.


INDEX.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid, showAds){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid, showAds)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid, showAds){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
var adiv = document.getElementById(containerid);
adiv.innerHTML=page_request.responseText;
if (showAds) {
document.getElementById("adsense").style.display = "";
} else {
document.getElementById("adsense").style.display = "none";
}
}
}

/*
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
*/

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Upload Images &amp; Win Prizes | PicPrize.com</title>
</head>

<body>
<div id="container">

<div id="header">
<div id="logo">
<a href="index.php"><img src="images/logo.png" alt="PicPrize.com" width="208" height="69" /></a>
</div>
<div id="nav">
<ul class="nav">
<li class="fs_home"><a href="index.php">Home</a></li>
<li class="fs_about"><a href="about.php">About</a></li>
<li class="fs_other"><a href="other.php">Other</a></li>
<li class="fs_sponsors"><a href="javascript:ajaxpage('test.html','rightc_replace', true);">Sponsors</a></li>
<li class="fs_winners"><a href="javascript:ajaxpage('test2.html','rightc_replace', false);">Winners</a></li>
<li class="fs_links"><a href="javascript:ajaxpage('test3.html','rightc_replace', false);">Links</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="leftc">
<div id="register">
<a class="reg" href="register.php">Register to Win Prizes!</a>
</div>
<div id="login">
<form method="post" enctype="multipart/form-data" action="upload.php">
<div id="form">

<label><strong>Username:</strong></label>
<input name="username" type="text" value="Username" size="20" maxlength="10" />
<label><strong>Password:</strong></label>
&nbsp;<input name="password" type="password" value="Password" size="20" maxlength="10" />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="register.php" class="links">Need to register?</a>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="password.php" class="links">Forgot your password?</a> </div>


<div id="form2">

<input name="login" type="image" src="images/login.png"/>

</div>
</form>
</div>

<div id="prize">
<h1 class="title">This Weeks Prize</h1>


<a href="prize.php"><img src="images/prize.png" alt="Win Me!" border="0" /></a>

</div>
<div id="sponsor">

<h1 class="title">Sponsor</h1>

<div id="info">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-04-04: HomeLC1
google_ad_channel = "9765978322";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="upload">

<h1 class="title">Upload a Picture</h1>

<div id="info2">
<center>
<h3 class="subtitle">Select a Picture File to Upload</h3>

<form method="post" enctype="multipart/form-data" action="upload.php">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="file" name="userfile" size="25" />
<br /> <br />
<input name="login" type="image" src="images/upload.png"/>
</form>
</center>
</div>
</div>
</div>
<div id="rightc">
<div id="rightc_replace">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.ca/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.PicSpot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.PicSpot.com" id="ss1"></input>
<label for="ss1" title="Search www.PicSpot.com"><font size="-1" color="#000000">www.PicSpot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5041827444844508"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="1054467746"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
</div>

<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-5041827444844508";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text";
//2007-04-04: HomeRC1
google_ad_channel = "3330026039";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>


</div>

<div id="footer">
<div id="btmlinks">
</div>
</div>
</div>
</body>
</html>


TEST.html

<div id="rightc">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.ca/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.PicSpot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="15" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.PicSpot.com" id="ss1"></input>
<label for="ss1" title="Search www.PicSpot.com"><font size="-1" color="#000000">www.PicSpot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5041827444844508"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="1054467746"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>



Sorry about all this trouble david but thankyou for sticking to it! Hopefully I can get this resolved but if you think it is impossible I can always redesign the site. Thanks Dave.H

Ok, I think the problem is with test.html now. You have <div id="rightc"> at the beginning and a </div> at the end. Those are duplicates of what is in the main html file. You will need to remove them otherwise there are two divs with the id "rightc" which is illegal (ids must be unique to the document).

Make that change and lets see where you are.

david_kw

Wow! you are a genious thankyou so much for your help. If there is anything on the design side you need help with just send me a pm. Thanks!

You are welcome. And I might take you up on that someday. :)

david_kw










privacy (GDPR)