vanderlee/coverflow

Coverflow error "offsetWidth" happens with less then 8 images.

stephyswe opened this issue · 1 comments

stephyswe commented

I'll keep posted here.

Scenario: Use coverflow with less then 8 images result in this error. How can we bypass it ?

jquery-coverflow.js:278 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    at t.(anonymous function).(anonymous function)._frame (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:278:83)
    at t.(anonymous function).(anonymous function)._frame (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._setIndex (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:235:10)
    at t.(anonymous function).(anonymous function)._setIndex (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._create (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:194:9)
    at t.(anonymous function).(anonymous function)._create (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._createWidget (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:6645)
    at new t.(anonymous function).(anonymous function) (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4063)
    at HTMLDivElement.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery-2.2.4.min.js:2)

For rendering server images atm we can use a loadScript to start coverflow at right time. Looking for ways to bypass that too.

for (let index = 0; index < data.length; index++) {
            $('#preview-coverflow').append("<img class='cover' src='" + data[index] + "' />");

            if (data.length - 1 === index) {
                loadScript("scripts/jquery-coverflow.js", createCoverflow);
            }
        }

/**
 *  Simple node.js style script loader for modern browsers
 **/
function loadScript(src, cb) {
    var script = document.createElement('script');
    script.async = true;
    script.src = src;
    script.onerror = function () {
        cb(new Error("Failed to load" + src));
    };

    script.onload = function () {
        cb();
    };

    document.getElementsByTagName("head")[0].appendChild(script);
}
vanderlee commented