Redirect using JS after event

Discussion in 'Programming' started by Galaxias, May 20, 2016.

  1. Right, so here is my code:

    Code (Text):

    /* Swipe detection */
    function swipedetect(el, callback){
        var touchsurface = el,
        swipedir,
        startX,
        startY,
        distX,
        distY,
        threshold = 150, //required min distance traveled to be considered swipe
        restraint = 100, // maximum distance allowed at the same time in perpendicular direction
        allowedTime = 300, // maximum time allowed to travel that distance
        elapsedTime,
        startTime,
        handleswipe = callback || function(swipedir){}
        touchsurface.addEventListener('touchstart', function(e){
            var touchobj = e.changedTouches[0]
            swipedir = 'none'
            dist = 0
            startX = touchobj.pageX
            startY = touchobj.pageY
            startTime = new Date().getTime() // record time when finger first makes contact with surface
            e.preventDefault()
        }, false)
        touchsurface.addEventListener('touchmove', function(e){
            e.preventDefault() // prevent scrolling when inside DIV
        }, false)
        touchsurface.addEventListener('touchend', function(e){
            var touchobj = e.changedTouches[0]
            distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
            distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
            elapsedTime = new Date().getTime() - startTime // get time elapsed
            if (elapsedTime <= allowedTime){ // first condition for awipe met
                if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
                    swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
                }
                else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
                    swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
                }
            }
            handleswipe(swipedir)
            e.preventDefault()
        }, false)
    }
    //USAGE:
    /*
    var el = document.getElementById('someel')
    swipedetect(el, function(swipedir){
        swipedir contains either "none", "left", "right", "top", or "down"
        if (swipedir =='left')
            alert('You just swiped left!')
    })
    */

    window.addEventListener('load', function(){

        var touchsurface = document.getElementById('touchsurface'),
            startX,
            startY,
            dist,
            threshold = 150, //required min distance traveled to be considered swipe
            allowedTime = 200, // maximum time allowed to travel that distance
            elapsedTime,
            startTime

        function handleswipe(isrightswipe){
            if (isrightswipe)
                touchsurface.innerHTML = 'Congrats, you\'ve made a <span style="color:red">right swipe!</span>'
            else{
                touchsurface.innerHTML = 'Condition for right swipe not met yet'
            }
        }

        touchsurface.addEventListener('touchstart', function(e){
            touchsurface.innerHTML = ''
            var touchobj = e.changedTouches[0]
            dist = 0
            startX = touchobj.pageX
            startY = touchobj.pageY
            startTime = new Date().getTime() // record time when finger first makes contact with surface
            e.preventDefault()
        }, false)

        touchsurface.addEventListener('touchmove', function(e){
            e.preventDefault() // prevent scrolling when inside DIV
        }, false)

        touchsurface.addEventListener('touchend', function(e){
            var touchobj = e.changedTouches[0]
            dist = touchobj.pageX - startX // get total dist traveled by finger while in contact with surface
            elapsedTime = new Date().getTime() - startTime // get time elapsed
            // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100
            var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100)
            handleswipe(swiperightBol)
            e.preventDefault()
        }, false)

    }, false) // end window.onload

    window.addEventListener('load', function(){
        var el = document.getElementById('touchsurface2')
        var inner = document.getElementById('inner')
        var hidetimer = null
        swipedetect(el, function(swipedir){
            if (swipedir != 'none'){
                clearTimeout(hidetimer)
                alert('Swiped! ');
                Redirect();
                var bgimage = swipedir + 'images/swipeasset.gif' // naming convention is "leftarrow.png", "rightarrow.png" etc
                inner.style.background = 'transparent url(' + bgimage + ') center center no-repeat'
                hidetimer = setTimeout(function(){ // reset background image after 1 second
                    inner.style.background = ''
                }, 1000)
            }
        })
    }, false)
     
    After the swipe has been detected, I need the page to be redirected.

    How do I do this? I tried simply using `window.location.replace` but that doesn't work.
     
  2.  
  3. Never heard of using window.location.replace, plus the post I linked advises to simply set the property.

    Since things like IE exist which just love breaking trends I must ask, do you know if window.location.replace is actually compatible with your browser?
     
    • Agree Agree x 1
  4. Did you even visit the link @Mesmerised posted? You can simply do:
    Code (Javascript):
    window.location = "http://some.new/url";
    :p
     
  5. `window.location` and `window.location.replace` are essentially the same thing.
     
  6. This needs to work in all mobile browsers. Currently using Safari on iOS 9.
     
  7. Ok, what I did:

    Code (Text):

                document.write('<div class="roundercorner"><iframe src="../overgang/index.html" style="border: 0; width: 100%; height: 100%; border-radius: 30px;">Error</iframe></div>');
     
    This opens the iFrame, however we use a lot of redirects. The redirect isn't done within an iFrame which makes this unusable...

    What should I do?
     
    #9 Galaxias, May 21, 2016
    Last edited: May 21, 2016