Flip card extention for mobile version

Support
#1

Hello there,

I’m having a lot of fun (again) working with your theme, thanks! But I do have a question, is there a way to let the “card” extension flip automatically on the mobile version just like it does on the desktop version? Now you have to “click” the cards seperately for them to turn and I think not all of my future customers will understand that they have to click on them. So would be great to have them flip automatically when they scroll into position.

the website I’m working on is on www.kitesurfspot-vietnam.com

Thanks in advance!

#2

Hi there,

This needs a great amount of customization and code development which is way out of the support scope. I managed to put together a code that somehow does the customization that you like but for all viewports and not only mobile devices. You can add the code below to X > Launch > Options > JS:

jQuery(document).ready(function($) {

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

$('.x-card-outer').each(function() {
    var theItem = jQuery(this);
    var clickOnce = false;
        $(window).scroll(function() {

        var isElementInView = Utils.isElementInView(theItem, false);

        if (isElementInView && !clickOnce) {
            theItem.trigger('click');
            clickOnce = true;
        } else {
            console.log('out of view');
        }

        });
});


});

You will need to hire a developer or continue the work yourself for follow-up customization regarding this issue.

Thank you for your understanding.

#3

Hello Christopher, thanks a lot for the effort and ofcourse I understand but… (sorry :wink: )
What I am looking for is to let the cards behave the same as they do on the desktop version. So on the desktop version the cards flip as soon as you hover over them with the cursor. I can imagine (but I’m not a programmer) that the cards can behave the same on the mobile version without too much customization. If I’m wrong and this is not possible in a easy way, is there maybe than a possibility to build in a delay to let the cards on turns on the desktop version? Now they flip simultaneously as soon as they appear. Thanks in advance again.

#4

Hi there,

You can use the code below to disable the code for desktop devices and it will work only for touch devices:

jQuery(document).ready(function($) {

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    function Utils() {

    }

    Utils.prototype = {
        constructor: Utils,
        isElementInView: function(element, fullyInView) {
            var pageTop = $(window).scrollTop();
            var pageBottom = pageTop + $(window).height();
            var elementTop = $(element).offset().top;
            var elementBottom = elementTop + $(element).height();

            if (fullyInView === true) {
                return ((pageTop < elementTop) && (pageBottom > elementBottom));
            } else {
                return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
            }
        }
    };

    var Utils = new Utils();

    $('.x-card-outer').each(function() {
        if (!$(this).hasClass('no-touchevents')) {
            var theItem = jQuery(this);
            var clickOnce = false;
            $(window).scroll(function() {

                var isElementInView = Utils.isElementInView(theItem, false);

                if (isElementInView && !clickOnce) {
                    theItem.trigger('click');
                    clickOnce = true;
                } else {
                    console.log('out of view');
                }

            });
        }
    });


});

There is no Hover effect in touch devices such as tablets and phones.

Thank you.

#5

Thank you very much, this is perfect!

With kind regards,

Jeroen.

#6

Hello again, I just added the new given code but it doesn’t seem to work properly. Everything is back to standard again. So the desktop version works the way I would like but now on the mobile version nothing happens, only if I touch the cards.
Hope you can help me out.

Thanks!

#7

Hi there,

The code is working, but it’s a bit buggy when detecting which is the VIEW. Should the view be treated as the entire screen or just a portion in the middle?

The thing is, you’re flipping the card upon view which means the front of the card isn’t viewable from your visitors at all. Every time they hit the view area, it flips no time for them to even view the front.

Hence, there is no point in adding complex code, just make the card shows the back card in page load for mobile. Should we do that?

Plus, the card also changes the size, hence the VIEW coordinates and dimension assigned by the code that tells the element if is IN VIEW could fail.

Thanks.

#8

Hello, I think I will just turn back to the standard properties than. But thank you for the help and effort.

With kind regards,

Jeroen.

#9

You’re welcome!
We’re just glad we were able to help you out.