clouseau
05-21-2010, 07:16 PM
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>
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>