onlinesaratoga
7 Jul 2007, 12:24 PM
I have a site that rotates content within DIVs. One DIV is for text, the other is for images. Everything is working fine, but I guess I would like to know whether this is the best way to accomplish it, or whether there is a better more "Ext-friendly" way.
TEXT ROTATION
var i=0;
var promoEvents = new Array();
promoEvents[0] = 'text 1';
promoEvents[1] = 'text 2';
promoEvents[2] = 'text 3';
function nextPromoEvent() {
i = i === promoEvents.length-1 ? 0 : i+1;
document.getElementById('eventPromos').innerHTML = promoEvents[i];
Ext.get('eventPromos').center(Ext.get('eventPromosBox'));
Ext.get('eventPromos').move("up",5); // eventPromosBox has a 5px bottom border
Ext.get('eventPromos').fadeIn({duration:2});
myDelay = setTimeout('clearPromoEvent()', 7000);
}
function clearPromoEvent() {
Ext.get('eventPromos').fadeOut({duration:2,callback:nextPromoEvent});
}
IMAGE ROTATION
var j=1; // first image (0) is already in at the beginning
var homeImages = new Array();
homeImages[0] = 'images/image1.jpg';
homeImages[1] = 'images/image2.jpg';
homeImages[2] = 'images/image3.jpg';
homeImages[3] = 'images/image4.jpg';
homeImages[4] = 'images/image5.jpg';
function nextImage() {
Ext.get('home-image-rotation').fadeOut({duration:2,remove: false,callback:nextImage2});
}
function nextImage2() {
j = j === homeImages.length-1 ? 0 : j+1;
document.getElementById('home-image-rotation').innerHTML = '<img border="0" src="' + homeImages[j] + '">';
Ext.get('home-image-rotation').fadeIn({duration:2, callback:nextImage3});
}
function nextImage3() {
myDelay = setTimeout('nextImage()', 4000);
}
Some specific questions:
1. Is there an Ext version of "innerHTML"?
2. Is there a better way to vertically center content in a DIV?
TEXT ROTATION
var i=0;
var promoEvents = new Array();
promoEvents[0] = 'text 1';
promoEvents[1] = 'text 2';
promoEvents[2] = 'text 3';
function nextPromoEvent() {
i = i === promoEvents.length-1 ? 0 : i+1;
document.getElementById('eventPromos').innerHTML = promoEvents[i];
Ext.get('eventPromos').center(Ext.get('eventPromosBox'));
Ext.get('eventPromos').move("up",5); // eventPromosBox has a 5px bottom border
Ext.get('eventPromos').fadeIn({duration:2});
myDelay = setTimeout('clearPromoEvent()', 7000);
}
function clearPromoEvent() {
Ext.get('eventPromos').fadeOut({duration:2,callback:nextPromoEvent});
}
IMAGE ROTATION
var j=1; // first image (0) is already in at the beginning
var homeImages = new Array();
homeImages[0] = 'images/image1.jpg';
homeImages[1] = 'images/image2.jpg';
homeImages[2] = 'images/image3.jpg';
homeImages[3] = 'images/image4.jpg';
homeImages[4] = 'images/image5.jpg';
function nextImage() {
Ext.get('home-image-rotation').fadeOut({duration:2,remove: false,callback:nextImage2});
}
function nextImage2() {
j = j === homeImages.length-1 ? 0 : j+1;
document.getElementById('home-image-rotation').innerHTML = '<img border="0" src="' + homeImages[j] + '">';
Ext.get('home-image-rotation').fadeIn({duration:2, callback:nextImage3});
}
function nextImage3() {
myDelay = setTimeout('nextImage()', 4000);
}
Some specific questions:
1. Is there an Ext version of "innerHTML"?
2. Is there a better way to vertically center content in a DIV?