Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face

    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!

  6. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  7. #7
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  9. #9
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  10. #10
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •