Alternative ways to add javascript code to bottom of page

Forum Moderators: open

Message Too Old, No Replies

Alternative ways to add javascript code to bottom of page

Bluestreak

4:36 am on May 23, 2010 (gmt 0)

I've been using a div placeholder for my advertising codes so I can place them near the bottom of my pages. I'm using the following strings:

<div id="adbox2_hide" style="display: none;">AD CODE</div>

<script type="text/javascript">

 var adbox2 = document.getElementById('adbox2'),
   adbox2_hide = document.getElementById('adbox2_hide');

 adbox2.innerHTML = adbox2_hide.innerHTML;
 adbox2_hide.innerHTML = '';

However, Safari seems to gag on this by producing a few "canceled loading the page" errors. Is there a better way to do this or make it more cross-browser compliant at least? Thanks for any help!

MichaelBluejay

2:08 pm on May 25, 2010 (gmt 0)

I don't think the problem is faulty JavaScript, at least not the JavaScript you posted. I think that for whatever reason, your whole page isn't loading in Safari, so it never gets to the code at the bottom. If something unrelated is preventing the page from loading, then you likely can't use the other normal way of executing JavaScript after a page load, <body onload="doSomeFunction()">.

It's possible that what's killing the page-loading is some earlier JavaScript that runs fine in some browsers but not in Safari. I recommend loading the page in Firefox and looking at the Error Console window. That will tell you if there are JavaScript errors, and what they are, which will help you clean up your code. I use Safari for browsing, but I use Firefox for JS development, for that reason.

MichaelBluejay

2:10 pm on May 25, 2010 (gmt 0)

P.S. Your code is missing a closing </script>. Is it also missing on your page? Also, now that I look at your code a little more closely, I'm not sure exactly what it is you're trying to do. Why are you using JavaScript at all?

Bluestreak

3:05 pm on May 25, 2010 (gmt 0)

I know these series of particular code are the culprit because it loads fine when they're removed (no page load cancellation errors)

I just showed part of the code, which is why it's missing a script tag. Here's how it's set up:

I have a div tag in my sidebar for where the ad will show:

<div id="adbox2"></div>

At the the footer, I have the following code:

<div id="adbox2_hide" style="display: none;"><script src="http://tag.adnetworkblahblahblah.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat"></script></div>

<script type="text/javascript">

var adbox2 = document.getElementById('adbox2'),
adbox2_hide = document.getElementById('adbox2_hide');

adbox2.innerHTML = adbox2_hide.innerHTML;
adbox2_hide.innerHTML = '';
</script>

Using this approach, it prevents the ad from acting as a bottleneck when my page renders. Now even if the ad takes a minute to load, the rest of my page is already loaded.

It works fine in every browser except Safari. If I hardcode then I get no errors, but my page will only load partially if it has to wait for the ad code to execute.

Am I making sense? I'll check Firefox for errors to see if there are any clues that might help.

TheMadScientist

3:20 pm on May 25, 2010 (gmt 0)

Have you tried it like this (just for fun):

<script type="text/javascript">
document.getElementById('adbox2').innerHTML=document.getElementById('adbox2_hide').innerHTML;
document.getElementById('adbox2_hide').innerHTML = '';
</script>

I've had issues trying to switch the document.getElementById() to a variable before and I'm wondering if maybe that's what Safari is choking on?

MichaelBluejay

3:36 pm on May 25, 2010 (gmt 0)

This line has a comma after it instead of a semicolon:

var adbox2 = document.getElementById('adbox2'),

Did I find your error?

Firefox would have found it for you too, btw. :)

Bluestreak

2:02 am on May 26, 2010 (gmt 0)

Ill try it both ways after I finish working on minifying a few javascript files on my site and report back here with the results again. Thanks for the suggestions!

g1smd

7:30 am on May 26, 2010 (gmt 0)

Have you considered placing the code in an external JS file too?

Bluestreak

2:27 am on May 27, 2010 (gmt 0)

Ok, replacing the commas didn't work. MadScientist, I tried your code and that didn't work either, stil lthe same old crap. I'll keep it anyway though since it looks cleaner to me and didn't result in any errors otherwise.

I checked the error console and the only errors I got go like this:

Error: Permission denied for <http://ad.doubleclick.net> to call method Location.toString on <http://www.#*$!xx.com>.

I wonder if that's related.

Bluestreak

2:39 am on May 27, 2010 (gmt 0)

glsmd: I think that would involve too much know how. I'm still very much an amterur and my understanding of code is on a kindergarten level. :-X

MichaelBluejay

4:39 am on May 28, 2010 (gmt 0)

Okay, here's what often works for me: Start a test file, rebuilding the page from scratch.

Version 1: <html><body>(hard-coded ad)</body></html>
Version 2: <html><body><div for ad><script to show the ad></html>

If Version 2 doesn't work, continue to simplify the code. (e.g., Use plain text for the content, rather than the actual ad, etc.)

If Version 2 *does* work, then keep slowly rebuilding the page, adding elements from the actual page to your test page, testing the loading success along the way, to see at which point it fails.

This is good basic troubleshooting for any kind of problem.

Bluestreak

2:45 pm on May 28, 2010 (gmt 0)

I have 2,448 lines of code go through. For me to follow that approach would consume all of my time and literally take me all month, if not longer. That's just not a viable option for me, especially since I don't know how to read code.

MichaelBluejay

5:55 pm on May 28, 2010 (gmt 0)

Actually, you could get some meaningful info rather quickly. You can run through Version 1 & Version 2 above in very short order. And if Version 2 above doesn't work, you can post the simplified code here and probably get an answer.

On the other hand, if Version 2 above *doesn't* work, then the problem is really with something else on your page, and in that case *nobody* here can help you, so you know you can give up, since you can't get help here with 2448 lines of code and you're unwilling to troubleshoot further yourself.

Bluestreak

3:54 am on May 29, 2010 (gmt 0)

If I understand you correctly, then I pretty much already tried this. If I hard code the ad tags in, then I get no errors, but if I place the ad tags in a DIV placeholder like I indicated before, that's when the errors show up. Were it not for that I wouldn't experience any Safari errors. The problem with hard coding of course is that if the server response is slow, it prevents the rest of the page from rendering. Since these ads are in a sidebar, it would mean my sidebar would never show up until the ads finishing loading, and sometimes that can be a while depending on response time.

subexpression

7:04 pm on May 29, 2010 (gmt 0)

MichaelBlueJay,

About the comma...

Bluestreak is declaring two variables with one "var" keyword, and initializing them with the id reference:
var adbox2 = document.getElementById('adbox2'),
adbox2_hide = document.getElementById('adbox2_hide');

It's the same as this:
var variableone, variabletwo;

So, the comma is fine.

Bluestreak,

I tested your code in Safari and it works fine. I made one small alteration...I changed adnetworkblahblahblah to contextweb :)
It works fine for me in Safari 4 Public Beta (528.16)

It displayed "Buy and Sell DVD's on eBay" in the innerHTML of adbox2.

Like MichaelBluejay was saying, you may need to de-construct your page until you find the offending bits of code.

Bluestreak

9:54 pm on May 29, 2010 (gmt 0)

Funny, I use Contextweb too. Ok I tried one more thing. I only used one placeholder this time, then disabled the backup tags so that only ads from ContextWeb shows.

Initially, I got no errors, but when i reload the page and a different ad shows, I get an error. Sometimes the errors show up, and sometimes they dont, depending on the ad. That seems to explain why my "canceled loading the page" errors would vary from 1-3 errors, since they're never consistent. If it's indeed the ads themselves causing the issue, there's probably nothing I can do about it then.

MichaelBluejay

2:46 pm on May 30, 2010 (gmt 0)

If it works consistently when your ad is hard-coded then I still think the error is with your JavaScript.

If I understand you correctly, then I pretty much already tried this.

No, you didn't, not from what you described. Like I said, you need to start with a *blank* document from scratch and add *only* the *minimum* amount of code necessary to reproduce your problem. It should be only a few lines, including the HTML.

Really, if you're not willing to properly troubleshoot then there's nothing more that anyone can do for you.