this is just the kind of help I need!!!!
here's my issue.I have a theme that is using two bits of javscript to perform tasks
task 1 rotate the wallpaper
task 2 falling snow effect
I've copied the two fields below (wallpaper.htm) and snow.js
the bit highlighted in red below is my problem..I think...
if I include this..then the wallpapers change perfectly...but the snow flakes don't work. if I remove this bit, then the snow works perfectly, but the wallpaper changes from image, to nothing, then image, then nothing (it should be image to image to image etc)
so, this is my wallpaper.htm file
<script src="Snow.js" type="text/javascript" charset="utf-8"></script>
<style>
img {
position: absolute;
width: 320px;
height: 480px;
}
img.fade-out {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body>
<img id="img1" class="fade-in">
<img id="img2" class="fade-out">
<script>
// Displays each image once in random order before
// randomizing the list again.
// Just add the image's filename to the list to add an image,
// and change interval to control the cycle speed.
var interval = 10; // Seconds between change (must be > duration)
var imageDir = ""; // The path containing the images
var duration = 1; // The transition's duration in seconds
// Must match -webkit-transition-duration above
var images = [ // List of image filenames
"xmas0.jpg",
"xmas1.jpg",
"xmas2.jpg",
"xmas3.jpg",
"xmas4.jpg",
"xmas5.jpg",
"xmas6.jpg",
"xmas7.jpg",
];
//// You shouldn't need to change anything below ////
var index = 0;
var imageCount = images.length;
var randomize = function(){
return Math.round(5 - 10 * Math.random());
};
var fade = function(){
img1.style.zIndex = 1;
img2.style.zIndex = 2;
img1.className = "fade-in";
img2.className = "fade-out";
index = (index + 1) % imageCount;
if(!index){
images.sort(randomize);
}
var tmp = img1;
img1 = img2;
img2 = tmp;
setTimeout(function(){img1.src = imageDir + images[index];}, duration * 1000);
setTimeout(fade, interval * 1000);
};
images.sort(randomize);
img1.src = imageDir + images[index];
fade();
</script>
<div id="snowContainer"></div>
and this is the snow.js file
var NUMBER_OF_SNOWFLAKES = 25;
function init()
{
/* Get a reference to the element that will contain the flakes */
var container = document.getElementById('flakeContainer');
/* Fill the empty container with new snow */
for (var i = 0; i < NUMBER_OF_SNOWFLAKES ; i++)
{
container.appendChild(createAflake());
}
}
function randomInteger(low, high)
{
return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high)
{
return low + Math.random() * (high - low);
}
function pixelValue(value)
{
return value + 'px';
}
function durationValue(value)
{
return value + 's';
}
function createAflake()
{
/* Start by creating a wrapper div, and an empty img element */
var flakeDiv = document.createElement('div');
var image = document.createElement('img');
/* Randomly choose a flake image and assign it to the newly created element */
image.src = 'snow.gif';
/* Position the flake at a random location within the screen */
flakeDiv.style.top = pixelValue(randomInteger(-150, -50));
flakeDiv.style.left = pixelValue(randomInteger(0, 500));
/* Randomly choose a spin animation */
var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
/* Set the -webkit-animation-name property with these values */
leafDiv.style.webkitAnimationName = 'fade, drop';
image.style.webkitAnimationName = spinAnimationName;
/* Figure out a random duration for the fade and drop animations */
var fadeAndDropDuration = durationValue(randomFloat(5, 11));
/* Figure out another random duration for the spin animation */
var spinDuration = durationValue(randomFloat(4, 8));
/* Set the -webkit-animation-duration property with these values */
flakeDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
image.style.webkitAnimationDuration = spinDuration;
/* Add the created image to the div */
flakeDiv.appendChild(image);
/* Return this div so it can be added to the document */
return flakeDiv;
}
window.addEventListener('load', init, false);
so..it looks like something to do with img container being used in two places?? I'm not a javascript guru..or even a semi guru..and am completely stuck. it may be that this will never work, but thanks for any pointers
