Jump to content

Archived

This topic is now archived and is closed to further replies.

N1CK3RS0N

Editing a Image Rotator to Rotate Tables

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 ;

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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();

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

it is but not bad though ;D

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.