Alter 'hover' behavior for a tablet

[traq]

what's it do wrong?

[bernie1227]

There are numerous issues, one being that the submenus don't work at all as afar as I can tell, and opening one does not close another.

[traq]

hmm... to bad I don't have an iPhone.

zimbo: I can fix that if you want. just send me an iPhone. I'll need a data plan too. And an extra iPhone, in case, uh, I want to test two things at once. My wife says the second iPhone should be pink.

:thumbsup:

...crud, this'll attract some iPhone spam.

[bernie1227]

You don't need an iPhone, just any idevice will do . Anyway, I can test for you if you make any changes.

[traq]

I don't know what to change... how are you at iTroubleshooting?

[bernie1227]

What did you change in the js? I'll take a crack at fixing it.

[traq]

Changed the .hover() event to .on()

Changed the hover event into separate mouseenter and mousseleave events

Added a flag (var touch start) to track if the menu is opened/closed via touch

Added a touchstart event that triggers the normal mouseenter / mouseleave events (determined by the flag).

[bernie1227]

I've found the issue with the submenus not coming out:

/*********************
//* 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;" />'
            )
    var touchstart = 1;
    $curobj.on( {'mouseenter':
                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)
    },'mouseleave':
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
    },'touchstart':function(e){
                        e.preventDefault();
                        if( touchstart == 1 ){ $(this).trigger( 'mouseenter' ); touchstart = 0; }
                 else{ $(this).trigger( 'mouseleave' ); touchstart = 1; }
    }
    }
            )
            $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)​

the problem was that when you clicked on the submenu, it was identifying that as outside of the menu, and thus closing the dropdown.
Commenting out the highlighted line will make the submenus work, but it will also stop them from closing.
The only thing I can think of to make it work, is causing the code to identify the children of the menu as part of the menu.

[traq]

the problem was that when you clicked on the submenu, it was identifying that as outside of the menu, and thus closing the dropdown.
Commenting out the highlighted line will make the submenus work, but it will also stop them from closing.
The only thing I can think of to make it work, is causing the code to identify the children of the menu as part of the menu.

...?? silly iOS.

I've got an idea. I'll work on it mañana.

[bernie1227]

alright, I can get it to "work" (I use the term work very loosely) in IOS as such:

/*********************
//* 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;" />'
            )
    var touchstart = 1;
    $curobj.on( {'mouseenter':
                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)
    },'touchcancel':
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
    },'touchstart':function(e){
                        e.preventDefault();
                        if( touchstart == 1 ){ $(this).trigger( 'mouseenter' ); touchstart = 0; }
                 else{ $(this).trigger( 'mouseleave' ); touchstart = 1; }
    }
    }
            )
            $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)​

When I say work, I mean that it drops down and such fine and slides back up when you 'click' elsewhere (the touch is canceled).