Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Alter 'hover' behavior for a tablet

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

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

    Default

    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.
    "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. #13
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.

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

    Default

    You don't need an iPhone, just any idevice will do . Anyway, I can test for you if you make any changes.
    "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

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

    Default

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

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

    Default

    What did you change in the js? I'll take a crack at fixing it.
    "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

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

    Default

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

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

    Default

    I've found the issue with the submenus not coming out:
    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;" />'
                )
        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.
    "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. #19
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by bernie1227 View Post
    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.

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

    Default

    alright, I can get it to "work" (I use the term work very loosely) in IOS as such:
    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;" />'
                )
        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).
    Last edited by bernie1227; 11-17-2012 at 02:23 AM. Reason: Spelling and Grammar
    "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, 05:28 PM
  2. Resolved Alter mysql table/field via php
    By liamallan in forum PHP
    Replies: 2
    Last Post: 07-27-2010, 07:48 PM
  3. alter long url
    By ggalan in forum PHP
    Replies: 5
    Last Post: 07-24-2010, 02:37 PM
  4. How to alter this script
    By slamothe in forum PHP
    Replies: 1
    Last Post: 04-22-2010, 08:18 PM
  5. After form submit alter webpage
    By redbrad0 in forum JavaScript
    Replies: 0
    Last Post: 12-19-2007, 10: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
  •