Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Alter 'hover' behavior for a tablet

  1. #1
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Alter 'hover' behavior for a tablet

    1) Script Title: jQuery Multi Level CSS Menu #2

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    3) Describe problem: This script is used in a Wordpress theme I am using to develop a new web site, and it controls the primary navigation menu on each page. The script & menu works fine when viewed on a desktop computer. However, when viewed on a 7 inch tablet there is no mouse with which to 'hover' over a top level heading and activate the drop-down sub-menu. You have to 'press and hold' the heading for about 2 seconds before the sub-menu appears. When it does, the sub-menu stays there until you press something again. If you just press, then no sub-menu appears and you get taken to the linked page of the heading.

    The problem is that it is not intuitive to a tablet user that you have to 'press and hold' to get a sub-menu to display, especially for 2 seconds. I have seen some web sites with similar menu functionality in desktop mode to the default operation of this script, but when in mobile mode a sub-menu appears instantly/automatically after pressing the heading (and remains visible until the heading redirects if there's a linked page on the top level). In other words, in mobile mode, a finger press of a menu heading is like hover.

    Here's the site: http://dev.henleyherald.com/

    Is this behaviour and/or 2 second 'delay' when on a tablet what you'd expect from the script? If not, any suggestions how to fix it, e.g. get the sub-menu to display when pressed?

    If there is something 'mobile specific' required, I can target code/CSS within the theme.
    Last edited by zimbo; 11-13-2012 at 05:48 PM.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Here's a novel idea, you could modify something like [url="http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/"[/url], to detect a mobile device and then change the setup of the dropdown, and then cause this to be the script reference when it's mobile, something like:
    Code:
    if( isMobile.any() ){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "mobile/jqueryslidemenu.js";
        document.getElementsByTagName("head")[0].appendChild(s);
    }
    else {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "desktop/jqueryslidemenu.js";
        document.getElementsByTagName("head")[0].appendChild(s);
    }
    Note the paths to the javascript, my idea is to have it respond onclick rather than on hover for the mobile js:
    Code:
    /*********************
    //* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
    //* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
    //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
    *********************/
    
    //Update: April 12th, 10: Fixed compat issue with jquery 1.4x
    
    //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
    var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
    
    var jqueryslidemenu={
    
    animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
    
    buildmenu:function(menuid, arrowsvar){
    	jQuery(document).ready(function($){
    		var $mainmenu=$("#"+menuid+">ul")
    		var $headers=$mainmenu.find("ul").parent()
    		$headers.each(function(i){
    			var $curobj=$(this)
    			var $subul=$(this).find('ul:eq(0)')
    			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    			this.istopheader=$curobj.parents("ul").length==1? true : false
    			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
    			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
    				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
    				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
    				+ '" style="border:0;" />'
    			)
    			$curobj.click(
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
    					var menuleft=this.istopheader? 0 : this._dimensions.w
    					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
    					if ($targetul.queue().length<=1) //if 1 or less queued animations
    						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
    				},
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					$targetul.slideUp(jqueryslidemenu.animateduration.out)
    				}
    			) //end hover
    			$curobj.click(function(){
    				$(this).children("ul:eq(0)").hide()
    			})
    		}) //end $headers.each()
    		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
    	}) //end document.ready
    }
    }
    
    //build menu with ID="myslidemenu" on page:
    jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
    Get the idea? It's not perfect, but it could work. All this will do is stop you from having to hold it down.

    However, there is no proper solution in terms of opening menus, it's either click, or not. An idea, is that rather than actually changing it, put the drop down links as actual a tags, with styling as such to make the user aware. An even more drastic measure, is to redesign the site completely for uses with touch devices, with more natural movements for touch screens.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, useful code snippet to detect a mobile device that I can maybe use elsewhere. I've tried the click change you suggested and it doesn't do what I want on mobile. This issue only arises on tablets in landscape mode because the WP theme is fully responsive and changes the jqueryslidermenu into a different mobile-friendly menu on screen sizes less than ~900px. So as you suggest I can either look at a way of re-styling the menu to imply drop-downs exist (although that doesn't address the press-and-hold issue), or the other option is to force the responsive menu into action on larger tablets.

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Another option would be to add :focus alongside :hover in your CSS (or in the script, in this case, which could be quite a bit harder). If there is a link in that top menu item it may need to be removed.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    On that idea, you could just try replacing .click/.hover in the red part of the script I posted with .focus to try traq's idea.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    I've been messing around with it, and it's not so straightforward, unfortunately. I'll let you know if I figure anything out.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  7. #7
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    well, a start.
    • requires jQuery 1.7+.
    • .hover() is replaced with .on() to attach the touch events
    • lots of code repetition (needs to be optimized once it works)



    to open the menu, do a touch and a small swipe (the menu will close immediately if you touch only)

    to close the menu, touch it again.

    Not optimal, obviously, but it's a start.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  8. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. #9
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    not sure that's even intended to work outside of jQuery UI. Doesn't appear to work in this case.

    Edit:

    ...but it gave me an idea. very hacky, but it works (at least on Android 4; no iPhone, here)

    Last edited by traq; 11-15-2012 at 12:22 AM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  10. #10
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    It's quite buggy, but yes it does work on IOS.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

Similar Threads

  1. How to alter Image w/ description tooltip v2.0
    By Lady Rogue in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-07-2011, 04:28 PM
  2. Resolved Alter mysql table/field via php
    By liamallan in forum PHP
    Replies: 2
    Last Post: 07-27-2010, 06:48 PM
  3. alter long url
    By ggalan in forum PHP
    Replies: 5
    Last Post: 07-24-2010, 01:37 PM
  4. How to alter this script
    By slamothe in forum PHP
    Replies: 1
    Last Post: 04-22-2010, 07:18 PM
  5. After form submit alter webpage
    By redbrad0 in forum JavaScript
    Replies: 0
    Last Post: 12-19-2007, 09:48 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
  •