imakewebthings / deck.js

Modern HTML Presentations
http://imakewebthings.com/deck.js
MIT License
5.42k stars 614 forks source link

horizontal/vertical slide transition themes problem #167

Open rebendajirijr opened 10 years ago

rebendajirijr commented 10 years ago

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.

imakewebthings commented 10 years ago

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

rebendajirijr commented 10 years ago

@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.

imakewebthings commented 10 years ago

@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.

rebendajirijr commented 10 years ago

@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?