PDA

View Full Version : Smooth Navigational Menu (v1.51) on Android Tablet



mclaborn
02-05-2013, 10:03 PM
1) Script Title: Smooth Navigational Menu (v1.51)

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

3) Describe problem:
Trying to get this to work propertly on an Android tablet. On the iPad, when I touch a top-level menu item, it only expands the menu sub-items. On the Android tablet (built in browser) when I touch the top-level menu item, it expands the sub-items but also navigates immediately to the top-level link address instead of waiting for a sub-item to be touched. How can I make this work?

jscheuer1
02-06-2013, 01:02 AM
The css will probably have to be updated and I can help you with that if this functions as desired, try this unofficial update (right click and 'Save As'):

4919

It has a bunch of bug fixes and some extra features. Hopefully it will take care of the issue for you.

mclaborn
02-06-2013, 02:33 PM
Thanks John. It does fix the problem on the Android tablet!

I noticed that my down arrorws next to the top level menus are not showing up. Haven't had time to investigate yet. I'll do more testing on various browsers and devices and post more results later.

jscheuer1
02-06-2013, 05:21 PM
OK, that's the css differences I was talking about. I moved most of the functionality of theming to the css. So a few selectors and how they're used have changed a little. The scripted theming (customtheme property in the on page init) still works, but I would suggest that if you're using it, switch to all css. You still configure the arrows in the script. Their positioning is in the new css files, but shouldn't need to be changed. Without that (missing in the old css files) I can understand why you're having problems with the arrows. Colors may be different than you're using. The new css files are well commented. So you should be able to see what is what, any questions though, just ask. First backup the ones you have, just in case there's anything in them you might want to reference later. Here are the updated ones (right click and 'Save As'):

4921

4922

There is an option for a hover change of the arrow images. If you use it, you will need the over images (or you can make your own to suit your theme, these go with the css I'm giving you):

4923

The right_over.gif arrow I will have to attach to the next message because only 3 files are allowed per post.

If you're not using this feature, don't worry about it. To turn it on in the on page ddsmoothmenu.init call use this highlighted property:


ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" defaults to Horizontal
arrowswap: true,
classname: 'ddsmoothmenu', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

The over images need not be configured anywhere. The script takes the filename and location of the normal arrows and adds _over to the filename. So if whatever.gif is an arrow image, the script would look for whatever_over.gif as the over image if this feature is turned on. The script adds :hover css to the page automatically, so there's a chance it will work on touch devices. If not, hopefully it will degrade well. If not, let me know and I can disable it for touch devices.

BTW, the default method for these menus is now click to open/close. If you want non-touch devices to still do hover, you need to set it in the on page init:


ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" defaults to Horizontal
arrowswap: true,
method: 'hover', //'hover' (mouseover/out) or 'toggle' (click), defaults to 'toggle'
classname: 'ddsmoothmenu', //class added to menu's outer DIV
contentsource: ["smoothcontainer", "external.htm"]
})

The script will detect touch devices and switch to 'toggle', which is click for them.

jscheuer1
02-06-2013, 05:23 PM
Here's that right_over.gif:

4924

Please read my previous message for details on it and on necessary updates for the css files which are attached to the previous message as well.

mclaborn
02-06-2013, 08:30 PM
John - it is working well so far. I'm not done testing yet, so may have some questions later.

Was your intent that we custom the CSS files directly, or add overrides to the styles elsewhere, e.g. in our own style sheet? For example


.ddsmoothmenu ul li a.selected {
background: lightblue !important;
color: navy !important;
}


Makes it hard to change the colors of the selected menu item with overrides. If I have a vote, I would vote to remove the !important so I can override.

mclaborn
02-06-2013, 08:59 PM
Bug report on this version: If the top level menu wraps to two lines, clicking one of the menu items on the top line causes the submenu to appear, but the submenu is behind the 2nd line of the main menu. Seems like the submenu needs a higher z-order so it will show over the 2nd line of the main menu.

mclaborn
02-06-2013, 09:23 PM
Another bug: touching outside the menu does not hide the visible sub-menu on iPad. Works in other browsers and Android.

jscheuer1
02-07-2013, 04:12 AM
Yes my intent was that we customize the css directly. However, if you want to keep the css file unchanged and add your own modifications in another stylesheet, a property value with the !important keyword can be easily overridden by another later one for the exact same selector if that later one also uses the !important keyword for its property value.

BTW - !important was only used to overcome a css bug in IE 8 or 7 (forget which) and earlier whereby without it, the .ddsmoothmenu ul li a.selected was not overriding the .ddsmoothmenu ul li a selector. I believe there may be another way of overcoming it. However, as I say, if you choose to override it, just add the !important keyword to your style properties for that selector.

And the .ddsmoothmenu ul li a.selected only comes into play when a menu item is active but no longer being hovered, as is the case when it triggers a drop down and the mouse then moves over that drop down.

I've fixed the bug of a wrapped main menu bleeding through drop downs from the unwrapped portion (same filename, so be careful):

4925

In it I also take a stab at fixing the issue you mentioned with ipad. I have no such device to test on. However, I'm guessing that adding window to document as the elements to look for clicks on that are outside the menus may fix that. If not, I will have to try adding an EventListener for touchstart or whatever it is in ipad.

Now I'll assume for now it would be the same on iphone, and that it's not required for any android products. But that will only come into play if adding window hasn't taken care of it.

After adding this updated script - The browser cache may need to be cleared and/or the page refreshed to see changes.

Just in case, I decided to go ahead and research and do a version with a document touchstart event for ipad and iphone.

So if the above doesn't fix the ipad issue of tapping in an empty area outside the menu not closing the open sub menus, try this version:

4926

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

mclaborn
02-07-2013, 03:43 PM
Re: css !important: got it - I'll override with !important.

Fix confirmed for the bleed through problem.

iPad still not working. I can work with you in testing this as needed. If you prefer to IM or call for this, let me know.

jscheuer1
02-07-2013, 04:11 PM
I just edited my previous post to add a version using document touchstart. It might fix that ipad issue, here it is again:

4927

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

mclaborn
02-07-2013, 04:29 PM
Success! (Mitch does the happy dance.)

Thanks for your diligence on this.

ion
03-23-2013, 04:22 PM
I just edited my previous post to add a version using document touchstart. It might fix that ipad issue, here it is again:

4927

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


Thanks for the info sir.

jscheuer1
03-23-2013, 05:13 PM
Since my last post in this thread, Dynamic Drive has officially adopted my new code for this menu. It's a little different than what's put forth in this thread, less bugs and perhaps different defaults, perhaps new options, different css, see:

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

for all the details on the latest official version. I recommend updating to it. It automatically detects touch devices and switches to a click/tap activated menu for them or can be set to use click/tap for all browsers, which I think is really a better way.

If you have any questions on the new version, please start a new thread, I'm closing this one.