PDA

View Full Version : 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:


<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:


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 :D

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/showthread.php?p=180944#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&rlz=1C1GGLS_en-USUS301US308&q=height:+100%25+in+Internet+Explorer&btnG=Search

http://www.google.com/search?hl=en&rlz=1C1GGLS_en-USUS301US308&q=height:+100%25+in+ie&btnG=Search

Search a litt.e
Google is friend. :D

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:


<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>

cgibers1
01-23-2009, 04:23 AM
Nile, that was it! Apparently it is just switching the order of some of the script in the head? I really appreciate all of your help.

I removed the 'elem.style.width = '100%'; because it was scaling to 100% of the <div>, and really I just wanted the height to scale to the <div> and the width to scale in proportionately. Again, this is working in Firefox but in IE the width does not scale proportionately to the height (but rather remains it's inherent width). Is there a solution to this? I have been scouring the internet all day but still haven't run across anything to help me solve this dilemma. I would be so pleased to have this work correctly in both browsers after all of this effort so if anyone has a solution, I would love to hear it!

Cheers!

cgibers1
01-24-2009, 10:44 PM
For anyone referencing this, I have figured out that to size the image to 100% screen height and keep the width proportionate, you can use the following code in your javascript in you <head> element:

elem.style.height = '100%';
elem.style.width = 'auto';

And again thanks to everyone who helped me with this, I greatly appreciate it and am so pleased with the result!

Nile
01-25-2009, 04:57 PM
Ok, I'm glad to help you cgibers1, and your welcome. :)