Javascript Random image loader: load image at 100% screen height

**cgibers1** · 01-17-2009, 09:07 PM

Hello,
I am not familiar with javascript but found some great code that works to randomly load images into a <div> tag on my website. The problem is, I do not know how to get it to load the image at 100% of the page height. If I simply set one image in the <div> tag and put the code height="100%", the image will fill 100% screen height. However, I cannot seem to get this to work with the new javascript.

Here is the script in the <head> tag:

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="images/image_1.jpg";
images[1]="images/image_2.jpg";
images[2]="images/image_3.jpg";
images[3]="images/image_4.jpg";
images[4]="images/image_5.jpg";
images[5]="images/image_6.jpg";
images[6]="images/image_7.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

var elem=document.createElement("img");
elem.setAttribute("src",images[i]);
elem.setAttribute("title",images[i]);

document.getElementById("column_1").appendChild(elem);

}

onload=randomImage;

//]]>
</script>

And here is the script in my <body> tag:

<div id="column_1">
<noscript>
<img alt="default image" src="image_1.jpg" />
</noscript>
</div>

Does anyone know how I can modify this so the random image loaded fills the screen height? I've searched countless forums but can't seem to find the answer!

Thank you!

**Nile** · 01-17-2009, 11:40 PM

Do something like this:

Code:

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="images/image_1.jpg";
images[1]="images/image_2.jpg";
images[2]="images/image_3.jpg";
images[3]="images/image_4.jpg";
images[4]="images/image_5.jpg";
images[5]="images/image_6.jpg";
images[6]="images/image_7.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

var elem=document.createElement("img");
elem.setAttribute("src",images[i]);
elem.setAttribute("title",images[i]);
elem.setAttribute("height",'100%');
elem.setAttribute("width",'100%');

document.getElementById("column_1").appendChild(elem);

}

onload=randomImage;

//]]>
</script>


And here is the script in my <body> tag:

<div id="column_1">
<noscript>
<img alt="default image" src="image_1.jpg" />
</noscript>
</div>

**jscheuer1** · 01-17-2009, 11:59 PM

There is no reason to use setAttribute here, use the attribute itself instead:

Code:

elem.src = images[i];
elem.title = images[i];
elem.height = '100%';
elem.width = '100%';

But, 100% height is meaningless in a valid document unless the parent element has height, and then it will only be 100% of the height of the parent element.

Also many images will become distorted if this changes their aspect ratio or even simply expands or contracts them beyond a size practical for decent resolution.

**cgibers1** · 01-20-2009, 01:08 PM

Nile,
Thank you for the response! This is exactly what I was trying to do, I greatly appreciate your help

Thank you also for the additional feedback in terms of the parent element and distortion issues. I am not to concerned about distortion in this instance since I am not showing much of the image horizontally (it is more of background) but I will definitely remember that for future projects.

**cgibers1** · 01-21-2009, 03:01 AM

Although this javascript works perfectly in Firefox, unfortunately I just realized that it is not working (making the image 100% screen height) in Internet Explorer. Any ideas why? The CSS style associated with the code in the body is as follows:

#column_1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
min-height: 100%;
border-style: none;
z-index: 1;
}

Any ideas would be greatly appreciated!

**Nile** · 01-21-2009, 03:06 AM

Look here:
http://www.dynamicdrive.com/forums/s...944#post180944

**cgibers1** · 01-22-2009, 02:17 AM

Thank you for that reference. I tried adding the "if lt IE 8" statement as well as moving the height attribute after the page load in the javascript in the header, but the image is still not scaling to 100% in IE, though it still in in Firefox.

Any other suggestions would be greatly appreciated! I have uploaded a test page to reference here: http://www.cgiberson.com/kenedeez/contact.htm

The CSS page associated with the page is here: http://www.cgiberson.com/kenedeez/style.css

Thank you!

**Nile** · 01-22-2009, 02:35 AM

http://www.google.com/search?hl=en&r...er&btnG=Search

http://www.google.com/search?hl=en&r...ie&btnG=Search

Search a litt.e
Google is friend.

**cgibers1** · 01-22-2009, 03:18 AM

Thanks Nile! I promise I have been google-ing all week trying to figure this out! I tried these fixes but these seem to address the issue of making the <div> 100% of the page. Luckily, this isn't the issue I'm having. You can see that I've updated my style sheet to make my div background lime to confirm this (http://www.cgiberson.com/kenedeez/contact.htm). The lime extends to the full page height, while the image will not stretch the same (as a reminder, this is only an IE issue).

So I am assuming it is an issue with the javascript, and I am missing something with in my javascript code that will make the image load at 100% height of the <div> (and therefore page). Does this make sense? Unfortunately, I am not familiar with javascript at all which is why I am picking some brains on this forum!

As always, any further thoughts would be greatly appreciated!

**Nile** · 01-22-2009, 04:33 AM

Umm... well if you say 100% works in the style, try:

Code:

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="images/image_1.jpg";
images[1]="images/image_2.jpg";
images[2]="images/image_3.jpg";
images[3]="images/image_4.jpg";
images[4]="images/image_5.jpg";
images[5]="images/image_6.jpg";
images[6]="images/image_7.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

var elem=document.createElement("img");
elem.src = images[i];
elem.title = images[i];
elem.style.height = '100%';
elem.style.width = '100%';

document.getElementById("column_1").appendChild(elem);

}

onload=randomImage;

//]]>
</script>


And here is the script in my <body> tag:

<div id="column_1">
<noscript>
<img alt="default image" src="image_1.jpg" />
</noscript>
</div>

Thread: Javascript Random image loader: load image at 100% screen height

Thread Tools

Search Thread

Javascript Random image loader: load image at 100% screen height

Bookmarks

Bookmarks

Posting Permissions