Five
unread,Aug 5, 2012, 7:42:26 AM8/5/12Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to mootool...@googlegroups.com
Hey,
I'm using Fx.Tween (with the newest Version of Mootools + Compatibility) for a simple Slideshow. Firefox makes everything as it should be, but IE7 and IE8 are causing JS-Errors.
I have also tried Fx.Morph, but that didn't make any difference.
This is my short JavaScript:
Element.Events = 0;
Element.NativeEvents = 0;
window.addEvent('domready', function() {
// Originally I've got these variables by reading out the values from some DIVs (like $('slideshow_inner').getStyle('width').toInt() )
// Unfortunately IE alerted me, that the vars have not been set...strange
// As a test, I have set them now directly via PHP
var width = '.$fullwidth.';
var picWidth = '.$width.';
var picsAmount = '.$i.';
var duration = '.$duration.';
// Periodical effect
var n = 0;
var left = 0;
var slider;
var tween = function() {
n++;
left = n * picWidth;
slider = new Fx.Tween(\'slideshow_inner\', {
duration: \'long\',
transition: \'expo\',
property: \'left\'
});
// Restart slideshow after all images have been shown
if (n == picsAmount) {
slider.start(0);
left = 0;
n = 0;
}
else {
slider.start(-left);
}
}
periodicalID = tween.periodical(duration);
});
Nothing really special.
This is the HTML of the Slideshow:
<!-- ###SLIDESHOW### begin -->
<div id="slideshow" style="width: ###WIDTH###px; height: ###HEIGHT###px">
<div id="slideshow_inner" style="width: ###FULLWIDTH###px">
<!-- ###PICTURES### begin -->
<div class="slideshow_pic" style="width: ###PICWIDTH###px">###PICTURE###</div>
<!-- ###PICTURES### end -->
<div style="clear: left"></div>
</div>
</div>
<!-- ###SLIDESHOW### end -->
Some may notice through the HTML-Code, that this is for a Typo3 site :) .
As said above, Firefox does everything as planned, but IE7 and IE8 give me the following JS-Error:
"Object doesn't Support this property or method."
This error is displayed, after the Fx.Tween effect should start for the first time (basically after the duration has expired).
The error is pointing to the following section in Fx.Tween:
from = element.getStyle(property);
It seems, that IE does not recognize the CSS-Property "left" from the Tx.Tween-Effect above. I have tried other properties like "margin-left" and "right" - no difference.
Also you may have noticed the first two lines of the JS-Code:
Element.Events = 0;
Element.NativeEvents = 0;
If I remove these two lines, i get the following JS-Errors (even in Firefox):
"TypeError: Element.Events is undefinde"
"TypeError: can't convert undefinde to object"
I never had any errors like these.
I also don't think, that these errors are related to Typo3 (I have already tried to disable as much Typo3-Stuff as possible), or other JS-Scripts (there are just some basic-JavaScripts on the same Site, just a few helper-functions, nothing special).
I hope, someone can tell me, what I am doing wrong...I just can't find anything :( .