CODEWITHSUNDEEP
jqueryhtmlcssmobileswipe
marc_s
marc_s

Reputation: 1047

Swipe gesture between html files

I would like to integrate swipe gestures to entire webpage. Trigger will be the whole wrapper div, target will be another html file. On each html I would like to set html links for swipe left and right. There is no need for up and down.

I've seen jQuery mobile development, but no luck with that :(

Upvotes: 0

Views: 1630

Answers (2)

carsol
carsol

Reputation: 353

Not sure if I'm too late but to answer the answer you would have to do the following:

  1. Load each html page via ajax into certain divs. jQuery $.ajax() does the trick just fine
  2. Using SwipeJS you can initiate the swipe animation AFTER the $.ajax loads everything.

There really isn't a need to remade a swipe feature, SwipeJS is great. Make sure you use SwipeJS html structure and just load into each swipe-able div. Hoped that answered it.

Upvotes: 1

Brian Emilius
Brian Emilius

Reputation: 729

This is a touchscreen drag/swipe fix I use for some of my applications.

(function(b)
{
b.support.touch = "ontouchend" in document;
if (!b.support.touch)
{
    return;
}
var c = b.ui.mouse.prototype,
    e = c._mouseInit,
    a;
function d(g, h)
{
    if (g.originalEvent.touches.length > 1)
    {
        return;
    }
    g.preventDefault();
    var i = g.originalEvent.changedTouches[0],
        f = document.createEvent("MouseEvents");
    f.initMouseEvent(h, true, true, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, false, false, false, false, 0, null);
    g.target.dispatchEvent(f);
}
c._touchStart = function(g)
{
    var f = this;
    if (a || !f._mouseCapture(g.originalEvent.changedTouches[0]))
    {
        return;
    }
    a = true;
    f._touchMoved = false;
    d(g, "mouseover");
    d(g, "mousemove");
    d(g, "mousedown");
};
c._touchMove = function(f)
{
    if (!a)
    {
        return;
    }
    this._touchMoved = true;
    d(f, "mousemove");
};
c._touchEnd = function(f)
{
    if (!a)
    {
        return;
    }
    d(f, "mouseup");
    d(f, "mouseout");
    if (!this._touchMoved)
    {
        d(f, "click");
    }
    a = false;
};
c._mouseInit = function()
{
    var f = this;
    f.element.bind("touchstart", b.proxy(f, "_touchStart")).bind("touchmove", b.proxy(f, "_touchMove")).bind("touchend", b.proxy(f, "_touchEnd"));
    e.call(f);
};
})(jQuery);

As Kevin wrote, you could use ajax to load the two other pages you need ready and then animate them to shuffle in, using a swipe trigger.

Upvotes: 1

Related Questions