Unclear JavaScript error with Fx.Tween

94 views
Skip to first unread message

Five

unread,
Aug 5, 2012, 7:42:26 AM8/5/12
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.'; 

    // P
eriodical 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 :( .

Arian Stolwijk

unread,
Aug 5, 2012, 7:58:44 AM8/5/12
to mootool...@googlegroups.com
Element.Events = 0;
Element.NativeEvents = 0;

can't do any good at least.

Can you create a jsfiddle, basically paste the stuff you pasted here in a fiddle, try to make it work, and paste the link here, so we can play with it. I don't really see something which would cause those errors.

Five

unread,
Aug 5, 2012, 8:50:37 AM8/5/12
to mootool...@googlegroups.com

Arian Stolwijk

unread,
Aug 5, 2012, 9:44:00 AM8/5/12
to mootool...@googlegroups.com
But this jsfiddle works fine in IE8...

Five

unread,
Aug 5, 2012, 10:03:00 AM8/5/12
to mootool...@googlegroups.com
Hm...
Maybe it's something related to Typo3 after all...I'm going to check some of the Typo3-Functions again.

Five

unread,
Aug 5, 2012, 10:13:10 AM8/5/12
to mootool...@googlegroups.com
I just added my Typo3-Slideshow-Plugin to a different site on the website - voilá, no IE Errors :| .
I probably have another plugin somewhere on this particular site, which in conjunction with the slideshow produces this error.

Thanks!
Reply all
Reply to author
Forward
0 new messages