Anudeep Gupta Anudeep Gupta - 3 months ago 21
Javascript Question

Javascript working only in chrome but none other browser

I am trying to populate the images in the background by javascript on page load. I tried with the following code snippet - I tried running it in Chrome locally as well as on localhost where it runs fine but in Firefox, Safari and all other browsers the images don't show up.

var body = document.body,
html = document.documentElement;

var height = Math.floor(Math.min(body.scrollHeight));
for(i=0; i<height; i++){
var images = [],
index = 0;
images[0] = "<img id='rel' src=''>";

images[1] = "<img id='rel1' src=''>";

images[2] = "<img id='rel2' src=''>";

images[3] = "<img id='rel' src=''>";

images[4] = "<img id='rel1' src=''>";

images[5] = "<img id='rel2' src=''>";

images[6] = "<img id='rel' src=''>";

images[7] = "<img id='rel1' src=''>";

images[8] = "<img id='rel2' src=''>";

images[9] = "<img id='rel' src=''>";

images[10] = "<img id='rel1' src=''>";

images[11] = "<img id='rel2' src=''>";

images[12] = "<img id='rel' src=''>";

images[13] = "<img id='rel1' src=''>";

images[14] = "<img id='rel2' src=''>";

index = Math.round(Math.random() * images.length);


and the HTML:

<div id="continer">
<script type="text/javascript" src="images.js"></script>


In Firefox and some other browsers, the scrollbar isn't attached to the body, but the documentElement i.e. the <html> tag.

You have to check which one actually has the scrollHeight

var body = document.body,
    html = document.documentElement;

var bodyHeight = Math.floor(Math.min(body.scrollHeight));
var htmlHeight = Math.floor(Math.min(html.scrollHeight));

var height = Math.max(bodyHeight, htmlHeight);

for(i=0; i<height; i++){ ...