homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Loading ads after content
How to properly use getElementById.innerHTML
Rufal




msg:3890336
 2:56 am on Apr 11, 2009 (gmt 0)

Hi all,

I just signed up with an advertising agency that does vertical CPM campaigns (Only topic oriented sites qualify).

But their JS ad serving code is so much slower then f.i. adsense.

So I looked for solutions to load the content and then the ad jscript.

the best solution I found was to do :
[top of html where ad goes]
<div id="topleft"></div>

[bottom of html just before </body>]
<div id="topleftloader" style="display:none;">[ad jscript goes here]</div>
<script type="text/javascript">
document.getElementById("topleft").innerHTML = document.getElementById("topleftloader").innerHTML;
</script>

This approach works great, the page loads very fast and then the ad follows afterwards like an image.

problem is that due to the display:none the ad gets served twice per pageview. So for instance my adsense backup tags are reporting 2x the pageviews.

I tried to insert the adcode directly
i.e. document.getElementById("topleft").innerHTML = [adcode]

But that doesn't work, unterminated string erros and blanks showing up, too complex a jscript to copy/paste in a javascript text even if I threw in a bunch of replaces (returns for \n, slash for \/ and such.

Can anyone help me send the code to the div tag without having the browser load the ad twice for each single show?

Regards
Rufal

[edited by: Rufal at 2:59 am (utc) on April 11, 2009]

 

Fotiman




msg:3890363
 3:46 am on Apr 11, 2009 (gmt 0)

Presumably, the ad code is using document.write to generate content on the page, which means you can't execute it after page load. I haven't tried this, but I think it will work if you do this instead of setting the innerHTML:

var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);

Then set the style to display: block.

Rufal




msg:3890543
 1:36 pm on Apr 11, 2009 (gmt 0)

Thank you!

That worked great. I have no idea whats happening or how a block style works, but since it solved my problem I am very happy.

Fotiman




msg:3890593
 4:08 pm on Apr 11, 2009 (gmt 0)

First, by using appendChild, you are removing a node ('topleftloader') from your document and appending it to a different node ('topleft'). The result is that you don't duplicate the node as you would by setting the innerHTML of 'topleft'.

You had display:none, which hides the element. display:block makes it visible as a block item (which is what a <div> element has by default).

Codnes




msg:3902549
 5:06 pm on Apr 28, 2009 (gmt 0)

I'm having problems. What am I doing wrong this code:
<html>
<body>
<div id="topleft"></div>
</body>
<div id="topleftloader" style="display:none;">[ad jscript goes here]</div>
<script type="text/javascript">
var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);
</script>
</html>

Rufal




msg:3902596
 6:27 pm on Apr 28, 2009 (gmt 0)

Quoting Fotiman: "Then set the style to display: block. "

Your Display is set to "none"

style="display:block;"

Regards

[edited by: Rufal at 6:29 pm (utc) on April 28, 2009]

Codnes




msg:3902703
 8:38 pm on Apr 28, 2009 (gmt 0)

I did tried that too. The code doesn't want to still execute. >_<


<html>
<body>
<div id="topleft">Loading</div>
</body>
<div id="topleftloader" style="display:block;">[ad jscript goes here]</div>
<script type="text/javascript">
var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);
</script>
</html>

Rufal




msg:3902744
 9:24 pm on Apr 28, 2009 (gmt 0)

It needs to go just before </body> not after.

Try that

Codnes




msg:3902758
 9:35 pm on Apr 28, 2009 (gmt 0)

Still not working. :( Can you paste the code that worked for you?

Rufal




msg:3902809
 10:30 pm on Apr 28, 2009 (gmt 0)

ok, somewhere up in my content I have a :

<CENTER>
<div id="partnerbox"></div>
</CENTER>

Then towards the bottom content (before </body> ) I have:

<div id="partnerboxloader" style="display:block;">{Lots of script text stuff here, unchanged from ad vendor}</div>
<script type="text/javascript">
var loader = document.getElementById('partnerboxloader');
document.getElementById("partnerbox").appendChild(loader);
</script>

I actually have separate script snippets for each ad/script location, since I found that if I did it all in one large javascript nothing would render until the last one finished. By doing them separate I can make sure that my first ad location will start showing as soon as possible, then the next location, et cetera.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved