Hello, I'm new to this forum. I'm not new to Javascript, but have no formal training. Looking to learn lots on this forum.
I’m trying to deploy a Javascript code “trio” of images. The code uses a CSS file, and a separate JS file. I have a couple issues I’d like input on.
The first is the images loop through once, per div. I’d like each div to loop independently, and infinitely on page load.
Seccond: this page doesn’t show in IE... at all. Only FireFox. Any clues? Thank you all!!!
My page: http://www.cityofcampbell.com/_indexRotation.htm
JS [CODE]
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 500;
//cross-fade time (in milliseconds)
var fadeTime = 500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval (function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
[CODE]
CSS [CODE]
#rotator1 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
}
#rotator2 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
}
#rotator3 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
[CODE]
I’m trying to deploy a Javascript code “trio” of images. The code uses a CSS file, and a separate JS file. I have a couple issues I’d like input on.
The first is the images loop through once, per div. I’d like each div to loop independently, and infinitely on page load.
Seccond: this page doesn’t show in IE... at all. Only FireFox. Any clues? Thank you all!!!
My page: http://www.cityofcampbell.com/_indexRotation.htm
JS [CODE]
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 500;
//cross-fade time (in milliseconds)
var fadeTime = 500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval (function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
[CODE]
CSS [CODE]
#rotator1 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
}
#rotator2 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
}
#rotator3 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
[CODE]
Comment