Editing a Image Rotator to Rotate Tables

N1CK3RS0N · March 28, 2009

It works great for images, but I'm trying to do something a little more complex. I want it to rotate HTML tables. I have banners for my site sliced into tables with a button on them to go to diff pages and whatnot. So I sort of recoded the JavaSript to make it use tables instead of images. After a little while I got it to work a bit. It displays 1 of the 2 tables I have entered for the data. It changes when I refresh the page, but it does not rotate them by making them fade. Only changes on refresh. I'm not good with JavaScript, infact I know very little about it, so I probably screwed up some minor syntax error or something of the sort.

In the template

<script language="JavaScript">

// configuration structure
var A_TPL = {
	// randomize the array each time page loads
	'random' : true,
	// number of transparency changes during the transition
	//	increase for smoother transition, reduce for less CPU usage
	'steps' : 20,
	// transition duration in seconds
	'transtime': 1,
	// slide time in seconds
	'slidetime': 5,
	// width of the slide (optional)
	'width' : 900,
	// height of the slide (optional)
	'height': 189,
	// alt text for the image (optional)
	'alt' : '',
	// css class assigned to the slide <img> (optional)
	'css' : ''
};

// list of images to display
var A_ITEMS = [
	'<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner1_01" rowspan="3"></td><td class="banner1_02" rowspan="3"></td><td class="banner1_03"></td><td class="banner1_04" rowspan="3"></td></tr><tr><td class="banner1_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner1_06"></td></tr></table>',
	'<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner2_01" rowspan="3"></td><td class="banner2_02" rowspan="3"></td><td class="banner2_03"></td><td class="banner2_04" rowspan="3"></td></tr><tr><td class="banner2_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner2_06"></td></tr></table>'
];

// fader initialization	
var mySlideShow = new tFader (A_ITEMS, A_TPL);

</script>

The script itself

function tFader (a_items, a_tpl) {

// validate parameters and set defaults
if (!a_items) return alert("items structure is missing");
if (typeof(a_items) != 'object') return alert("format of the items structure is incorrect");
if (a_items[a_items.length - 1] == null) return alert("last element of the items structure is undefined");
if (!a_tpl) a_tpl = [];
for (var i = 0; i < A_TSLIDEDEFS.length; i += 2)
	if (a_tpl[A_TSLIDEDEFS[i]] == null)
		a_tpl[A_TSLIDEDEFS[i]] = A_TSLIDEDEFS[i + 1];

// save config parameters in the slider object
this.a_tpl   = a_tpl;
this.a_items = a_tpl.random ? tslide_randomize(a_items) : a_items;

// initialize parameters, assign methods	
this.n_currentSlide = 0;
this.f_goto  = tslide_goto;
this.f_run   = function () { this.b_running = 1; this.f_goto(); };
this.f_stop  = function () { this.b_running = 0; clearTimeout(this.o_timerS); };
this.f_fadeIn  = tslide_fadeIn;
this.f_fadeOut = tslide_fadeOut;
this.f_slideOp = tslide_slideOp;

// register in the global collection	
if (!window.A_SLIDES)
	window.A_SLIDES = [];
this.n_id = window.A_SLIDES.length;
window.A_SLIDES[this.n_id] = this;

// generate control's HTML
var s_attributes = ' '
	+ (a_tpl['css']    ? ' class="'  + a_tpl['css']    + '"' : '')
	+ (a_tpl['width']  ? ' width="'  + a_tpl['width']  + '"' : '')
	+ (a_tpl['height'] ? ' height="' + a_tpl['height'] + '"' : '')
	+ (a_tpl['alt']    ? ' title="'  + a_tpl['alt']    + '" alt="' + a_tpl['alt'] + '"' : '');

this.a_imgRefs = [];
document.write ('<div name="tslide', this.n_id, '_0"', s_attributes, '>', this.a_items[0], '</div>');
this.a_imgRefs[0] = document.images['tslide' + this.n_id + '_0'];
this.n_currentSlide = 0;

// exit on old browsers
if (!this.a_imgRefs[0] || !this.a_imgRefs[0].style || this.a_imgRefs[0].style.marginLeft == null)
	return;

for (var i = 1; i < this.a_items.length; i++) {
	document.write ('<div name="tslide', this.n_id, '_', i, '" style="position:relative;z-index:-1;filter:alpha(opacity=100);">', this.a_items[i], '</div>');
	this.a_imgRefs[i] = document.images['tslide' + this.n_id + '_' + i];
	this.a_imgRefs[i].style.marginLeft = '-' + this.a_tpl.width + 'px';
	this.f_slideOp(i, 0);
	this.a_imgRefs[i].style.zIndex = i;
}

// calculate transition variables
this.n_timeDec = Math.round(this.a_tpl['transtime'] * 1e3 / this.a_tpl['steps']);
this.n_opacDec = Math.round(100 / this.a_tpl['steps']);

// run this sucker
this.f_run();
}

function tslide_goto (n_slide, b_now) {

// cancel any scheduled transitions	
if (this.o_timerS) {
	clearTimeout(this.o_timerS);
	this.o_timerS = null;
	if (this.n_nextSlide) {
		this.f_slideOp(this.n_nextSlide, 0);
		this.n_nextSlide = null;
	}
}

// determine the next slide
this.n_nextSlide = (n_slide == null ? this.n_currentSlide + 1 : n_slide) % this.a_items.length;
if (this.n_nextSlide == this.n_currentSlide) return;

// schedule transition
this.o_timerS = setTimeout('A_SLIDES[' + this.n_id + '].f_fade' + (this.n_nextSlide > this.n_currentSlide ? 'In' : 'Out') + '()', (b_now ? 0 : this.a_tpl['slidetime'] * 1e3));
}

function tslide_fadeIn (n_opacity) {
// new transition
if (n_opacity == null) {
	n_opacity = 0;
}
n_opacity += this.n_opacDec;
// end of transition
if (n_opacity > 99) {
	this.f_slideOp(this.n_nextSlide, 99);
	this.f_slideOp(this.n_currentSlide, 0);
	this.n_currentSlide = this.n_nextSlide;
	this.n_nextSlide = null;
	return this.f_run();
}
// set transparency
this.f_slideOp(this.n_nextSlide, n_opacity);

// cycle
this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeIn(' + n_opacity + ')', this.n_timeDec);
}
function tslide_fadeOut (n_opacity) {
// new transition
if (n_opacity == null) {
	n_opacity = 99;
	this.f_slideOp(this.n_nextSlide, 99);
}
n_opacity -= this.n_opacDec;
// end of transition
if (n_opacity < 0) {
	this.f_slideOp(this.n_currentSlide, 0);
	this.n_currentSlide = this.n_nextSlide;
	this.n_nextSlide = null;
	return this.f_run();
}
// set transparency
this.f_slideOp(this.n_currentSlide, n_opacity);

// cycle
this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeOut(' + n_opacity + ')', this.n_timeDec);
}

function tslide_slideOp (n_slide, n_opacity) {
if (!n_slide) return;
var e_slide = this.a_imgRefs[n_slide];
tslide_setOpacity(e_slide, n_opacity);
}

function tslide_randomize (a_source) {
var n_index,
	a_items = [];
while (a_source.length) {
	n_index = Math.ceil(Math.random() * a_source.length) - 1;
	a_items[a_items.length] = a_source[n_index];
	a_source[n_index] = a_source[a_source.length - 1];
	a_source.length = a_source.length - 1;
}
return a_items;
}

// cross-browser opacity
var s_uaApp  = navigator.userAgent.toLowerCase();
if (s_uaApp.indexOf('opera') != -1 || s_uaApp.indexOf('safari') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
	e_element.style.opacity = n_opacity / 100;
};
else if (s_uaApp.indexOf('gecko') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
	e_element.style.MozOpacity = n_opacity / 100;
};
else if (s_uaApp.indexOf('msie') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
	try { e_element.filters.alpha.opacity = n_opacity } catch (e) {};
};
else
window.tslide_setOpacity = null;

// defaults
var A_TSLIDEDEFS = [
'steps', 40,
'css', '',
'transtime', 0.5,
'slidetime', 2
];

I basically just edited the document.write parts. 2 different lines where it does that.

darkfreaks · March 28, 2009

use === instead of ==

use !== instead of !=

use brackets {} in else if, if else statements

use dot notation () instead of square brackets []

make sure all lines end with semi colons ;

N1CK3RS0N · March 28, 2009

use === instead of ==

use !== instead of !=

use brackets {} in else if, if else statements

use dot notation () instead of square brackets []

make sure all lines end with semi colons ;

I tried doing the first 2, didn't help though. I wouldn't know how to do the others since I don't know javascript well.

RichardRotterdam · March 28, 2009

This is what I notice in your code

var A_ITEMS = [
      '<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner1_01" rowspan="3"></td><td class="banner1_02" rowspan="3"></td><td class="banner1_03"></td><td class="banner1_04" rowspan="3"></td></tr><tr><td class="banner1_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner1_06"></td></tr></table>',
      '<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner2_01" rowspan="3"></td><td class="banner2_02" rowspan="3"></td><td class="banner2_03"></td><td class="banner2_04" rowspan="3"></td></tr><tr><td class="banner2_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner2_06"></td></tr></table>'
   ];

the only thing you really change are classes in those tables. Why simply not only change the classes with javascript instead of the complete html?

Also is there any specific reason you are using tables for this?

N1CK3RS0N · March 28, 2009

This is what I notice in your code

var A_ITEMS = [
      '<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner1_01" rowspan="3"></td><td class="banner1_02" rowspan="3"></td><td class="banner1_03"></td><td class="banner1_04" rowspan="3"></td></tr><tr><td class="banner1_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner1_06"></td></tr></table>',
      '<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td class="banner2_01" rowspan="3"></td><td class="banner2_02" rowspan="3"></td><td class="banner2_03"></td><td class="banner2_04" rowspan="3"></td></tr><tr><td class="banner2_05"><a href="#"><span class="nav-hide">Learn More</span></a></td></tr><tr><td class="banner2_06"></td></tr></table>'
   ];

the only thing you really change are classes in those tables. Why simply not only change the classes with javascript instead of the complete html?

Also is there any specific reason you are using tables for this?

For the first 2 yes. They have similar layouts. Other banners to follow probably wont be identical.

What else would I use besides tables? :/ Div's are messy and a pain. Tables are neat and clean and easy to control.

Plus like I said, I don't know javascript. I'm just editing someone else script that was an image rotator. Trying to get it to work for tables. I wouldn't know how to just change the classes. But that's irrelevant since that isn't what I want to do.

The following section of code does nothing when I remove from the script. I think somethings wrong with this part. Its what controls the additional 'banners' in the rotation to change.

// exit on old browsers
if (!this.a_imgRefs[0] || !this.a_imgRefs[0].style || this.a_imgRefs[0].style.marginLeft == null)
	return;

for (var i = 1; i < this.a_items.length; i++) {
	document.write('<div', s_attributes, ' name="tslide', this.n_id, '_', i, '" style="position:relative;z-index:-1;filter:alpha(opacity=100);">', this.a_items[i], '</div>');
	this.a_imgRefs[i] = document.images['tslide' + this.n_id + '_' + i];
	this.a_imgRefs[i].style.marginLeft = '-' + this.a_tpl.width + 'px';
	this.f_slideOp(i, 0);
	this.a_imgRefs[i].style.zIndex = i;
}

// calculate transition variables
this.n_timeDec = Math.round(this.a_tpl['transtime'] * 1e3 / this.a_tpl['steps']);
this.n_opacDec = Math.round(100 / this.a_tpl['steps']);

// run this sucker
this.f_run();

darkfreaks · March 28, 2009

Fixed Else if , if else statements with {}, fixed ===, !== missing ;, uneeded ;:

function tFader (a_items, a_tpl) {

   // validate parameters and set defaults
   if (!a_items){ return alert("items structure is missing");}
   if (typeof(a_items) !== 'object') {return alert("format of the items structure is incorrect");}
   if (a_items[a_items.length - 1] === null) {return alert("last element of the items structure is undefined");}
   if (!a_tpl){ a_tpl = [];}
   for (var i = 0; i < A_TSLIDEDEFS.length; i += 2)
      if (a_tpl[A_TSLIDEDEFS[i]] === null){
         a_tpl[A_TSLIDEDEFS[i]] = A_TSLIDEDEFS[i + 1];}

   // save config parameters in the slider object
   this.a_tpl   = a_tpl;
   this.a_items = a_tpl.random ? tslide_randomize(a_items) : a_items;

   // initialize parameters, assign methods
   this.n_currentSlide = 0;
   this.f_goto  = tslide_goto;
   this.f_run   = function () { this.b_running = 1; this.f_goto(); };
   this.f_stop  = function () { this.b_running = 0; clearTimeout(this.o_timerS); };
   this.f_fadeIn  = tslide_fadeIn;
   this.f_fadeOut = tslide_fadeOut;
   this.f_slideOp = tslide_slideOp;

   // register in the global collection
   if (!window.A_SLIDES){
      window.A_SLIDES = [];
   this.n_id = window.A_SLIDES.length;
   window.A_SLIDES[this.n_id] = this;}

   // generate control's HTML
   var s_attributes = ' '
      + (a_tpl['css']    ? ' class="'  + a_tpl['css']    + '"' : '')
      + (a_tpl['width']  ? ' width="'  + a_tpl['width']  + '"' : '')
      + (a_tpl['height'] ? ' height="' + a_tpl['height'] + '"' : '')
      + (a_tpl['alt']    ? ' title="'  + a_tpl['alt']    + '" alt="' + a_tpl['alt'] + '"' : '');

   this.a_imgRefs = [];
   document.write ('<div name="tslide', this.n_id, '_0"', s_attributes, '>', this.a_items[0], '</div>');
   this.a_imgRefs[0] = document.images['tslide' + this.n_id + '_0'];
   this.n_currentSlide = 0;

   // exit on old browsers
   if (!this.a_imgRefs[0] || !this.a_imgRefs[0].style || this.a_imgRefs[0].style.marginLeft === null)
     { return;}

   for (i = 1; i < this.a_items.length; i++) {
      document.write ('<div name="tslide', this.n_id, '_', i, '" style="position:relative;z-index:-1;filter:alpha(opacity=100);">', this.a_items[i], '</div>');
      this.a_imgRefs[i] = document.images['tslide' + this.n_id + '_' + i];
      this.a_imgRefs[i].style.marginLeft = '-' + this.a_tpl.width + 'px';
      this.f_slideOp(i, 0);
      this.a_imgRefs[i].style.zIndex = i;
   }

   // calculate transition variables
   this.n_timeDec = Math.round(this.a_tpl['transtime'] * 1e3 / this.a_tpl['steps']);
   this.n_opacDec = Math.round(100 / this.a_tpl['steps']);

   // run this sucker
   this.f_run();
}

function tslide_goto (n_slide, b_now) {

   // cancel any scheduled transitions   
   if (this.o_timerS) {
      clearTimeout(this.o_timerS);
      this.o_timerS = null;
      if (this.n_nextSlide) {
         this.f_slideOp(this.n_nextSlide, 0);
         this.n_nextSlide = null;
      }
   }

   // determine the next slide
   this.n_nextSlide = (n_slide === null ? this.n_currentSlide + 1 : n_slide) % this.a_items.length;
   if (this.n_nextSlide === this.n_currentSlide){ return;}
   
   // schedule transition
   this.o_timerS = setTimeout('A_SLIDES[' + this.n_id + '].f_fade' + (this.n_nextSlide > this.n_currentSlide ? 'In' : 'Out') + '()', (b_now ? 0 : this.a_tpl['slidetime'] * 1e3));
}

function tslide_fadeIn (n_opacity) {
   // new transition
   if (n_opacity === null) {
      n_opacity = 0;
   }
   n_opacity += this.n_opacDec;
   // end of transition
   if (n_opacity > 99) {
      this.f_slideOp(this.n_nextSlide, 99);
      this.f_slideOp(this.n_currentSlide, 0);
      this.n_currentSlide = this.n_nextSlide;
      this.n_nextSlide = null;
      return this.f_run();
   }
   // set transparency
   this.f_slideOp(this.n_nextSlide, n_opacity);

   // cycle
   this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeIn(' + n_opacity + ')', this.n_timeDec);
}
function tslide_fadeOut (n_opacity) {
   // new transition
   if (n_opacity === null) {
      n_opacity = 99;
      this.f_slideOp(this.n_nextSlide, 99);
   }
   n_opacity -= this.n_opacDec;
   // end of transition
   if (n_opacity < 0) {
      this.f_slideOp(this.n_currentSlide, 0);
      this.n_currentSlide = this.n_nextSlide;
      this.n_nextSlide = null;
      return this.f_run();
   }
   // set transparency
   this.f_slideOp(this.n_currentSlide, n_opacity);

   // cycle
   this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeOut(' + n_opacity + ')', this.n_timeDec);
}

function tslide_slideOp (n_slide, n_opacity) {
   if (!n_slide) {return;}
   var e_slide = this.a_imgRefs[n_slide];
   tslide_setOpacity(e_slide, n_opacity);
}

function tslide_randomize (a_source) {
   var n_index,
      a_items = [];
   while (a_source.length) {
      n_index = Math.ceil(Math.random() * a_source.length) - 1;
      a_items[a_items.length] = a_source[n_index];
      a_source[n_index] = a_source[a_source.length - 1];
      a_source.length = a_source.length - 1;
   }
   return a_items;
}

// cross-browser opacity
var s_uaApp  = navigator.userAgent.toLowerCase();
if (s_uaApp.indexOf('opera') !== -1 || s_uaApp.indexOf('safari') != -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      e_element.style.opacity = n_opacity / 100;}
   ;}
else if (s_uaApp.indexOf('gecko') !== -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      e_element.style.MozOpacity = n_opacity / 100;
   };}
else if (s_uaApp.indexOf('msie') !== -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      try { e_element.filters.alpha.opacity = n_opacity ;} catch (e) {}}
   ;}
else{
   window.tslide_setOpacity = null;}

// defaults
var A_TSLIDEDEFS = [
   'steps', 40,
   'css', '',
   'transtime', 0.5,
   'slidetime', 2
];

Still Getting:

JavaScript Warning: function does not always return a value

This warning appears when a function has more than one return statement but not all return statements return a value. This warning is a signal that in some circumstances, your function will return undefined as a value which may not be expected by the caller.

Solution:

http://www.javascriptkit.com/javatutors/serror2.shtml

N1CK3RS0N · March 28, 2009

Fixed Else if , if else statements with {}, fixed ===, !== missing ;, uneeded ;:

function tFader (a_items, a_tpl) {

   // validate parameters and set defaults
   if (!a_items){ return alert("items structure is missing");}
   if (typeof(a_items) !== 'object') {return alert("format of the items structure is incorrect");}
   if (a_items[a_items.length - 1] === null) {return alert("last element of the items structure is undefined");}
   if (!a_tpl){ a_tpl = [];}
   for (var i = 0; i < A_TSLIDEDEFS.length; i += 2)
      if (a_tpl[A_TSLIDEDEFS[i]] === null){
         a_tpl[A_TSLIDEDEFS[i]] = A_TSLIDEDEFS[i + 1];}

   // save config parameters in the slider object
   this.a_tpl   = a_tpl;
   this.a_items = a_tpl.random ? tslide_randomize(a_items) : a_items;

   // initialize parameters, assign methods
   this.n_currentSlide = 0;
   this.f_goto  = tslide_goto;
   this.f_run   = function () { this.b_running = 1; this.f_goto(); };
   this.f_stop  = function () { this.b_running = 0; clearTimeout(this.o_timerS); };
   this.f_fadeIn  = tslide_fadeIn;
   this.f_fadeOut = tslide_fadeOut;
   this.f_slideOp = tslide_slideOp;

   // register in the global collection
   if (!window.A_SLIDES){
      window.A_SLIDES = [];
   this.n_id = window.A_SLIDES.length;
   window.A_SLIDES[this.n_id] = this;}

   // generate control's HTML
   var s_attributes = ' '
      + (a_tpl['css']    ? ' class="'  + a_tpl['css']    + '"' : '')
      + (a_tpl['width']  ? ' width="'  + a_tpl['width']  + '"' : '')
      + (a_tpl['height'] ? ' height="' + a_tpl['height'] + '"' : '')
      + (a_tpl['alt']    ? ' title="'  + a_tpl['alt']    + '" alt="' + a_tpl['alt'] + '"' : '');

   this.a_imgRefs = [];
   document.write ('<div name="tslide', this.n_id, '_0"', s_attributes, '>', this.a_items[0], '</div>');
   this.a_imgRefs[0] = document.images['tslide' + this.n_id + '_0'];
   this.n_currentSlide = 0;

   // exit on old browsers
   if (!this.a_imgRefs[0] || !this.a_imgRefs[0].style || this.a_imgRefs[0].style.marginLeft === null)
     { return;}

   for (i = 1; i < this.a_items.length; i++) {
      document.write ('<div name="tslide', this.n_id, '_', i, '" style="position:relative;z-index:-1;filter:alpha(opacity=100);">', this.a_items[i], '</div>');
      this.a_imgRefs[i] = document.images['tslide' + this.n_id + '_' + i];
      this.a_imgRefs[i].style.marginLeft = '-' + this.a_tpl.width + 'px';
      this.f_slideOp(i, 0);
      this.a_imgRefs[i].style.zIndex = i;
   }

   // calculate transition variables
   this.n_timeDec = Math.round(this.a_tpl['transtime'] * 1e3 / this.a_tpl['steps']);
   this.n_opacDec = Math.round(100 / this.a_tpl['steps']);

   // run this sucker
   this.f_run();
}

function tslide_goto (n_slide, b_now) {

   // cancel any scheduled transitions   
   if (this.o_timerS) {
      clearTimeout(this.o_timerS);
      this.o_timerS = null;
      if (this.n_nextSlide) {
         this.f_slideOp(this.n_nextSlide, 0);
         this.n_nextSlide = null;
      }
   }

   // determine the next slide
   this.n_nextSlide = (n_slide === null ? this.n_currentSlide + 1 : n_slide) % this.a_items.length;
   if (this.n_nextSlide === this.n_currentSlide){ return;}
   
   // schedule transition
   this.o_timerS = setTimeout('A_SLIDES[' + this.n_id + '].f_fade' + (this.n_nextSlide > this.n_currentSlide ? 'In' : 'Out') + '()', (b_now ? 0 : this.a_tpl['slidetime'] * 1e3));
}

function tslide_fadeIn (n_opacity) {
   // new transition
   if (n_opacity === null) {
      n_opacity = 0;
   }
   n_opacity += this.n_opacDec;
   // end of transition
   if (n_opacity > 99) {
      this.f_slideOp(this.n_nextSlide, 99);
      this.f_slideOp(this.n_currentSlide, 0);
      this.n_currentSlide = this.n_nextSlide;
      this.n_nextSlide = null;
      return this.f_run();
   }
   // set transparency
   this.f_slideOp(this.n_nextSlide, n_opacity);

   // cycle
   this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeIn(' + n_opacity + ')', this.n_timeDec);
}
function tslide_fadeOut (n_opacity) {
   // new transition
   if (n_opacity === null) {
      n_opacity = 99;
      this.f_slideOp(this.n_nextSlide, 99);
   }
   n_opacity -= this.n_opacDec;
   // end of transition
   if (n_opacity < 0) {
      this.f_slideOp(this.n_currentSlide, 0);
      this.n_currentSlide = this.n_nextSlide;
      this.n_nextSlide = null;
      return this.f_run();
   }
   // set transparency
   this.f_slideOp(this.n_currentSlide, n_opacity);

   // cycle
   this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeOut(' + n_opacity + ')', this.n_timeDec);
}

function tslide_slideOp (n_slide, n_opacity) {
   if (!n_slide) {return;}
   var e_slide = this.a_imgRefs[n_slide];
   tslide_setOpacity(e_slide, n_opacity);
}

function tslide_randomize (a_source) {
   var n_index,
      a_items = [];
   while (a_source.length) {
      n_index = Math.ceil(Math.random() * a_source.length) - 1;
      a_items[a_items.length] = a_source[n_index];
      a_source[n_index] = a_source[a_source.length - 1];
      a_source.length = a_source.length - 1;
   }
   return a_items;
}

// cross-browser opacity
var s_uaApp  = navigator.userAgent.toLowerCase();
if (s_uaApp.indexOf('opera') !== -1 || s_uaApp.indexOf('safari') != -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      e_element.style.opacity = n_opacity / 100;}
   ;}
else if (s_uaApp.indexOf('gecko') !== -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      e_element.style.MozOpacity = n_opacity / 100;
   };}
else if (s_uaApp.indexOf('msie') !== -1){
   window.tslide_setOpacity = function (e_element, n_opacity) {
      try { e_element.filters.alpha.opacity = n_opacity ;} catch (e) {}}
   ;}
else{
   window.tslide_setOpacity = null;}

// defaults
var A_TSLIDEDEFS = [
   'steps', 40,
   'css', '',
   'transtime', 0.5,
   'slidetime', 2
];

Still Getting:

JavaScript Warning: function does not always return a value

This warning appears when a function has more than one return statement but not all return statements return a value. This warning is a signal that in some circumstances, your function will return undefined as a value which may not be expected by the caller.

Solution:

http://www.javascriptkit.com/javatutors/serror2.shtml

Yeah still doesn't work. Thanks for help though. Where is the solution on that page. It lists a bunch. Doesn't make sense to me since I'm not good with JavaScript haha. Thanks though.

darkfreaks · March 28, 2009

why not use jquery rotate plugin ???

http://code.google.com/p/jquery-rotate/

N1CK3RS0N · March 31, 2009

why not use jquery rotate plugin ???

http://code.google.com/p/jquery-rotate/

No demo or anything available. IDK how it works. I like the way this script worked with images, would be ideal to get it to work with tables.

IDK what is wrong with the code though.

N1CK3RS0N · March 31, 2009

Also that plugin seems to be for images only.

darkfreaks · March 31, 2009

it is but not bad though

here is an object rotation script i found you cam use easily even explains how

http://javascript.about.com/library/blrotate2.htm

N1CK3RS0N · March 31, 2009

it is but not bad though

here is an object rotation script i found you cam use easily even explains how

http://javascript.about.com/library/blrotate2.htm

Hmm.. That seems to just make an image float around in circles on the page. Not what I'm looking to do.

If someone could look at the script and find whats wrong with it I'd love them.

Someone said the solution is here. http://www.javascriptkit.com/javatutors/serror2.shtml

darkfreaks · March 31, 2009

Jquery rotator closest thing i could find that rotates out the rows:

http://plugins.jquery.com/project/ctRotator

N1CK3RS0N · March 31, 2009

Jquery rotator closest thing i could find that rotates out the rows:

http://plugins.jquery.com/project/ctRotator

Might be a last resort.

I still want to know why the current script isn't working. Does anyone here actually code in JS or do they just use other scripts?

I don't get why this current script isn't working. It rotates images fine, and DIV's should have same functionality as images. I've checked, double checked, triple checked, and so on to make sure I didn't mess up any syntax. I'm not very experienced with JS. So please bare with me.

N1CK3RS0N · March 31, 2009

http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm

Got that to work. But no animation. :"(

darkfreaks · March 31, 2009

what sort of animation ???

N1CK3RS0N · March 31, 2009

what sort of animation ???

It fades into the next table.

http://www.softcomplex.com/products/tigra_fader/

Look at the pic of the tiger on the right. It changes and fades into the next every 5 seconds.

I want to do that but with a table...

N1CK3RS0N · April 1, 2009

Anyone?

N1CK3RS0N · April 3, 2009

Anyone?

N1CK3RS0N · April 8, 2009

Anyone?

darkfreaks · April 9, 2009

could do something like:

<script>
fade = {
    speed : 5,
    finalOpacity : 30,
    currentOpacity : 100,
    elID : null,
    init : function(el) {
        fade.elID = el;
        if (!document.getElementById(el)) return;
            fadeInterval = setInterval('fade.doFade()',fade.speed);
    },
    doFade : function(obj) {
        obj = document.getElementById(fade.elID);
        if (fade.currentOpacity>fade.finalOpacity) {
            var newOpacity = fade.currentOpacity - 1;
            obj.style.opacity = "."+(newOpacity);
            obj.style.filter = "alpha(opacity="+newOpacity+")";
            fade.currentOpacity = newOpacity;
        } else {
            clearInterval(fadeInterval);
        }
    }
}
</script>

<a href=#" onclick="fade.init('myTable');return false">fade table</a>

<table id="myTable" width=550 class="mytableclass" background="http://www.google.com/images/logo.gif"><tr><td height=210>cell 1</td><td>cell 2</td><td>cell 3</td></tr></table>

Sign In

Editing a Image Rotator to Rotate Tables

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information