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

01-29-2015, 11:21 PM
1) Script Title: Full Screen Mobile Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/fullscreenmenu.htm

3) Describe problem: The problem is first described here: http://www.dynamicdrive.com/forums/showthread.php?77914-Full-screen-mobile-menu&p=310780#post310780 and confirmed here: http://fofwebdesign.co.uk/template/_testing/fullscreenmenu/

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.

01-30-2015, 04:34 AM
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.

01-30-2015, 07:29 AM
Ok, please try the below modified .js file- does it fix all issues for you?

01-30-2015, 07:43 AM
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?

01-30-2015, 07:50 AM
Certainly, here it is:

/*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){
url: url,
dataType: 'html',
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'
var $content = $(content)
callback( $content )

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

function init(menuref){
$menu = (typeof menuref == 'string')? $('#' + s.menuref) : menuref
$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
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){
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)

01-30-2015, 08:00 AM
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...


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.

01-30-2015, 08:04 AM
What if you comment out the line below:

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

01-30-2015, 08:16 AM
Bump in case you missed the reply.

01-30-2015, 08:21 AM
Yes! Perfect! That's sorted it :)

No "pull up" anymore.

01-30-2015, 08:26 AM
Ok I've updated the js file on the download page for this: http://www.dynamicdrive.com/dynamicindex1/fullscreenmenu.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.

01-30-2015, 08:34 AM
No problem - Sometimes I think that browser vendors move the goalposts just for fun!

Thank you for fixing so quickly! :)

01-30-2015, 08:37 AM
Thanks for your help in the debugging process :)

01-30-2015, 08:41 AM
It makes a nice change for me. Normally I'm part of the bugging process (or so my better half tells me). LOL