Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Drop down menu not working on touch screen device ipad

    Hi developers

    Needing some help.

    My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse.

    I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices?

    The code I am using is:
    <script type="text/javascript"><!--
    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    // open hidden layer
    function mopen(id)
    {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    }
    // close showed layer
    function mclose()
    {
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }

    // go close timer
    function mclosetime()
    {
    closetimer = window.setTimeout(mclose, timeout);
    }

    // cancel close timer
    function mcancelclosetime()
    {
    if(closetimer)
    {
    window.clearTimeout(closetimer);
    closetimer = null;
    }
    }

    // close layer when click-out
    document.onclick = mclose;

    //--></script>

    Which drives the following html:

    <ul id="links">

    <li><a href="whats_new/whats_new.html">what's new</a></li>

    <li><a href="#"

    onmouseover="mopen('m1')"

    onmouseout="mclosetime()">clothing</a>

    <div id="m1"

    onmouseover="mcancelclosetime()"

    onmouseout="mclosetime()">

    <a href="clothing/clothing_page1.html">clothing</a>

    </div>

    </li>

    <li><a href="#"

    onmouseover="mopen('m2')"

    onmouseout="mclosetime()">accessories</a>

    <div id="m2"

    onmouseover="mcancelclosetime()"

    onmouseout="mclosetime()">

    <a href="bags/bags_page1.html">bags</a>

    <a href="jewellery/jewellery_page1.html">jewellery</a>

    </div>

    </li>
    </ul>

    Any suggestions would be much appreciated.

    Thank you.

    Nonye

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    You will need to create a second menu style for the touchpad devices.
    Means maintaining 2 versions of your pages (bummer! ).

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Oh really....I've heard that I could possibly incorporate a plug in to the website....is this not the case?
    Thanks for replying
    Nonye

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by iBall View Post
    What I normally do is make the menu items also clickable (using html) so that users will still be able to use the menu if using ipads etc. that do not support hover events.

    You shouldn't normally need multiple versions of the website.
    Can you give a brief example of a page that handles both the hover (for non-mobile devices)
    and button clicks on the devices that do not support hover events at the same time?

  • Users who have thanked jmrker for this post:

    nonye (05-10-2012)

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by iBall View Post
    What I normally do is make the menu items also clickable (using html) so that users will still be able to use the menu if using ipads etc. that do not support hover events.

    You shouldn't normally need multiple versions of the website.
    Hi iball,
    Thanks for responding.
    Could you briefly describe how you make the menu items clickable using html. I'm assuming by making the menu item clickable this would in turn activate the drop down menu?
    Thanks,
    Nonye

  • #6
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hi Iball,

    Thanks for providing an example . Gonna modify the styling and do some testing this weekend on the ipad. Will let you know how I get on.
    Big and fingers crossed!
    Nonye

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by nonye View Post
    Hi Iball,

    Thanks for providing an example . Gonna modify the styling and do some testing this weekend on the ipad. Will let you know how I get on.
    Big and fingers crossed!
    Nonye
    Works OK on the iPad. I would recommend the following changes. It helped with my stubby fingers.
    Code:
    body { font-size:2em; }
    li{
     list-style-type: none;
     width: 100%;
    }
    Hovers fine on desktop until you click a few times. Then it gets confused.
    Does not act the same between devices, but I have not experimented with code provided in previous post #7.

    Also, the font size will need adjustments between the two devices,
    but you could solve that with some more CSS "media" definitions.

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hahaha......I'm sure you're fingers aren't that stubby! Yes, I'll make the minor adjustments required....and ensure that it's also compatible with android software and we're good to go. Thanks again


  •  

    Posting Permissions

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