Does not animate in Internet Explorer. about fakeloader.js

[joaopereirawd]

Hi mrswadge,
The fakeLoader.js just have support to Internet Explorer 10+

Maybe is better update your browser ;)

Check this website
http://outdatedbrowser.com/en

[mrswadge]

Tell that to our clients :)

On 4 March 2015 at 22:17, João Pereira [email protected] wrote:

Hi mrswadge,
The fakeLoader.js just have support to Internet Explorer 10+

Maybe is better update your browser ;)

Check this website
http://outdatedbrowser.com/en

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[email protected]

[joaopereirawd]

Yes I Know. you can use the outdatedbrowser.js to "force" users to update the browser. Also contributing for a better web.

Thanks.

[AlexRebula]

Hey mrswadge. I am reading this and I can't help but being curious if you know the reason why your customer does not simply upgrade the browser. Anyway, I've been there. :)

[mrswadge]

It's simply that they need to ensure that all their internal systems that
are core to the business still operate. The problem is, if it's not broken,
why upgrade. There isn't a clear business case that it's worth spending the
money testing and fixing for the sake of upgrading.
On 4 Mar 2015 22:36, "Aleksander" [email protected] wrote:

Hey mrswadge. I am reading this and I can't help but being curious if you
know the reason why your customer does not simply upgrade the browser.
Anyway, I've been there. :)

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[AlexRebula]

I understand. Now I am curious what the problem causing this plugin not working in IE9 is...

[AlexRebula]

Haven't checked anything yet, but my first idea is that the problem is CSS...

[AlexRebula]

Yep... it must be CSS. I tried validating it for IE9 and I get this error: "Sorry, the at-rule @-webkit-keyframes is not implemented."

[joaopereirawd]

Yes Alex,

Internet explorer 9 don't have support for CSS3 Transitions.
http://caniuse.com/#feat=css-transitions

[AlexRebula]

Ah, that's so unfortunate... :/

[joaopereirawd]

unfortunately is what we have 👎

[AlexRebula]

Curious... when running this plugin in the IE9 and lower emulator all seems to work fine. I wonder how reliable the emulator really is... Using IE11 web developer tools emulator for other IE versions.

[mrswadge]

The following javascript should detect if the browser is compatible.

function browserSupportsCSSProperty(propertyName) {
var elm = document.createElement('div');
propertyName = propertyName.toLowerCase();
if (elm.style[propertyName] != undefined)
return true;
var propertyNameCapital = propertyName.charAt(0).toUpperCase() +
propertyName.substr(1), domPrefixes = 'Webkit Moz ms O'.split(' ');
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
return true;
}
return false;
}

Then call it with browserSupportsCSSProperty('animation');

Perhaps there can be a default fallback when this check fails.

Cheers,
Stuart

On 4 March 2015 at 23:50, Aleksander [email protected] wrote:

Curious... when running this plugin in the IE9 and lower emulator all
seems to work fine. I wonder how reliable the emulator really is... Using
IE11 web developer tools emulator for other IE versions.

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[email protected]

[AlexRebula]

Hey Stuart, thanks. However, how much for a fact are you sure this function is really reliable? And if it is, my question would be: for which CSS property should we do the checkup? I am sceptical this checkup function is what we need. :/

[mrswadge]

I found it in the readme of a very similar loader (possibly forked?).

https://github.com/tobiasahlin/SpinKit/blob/master/README.md#old-web-browser-compatibility

I haven't tested it beyond IE9.

Cheers,
Stuart

On 5 March 2015 at 15:45, Aleksander [email protected] wrote:

Hey Stuart, thanks. However, how much for a fact are you sure this
function is really reliable? And if it is, my question would be: for which
CSS property should we do the checkup? I am sceptical this checkup function
is what we need. :/

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[email protected]

[AlexRebula]

Interesting... This is a question we should ask Joao, the author of this plugin. Haven't seen this up until now. :) They are indeed strangely similar. :) But none of them seems to be a fork of the other one. Perhaps are copies? :) Joao? What's going on? ;)

In any case I am still not sure the 'browserSupportsCSSProperty' function is reliable enough or the right way to go. It seems all a bit far fetched to me. Yes, it checks if the 'elm.style' object contains the property, but I am still wondering, on which CSS property we should do the checkup.Cause I believe there are so many properties questionable for browser compatibility and need to be verified... Perhaps I'm wrong...

[AlexRebula]

Obviously I was joking about one being a copy of another... :) As I see, 'SpinKit' is just a helpful set of CSS classes and not a jQuery plugin as I thought on a very quick first glance and I believe Joao wanted to create a jQuery plugin based on it. Am I right Joao? In this case, perhaps the creators of SpinKit deserve some credit in the Readme file? 👍

[AlexRebula]

BTW, the authors of SpinKit say that it is enough to check for the 'animation' property. If that is so, great! But it does not convince me totally. :) Will ask the authors of SpinKit.

[AlexRebula]

Stuart, I've placed in a simple fallback, using the 'browserSupportsCSSProperty' function you provided. Just for test try this if it works in your client's environment... it's the fakeLoader.js... replace it for a brief moment with the original fakeLoader.js file you have and see if the fallback element appears.

/*--------------------------------------------------------------------
 *JAVASCRIPT "FakeLoader.js"
 *Version:    1.1.0 - 2014
 *author:     João Pereira
 *website:    http://www.joaopereira.pt
 *Licensed MIT 
-----------------------------------------------------------------------*/

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    $.fn.fakeLoader = function(options) {

        // Defaults
        var settings = $.extend({
            timeToHide:1200, // Default Time to hide fakeLoader
            pos:'fixed',// Default Position
            top:'0px',  // Default Top value
            left:'0px', // Default Left value
            width:'100%', // Default width 
            height:'100%', // Default Height
            zIndex: '10000000',  // Default zIndex 
            bgColor: '#25aae1', // Default background color
            spinner:'spinner7', // Default Spinner
            imagePath:'', // Default Path custom image
            brandLogo: false
        }, options);

        // TODO: perhaps setting static settings like this (to be publicly available on the plugin's instance) is not really best practice.
        //       Because what happens when we initialize more than one $.fn.fakeLoader plugin on the same screen?
        //       Maybe I'm wrong, but I think we need to figure out a better way to do it - to store some values for each initialized plugin.
        //       The fact is that for each initialized $.fn.fakeLoader we need some unique settings to be available when
        //       calling $(window).resize() - look at the bottom of the file     
        $.fn.fakeLoader.settings = settings;

        // The final html content is yet to be defined, thus empty at the beginning
        var htmlContent = '';

        // The brand logo is not set yet until the user wants it to be set in the pkugin's initialization settings 
        var brandLogo = '';

        // Customized Spinners
        var spinner01 = '<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';
        var spinner02 = '<div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
        var spinner03 = '<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';
        var spinner04 = '<div class="fl spinner4"></div>'; 
        var spinner05 = '<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>'; 
        var spinner06 = '<div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>'; 
        var spinner07 = '<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>'; 

        // TODO: create a nicer fallback
        // NOTE: On purpose I've used inline 'style="display: none;"' for now while we are testing
        //       not to clutter the CSS file unnecesarily... and of course used .fadeIn() in the centerLoader function
        var fallbackElement = '<div class="fl spinner-fallback" style="display: none;"><p>Loading...</p></div>';

        // The target
        var el = this;

        // Init spinner styles
        var initSpinnerStyles = {
            'position':settings.pos,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left
        };

        // If the brand logo is defined in the plugin's initialization settings, add the brand logo to the empty htmlContent
        if (settings.brandLogo && settings.brandLogo.css) {
            brandLogo = '<div class="brand-logo"></div>';            
            htmlContent += brandLogo; 
        }

        // Apply spinner styles
        el.css(initSpinnerStyles);

        // Each 
        el.each(function() {

            var a = settings.spinner;

            //console.log(a)

            if (browserSupportsCSSProperty('animation')) {
                // Decide which type of spinner is to be added to htmlContent
                switch (a) {
                    case 'spinner1':
                        htmlContent += spinner01;                            
                        break;
                    case 'spinner2':
                        htmlContent += spinner02;                        
                        break;
                    case 'spinner3':
                        htmlContent += spinner03;
                        break;
                    case 'spinner4':
                        htmlContent += spinner04;
                        break;
                    case 'spinner5':
                        htmlContent += spinner05;
                        break;
                    case 'spinner6':
                        htmlContent += spinner06;
                        break;
                    case 'spinner7':
                        htmlContent += spinner07;
                        break;
                    default:
                        htmlContent += spinner01;
                }
            } else {
                htmlContent += fallbackElement; 
            }


            // Add customized loader image if defined in settings (overrides htmlContent)
            if (settings.imagePath !='') {
                htmlContent = '<div class="fl"><img src="' + settings.imagePath+ '"></div>';
            }


            // Finally place the htmlContent result into the plugin's placeholder
            el.html(htmlContent);

            // if brand logo is defined, set its CSS styles and center it
            if (brandLogo) {
                $(".brand-logo").css(settings.brandLogo.css);
                centerBrandLogo(settings.brandLogo.verticalOffsetFromCenter);
            }
            centerLoader();
        });

        //Time to hide fakeLoader
        setTimeout(function(){
            $(el).fadeOut();
        }, settings.timeToHide);

        //Return Styles 
        return this.css({
            'backgroundColor':settings.bgColor,
            'zIndex':settings.zIndex
        });

    }; // End Fake Loader


    //Center Spinner
    function centerLoader() {

        var winW = $(window).width();
        var winH = $(window).height();

        var spinnerW = $('.fl').outerWidth();
        var spinnerH = $('.fl').outerHeight();

        $('.fl').css({
            'position':'absolute',
            'left':(winW/2)-(spinnerW/2),
            'top':(winH/2)-(spinnerH/2)
        });

        $('.fl').fadeIn();
    }

    function centerBrandLogo(verticalOffsetFromCenter) {

        if (!verticalOffsetFromCenter)
            verticalOffsetFromCenter = 0;

        var winW = $(window).width();
        var winH = $(window).height();

        var logoW = $('.brand-logo').outerWidth();
        var logoH = $('.brand-logo').outerHeight();

        $('.brand-logo').css({
            'position':'absolute',
            'left':(winW/2)-(logoW/2),
            'top':(winH/2)-(logoH/2)  + verticalOffsetFromCenter
        });

        $('.brand-logo').fadeIn();

    }

    function browserSupportsCSSProperty(propertyName) {
        var elm = document.createElement('div');
        propertyName = propertyName.toLowerCase();
        if (elm.style[propertyName] != undefined)
            return true;
        var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1);
        var domPrefixes = 'Webkit Moz ms O'.split(' ');
        for (var i = 0; i < domPrefixes.length; i++) {
            if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
                return true;
        }
        return false;
    }

    $(window).load(function(){
        centerBrandLogo($.fn.fakeLoader.settings.brandLogo.verticalOffsetFromCenter);
        centerLoader();
        $(window).resize(function(){
            centerBrandLogo($.fn.fakeLoader.settings.brandLogo.verticalOffsetFromCenter);
            centerLoader();                
        });
    });

})( jQuery, window, document );

[AlexRebula]

Stuart? Have you managed to try this? I would really appreciate your detailed feedback, because I am not able to reproduce your issue. Is the fallback working for you well? Because I would like to build on that and include the improvement in the pull request. Do you get any errors in the browser's console? Or anywhere else? Thank you.

[mrswadge]

Hi Aleksander,

I haven't found the time to get onto this as I've been diverted by other
tasks that are more urgent. I will however attempt this and be in touch
with the outcome.

Thanks very much for the assistance!

Cheers,
Stuart

On 6 March 2015 at 12:40, Aleksander [email protected] wrote:

Stuart? Have you managed to try this? I would really appreciate your
detailed feedback, because I am not able to reproduce your issue.

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[email protected]

[AlexRebula]

Thank you Stuart, very kind of you. That's why Github was made I believe. :) I help you, you help me, everyone benefits. :) Looking forward to your feedback once you find the time.