Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Smooth Navigational Menu (v1.51) on Android Tablet

  1. #1
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smooth Navigational Menu (v1.51) on Android Tablet

    1) Script Title: Smooth Navigational Menu (v1.51)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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'):

    ddsmoothmenu-sep-shadow-sep-headers-uniwhile.js

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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'):

    ddsmoothmenu.css

    ddsmoothmenu-v.css

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

    Name:  down_over.gif
Views: 231
Size:  850 Bytes

    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:

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Here's that right_over.gif:

    Name:  right_over.gif
Views: 234
Size:  170 Bytes

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    .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.

  7. #7
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Another bug: touching outside the menu does not hide the visible sub-menu on iPad. Works in other browsers and Android.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    ddsmoothmenu-sep-shadow-sep-headers-uniwhile.js

    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.

    Edit: 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:

    ddsmoothmenu-sep-shadow-sep-headers-uniwhile-itouch.js

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 02-07-2013 at 03:09 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Feb 2013
    Location
    Texas, US
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Help with Smooth Navigational Menu (v1.51)
    By anasttin in forum Dynamic Drive scripts help
    Replies: 17
    Last Post: 12-28-2012, 10:47 PM
  2. Smooth Navigational Menu (v1.5) + IE6
    By Marilex in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-14-2011, 04:26 AM
  3. Smooth Navigational Menu
    By answerhtink in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-22-2010, 05:50 PM
  4. Smooth Navigational Menu
    By nickols in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-11-2009, 02:12 PM
  5. Smooth Navigational Menu (v1.01)
    By Marc777 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 12-15-2008, 10:06 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •