Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

horizontal/vertical slide transition themes problem #167

Open
rebendajirijr opened this issue Jul 30, 2014 · 4 comments
Open

horizontal/vertical slide transition themes problem #167

rebendajirijr opened this issue Jul 30, 2014 · 4 comments

Comments

@rebendajirijr
Copy link

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
Copy link
Owner

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

@rebendajirijr
Copy link
Author

@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
Copy link
Owner

@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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants