Full Screen Mobile Menu - links don't work when drag activated

1) Script Title: Full Screen Mobile Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...screenmenu.htm

3) Describe problem: The problem is first described here: http://www.dynamicdrive.com/forums/s...780#post310780 and confirmed here: http://fofwebdesign.co.uk/template/_...ullscreenmenu/

When more links are added to the menu list, to the point where the menu needs to be scrolled/dragged, ALL links become inactive via a single tap, although the "tap and hold to open in a new window" behaviour is present.

I've only been able to test a little bit on iPhone 5S. Unfortunately I am snowed in and currently unable to get to a desktop computer to compare.

Can confirm. I have a touchscreen laptop (HP ENVY 15 X360) where I can click the links using my mouse but when I try to use the touchscreen and tap the links nothing happens. I used Chrome 40 to test.

Ok, please try the below modified .js file- does it fix all issues for you?

I'm really sorry ddadmin but I'm still snowed in and stuck on iPhone, so I can't download the file. Would it be possible to post the contents into code tags so that I can copy and paste direct from a forum post?

Certainly, here it is:

Code:

---

/*Full screen mobile menu By Dynamic Drive
* Created: Dec 14th', 2014 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

(function(w, $){

        var defaults = {
                animatediconclass: 'animateddrawer' // class of designated main toggle menu icon on the page (will receive ".open" class while menu is open
        }

        w.fullscreenmenu = function(options){       
                var s = $.extend({}, defaults, options)
               
                var $body = $(document.body)
                var $menu = null
                var $navcontent = null
                var $toggler = null
                var state = 'closed'
                var mousemoveevtstr = 'mousemove.dragstart' + s.menuid + ' touchmove.dragstart' + s.menuid
                var mouseupevtstr= 'mouseup.dragend' + s.menuid + ' touchend.dragend' + s.menuid
                var dragdist

                if (s.source.charAt(0) == '#'){ // inline menu (id)?
                        init( $(s.source) )
                }
                else{ // ajax content
                        loadfile(s.source, init)
                }

                function loadfile(url, callback){
                        $.ajax({
                                url: url,
                                dataType: 'html',
                                error:function(ajaxrequest){
                                        alert('Error fetching content.<br />Server Response: '+ajaxrequest.responseText + '\n\n'
                                                                        + 'In Chrome and IE, page has to be run online in order for Ajax file to be fetched properly'
                                                        )
                                },
                                success:function(content){
                                        var $content = $(content)
                                        $content.prependTo(document.body)
                                        callback( $content )
                                }
                        })
                }

                this.togglemenu = function(action){
                        if ($navcontent === null)
                                return
                        if (action == 'open' || (typeof action == 'undefined' && state == 'closed')){
                                $body.css({overflow: 'hidden'})
                                $navcontent.css({top:0})
                                $menu.addClass('open')
                                $toggler.addClass('open')
                                state = 'open'
                        }
                        else if (action == 'close' || (typeof action == 'undefined' && state == 'open')){
                                $body.css({overflow: 'auto'})
                                $menu.removeClass('open')
                                $toggler.removeClass('open')
                                state = 'closed'
                        }
                }

                function init(menuref){
                        $menu = (typeof menuref == 'string')? $('#' + s.menuref) : menuref
                        $menu.prependTo(document.body)
                        $navcontent = $menu.find('.navcontent:eq(0)').css({top:0})
                        $toggler = $('.' + s.animatediconclass)

                  $menu.on('mousedown touchstart', function(e){ // set up swipe/ mouse drag behavior
                                var menuheight = $menu.height()
                                var navcontentheight = $navcontent.get(0).scrollHeight
                                var heightdiff = navcontentheight - menuheight
                                if (heightdiff <= 0) // if nav content height <= parent manu's height, no need to enable vertical dragging
                                        return
                          var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
                                var mousey = e.pageY
                                var contenttop = parseInt( $navcontent.css('top') )
                                var clicktime = new Date().getTime()
                                dragdist = 0
                          $menu.on(mousemoveevtstr, function(e){
                                  var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
                                  dragdist=e.pageY-mousey //distance moved vertically
                                        var newtopvalue = contenttop + dragdist
                                        newtopvalue = (newtopvalue > 0)? 0 : (newtopvalue < -heightdiff)? -heightdiff : newtopvalue // set upper and lower boundaries for new top value
                                        $navcontent.css({top: newtopvalue})
                                        if (e.type == "mousemove")
                                          return false //cancel default drag action
                          })
                          $menu.on('mouseup touchend', function(e){
                                  $menu.unbind(mousemoveevtstr)
                                        if (e.type == "mouseup")
                                                return false
                          })
                                if (e.type == "mousedown")
                                  return false //cancel default drag action
                  })
       
                        $menu.on('click', function(e){
                                if (Math.abs(dragdist) > 0 && e.target.tagName == 'A') // cancel click on link if dragdist is greater than 0
                                        return false
                        })

                }
        }


}) (window, jQuery)

---

Yes, thank you - the links now work.

The scrolling isn't as smooth in iPhone now though and there's a new behaviour where I drag the menu upwards (it moves more slowly than before) and the bottom of the screen pulls ups too - hopefully I can attach an image below to show you...

http://fofwebdesign.co.uk/template/_...menu/image.jpg

EDIT - just to describe the "pull up" behaviour a little better; I drag the menu upwards but it feels a little "sticky" or "resistant", taking more upwards swipes to scroll the list upwards and reveal more items. During each swipe up, the bottom of the screen (an empty grey nothingness, rather than the white web page) pulls upwards too and momentarily hides the lower items before retracting back to the bottom of the screen. It is a similar behaviour, with the grey nothingness, that usually indicates the end of a normal web page. Hope that helps.

What if you comment out the line below:

Code:

---

                                //if (e.type == "mousemove")
                                  return false //cancel default drag action

---

Bump in case you missed the reply.

Yes! Perfect! That's sorted it :)

No "pull up" anymore.

Ok I've updated the js file on the download page for this: http://www.dynamicdrive.com/dynamici...screenmenu.htm It looks like something has changed in the latest version of Chrome causing the issue, since I could have sworn I tested the menu in it when the script was first released without issues.