Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need some jquery script love please

    I am trying to accomplish 4 actions:

    1. Load random background image.
    2. Background image dynamically resizes to page maintaining aspect ratio.
    3. Fade in the background image and content.
    4. Delay the fade-in of the webpage.

    I am able to accomplish 1-3, however when I add the .delay() to this line:
    $("#body-background").delay(2000).fadeIn(700).ezBgResize();
    , #2 is affected: the page doesn't load with the image sized fully to the window (depends on your window size). It will not fill the screen horizontally, only vertically. The minute you attempt to resize the window, it kicks in and sizes it. See example here: www.fixxed.net/tn/index2.html

    Below is the code. Maybe I am trying to accomplish too much.

    <script language="JavaScript">

    var randnum = Math.random();
    var inum = 5;

    var rand1 = Math.round(randnum * (inum-1)) + 1;
    images = new Array
    images[1] = "splash1.jpg"
    images[2] = "splash2.jpg"
    images[3] = "splash3.jpg"
    images[4] = "splash4.jpg"
    images[5] = "splash5.jpg"

    var image = images[rand1]

    </script>

    </head>

    <body>


    <script language="JavaScript">

    document.write('<div id="body-background" style="display:none"> <img src="' + image + '"></div>')

    </script>

    <script>
    $(window).load(function() {
    $("#body-background").delay(2000).fadeIn(700).ezBgResize();
    });

    $(window).bind("resize", function(){
    $("#body-background").ezBgResize();
    });

    $(document).ready(function(){

    $('#content').delay(2000).fadeIn(1200);

    });
    </script>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    It’s working for me. Which browser are you referring to?
    The only part I don’t like is the document.write function. That’s pretty outdated if you ask me.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response Stephan.
    It's definitely not working. Safari, Firefox, Chrome. It depends on the window size before it loads. I've attached some screen shots:
    www.fixxed.net/shot1.png
    www.fixxed.net/shot2.png


  •  

    Posting Permissions

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