imakewebthings / deck.js

Modern HTML Presentations

Home Page:http://imakewebthings.com/deck.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

horizontal/vertical slide transition themes problem

rebendajirijr opened this issue · comments

If I use $.deck('go', ...) inside beforeChange event, the css transition fails to complete. CSS classes like deck-current, deck-next, etc. are assigned properly, but for example If I go to first slide from third slide (basically upon a page load, because I've made simple extension which disables slides skipping, so If user enters e.g. #slide-2 using URL I check whether he can go there already, otherwise he is 'redirected' to first slide), current slide is the first one but i still see the third slide html (I think it could be some kind of problem with transition or FF itself - I'm using FF 30.0, in IE it works like a charm. Other CSS transition themes (fade/none) work perfectly.

@rebendajirijr Do you have a page you could post somewhere?

@imakewebthings I can post the extension code:

(function($, undefined) {
    var $document = $(document);

    $.extend(true, $.deck.defaults, {
        skip: {
            enableTo: null
        }
    });

    var initSkip = function () {
        var lastEnabledSlide = null;
        var options = $.deck('getOptions');
        var slides = $.deck('getSlides');

        if (options.skip.enableTo === null) {
            options.skip.enableTo = slides.length - 1;
        }

        $.each(slides, function (i, $slide) {
            if (i <= options.skip.enableTo) {
                lastEnabledSlide = i;
            }
        });

        $document.on('deck.change', function (event, from, to) {
            if (lastEnabledSlide === to) {
                lastEnabledSlide = to + 1;
            }
        });

        $document.on('deck.beforeChange', function (event, from, to) {
            if (to >= lastEnabledSlide + 1) {
                event.preventDefault();
                $.deck('go', from);
                return false;
            }
            return true;
        });
    };

    $document.bind('deck.init', function () {
        initSkip();
    });
})(jQuery);

I think the problem lies between CSS and FF, because in IE, transition works correctly.

@rebendajirijr I'm not sure I get the point of the $.deck('go', from) inside the beforeChange handler. You are already calling event.preventDefault() which prevents the change to to from ever happening. The go call to from would be redundant.

It's hard for me to debug this visual problem without seeing it. Thank you for posting the code though. If you find the time I would love to look at a reduced example case.

@imakewebthings I've added $.deck('go', from) because Ithe slide hash in URL does not update otherwise. Ohh, I've tried it again without using this method and it works just like expected, but slide hash remains the same - is there any simple way to update it using existing code?