PDA

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



Beverleyh
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.

FrickenTrevor
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.

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

Beverleyh
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?

ddadmin
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){
$.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)

Beverleyh
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...

http://fofwebdesign.co.uk/template/_testing/fullscreenmenu/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.

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


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

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

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

No "pull up" anymore.

ddadmin
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.

Beverleyh
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! :)

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

Beverleyh
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