Smooth Menu problem with Chrome

**ocpxc02** · 03-11-2016, 04:22 AM

http://www.dynamicdrive.com/dynamici...smoothmenu.htm

I've had this menu installed for quite some time and was just informed that it is not working properly when viewed in Chrome (at least not the latest version). I tried installing version 3 of the script (js and both css files) and there was no change in behavior. We are using the vertical menu with default hover functionality. In FF and IE, the hover works just fine. However, in Chrome, the sub menus do not fly out as expected. Any assistance would be greatly appreciated.

Here is a link to our website: www.trainsetsonly.com

Thanks,
Paul

**jscheuer1** · 03-11-2016, 05:28 PM

Switch to click activation. You need it for mobile devices anyway.

But, that might not fix it. You have two jQuery versions on the page as well as quite a number of scripts. Chrome is reporting errors in both jQuery versions. Perhaps if you upgraded to jQuery 1.11.x and got reid of the other two, that might fix it.

But, there could be problems with other scripts then.

And click is still preferable to mouseover activation due to the prevalence of mobile/touch devices.

**jscheuer1** · 03-11-2016, 05:48 PM

OK, that seems to fix it, but - it becomes a click automatically, which is odd (still mouseover in Firefox, one would assume IE as well). Just change here:

Code:

<link rel="stylesheet" type="text/css" href="smooth/ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="smooth/ddsmoothmenu.js">
/*
Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
This notice MUST stay intact for legal use
Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
*/
</script>

to:

Code:

<link rel="stylesheet" type="text/css" href="smooth/ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="smooth/ddsmoothmenu.js">
/*
Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
This notice MUST stay intact for legal use
Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
*/
</script>

That will load the latest jQuery 1 series script (1.11.1 - which I think is the last in the 1 series, though they may make more).

The page may need to be refreshed, and/or the browser cache cleared to see changes.

**ocpxc02** · 03-11-2016, 06:47 PM

Thanks. I made the suggested change and see the results your describe. However, we would still prefer the hover functionality that's present in the other browsers. The problem with how Chrome is handling this is that we can no longer navigate to one of the higher level categories by clicking on it. In FF and IE, hover will fly out any subcategories. Clicking on a category will navigate to the actual category page. Our website presents a totally different navigation method to mobile devices.

**ocpxc02** · 03-14-2016, 03:40 PM

I thought I had replied last week. If it's still with the moderator, please disregard this message. If not, please advise and I'll resend.

**jscheuer1** · 03-14-2016, 04:40 PM

Yep, the board does that (moderates posts) automatically sometimes, usually it's spam. Often though (like in this case), it's just annoying.

OK, well you can override touch detection in the script then, that should do it. In the ddsmoothmenu.js file, about line 61 on your copy we see:

Code:

detecttouch: !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),

Change that to:

Code:

detecttouch: false, //!!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),

By way of explanation, Chrome (and some others) are touch capable via various emulations and depending upon what device they run on. So, sometimes will test positive even with no touch input device. Touch defaults to click for this menu. By overriding that, all will be forced to have mouseover. OK I guess if you have a separate menu for mobile/touch.

**ocpxc02** · 03-15-2016, 12:32 AM

Thanks. That does the trick. I do see a benefit in having it detect a touch screen for iPad and other larger screen touch devices that see use the full screen version of our website. Maybe I'll do a little digging to see if this is possible. I know our shopping cart software can determine this, so I'm assuming jscript can as well. I'm just not very jscript savvy. I appreciate your help in resolving our original issue.

Paul

**jscheuer1** · 03-15-2016, 01:17 AM

Well, that was, and that's not my script, I just updated it for DD because I took an interest, my first foray into touch detection. I think I was overzealous. In most cases just:

Code:

!!('ontouchstart' in window)

is sufficient and probably wouldn't give the false positive you were having there. But now there are other problems or at least issues because we have hybrid devices that have both touch screens and mice. But as long as your click/touch menu is well enough thought out, that shouldn't be a problem. If you have a click only menu to begin with though, there never is a problem.