Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Need help with js for center menu on district website

  • This topic is empty.
Viewing 12 posts - 31 through 42 (of 42 total)
  • Author
    Posts
  • #192995
    Shikkediel
    Participant

    Got a pen maybe? The only really tricky thing I was messing around with was making a distinction between the mouse leaving the fly list item (parent) or the list/submenu (child) itself. In the first case the sub item would have to be hidden, where in the latter it would actually have to remain visible. Using a click, this shouldn’t be an issue.

    I’ll post the question to pen 2.0 in a separate topic, I am curious.
    Edit – found the cause there already…

    #192997
    atjones44
    Participant

    Actually don’t need a pen, view it live @ http://www.usd430.k12.ks.us

    but here is pen I made for ya real quick, had to join:
    http://codepen.io/atjones44/pen/OPpLPX

    lemme know what you think. I’ve tested on mobile devices/touch screens, and the clicks work on the menu but not on the links…argh almost there.
    only thing that doesn’t show on the pen is my Arrow image on the fly objects of course. just look at the live site.
    hopefully we can figure out the mobile device thing now for making the links clickable

    #193030
    Shikkediel
    Participant

    This will make the submenu links clickable (actually, prevent toggle) :

    $('.fly').on('mousedown touchstart', function(e) {
    
        e.preventDefault();
        e.stopPropagation();
        if (e.target !== this) return; // this line
        sub = $(this).find(nav);
        sub.toggle();
    })
    

    I did notice opening a new submenu does not hide the previous one…
    Mouse coordination stuff is more mind boggling than I thought.

    And I’m flabbergasted this works with actually setting a timeout :

    .mouseleave(function() {
        sub.hide()}, 1000)
    });
    

    I don’t think in this case you need to prevent it bubbling up the DOM.

    #193034
    Shikkediel
    Participant

    Okay, flabbergast mode off. That wasn’t actually timing it out but triggered the function already in place. Looking at the current interaction, I think this is what you might be after?

    Original pen revisited

    #193036
    atjones44
    Participant

    Yeah, I’ll keep messing with it. Gonna try to make it work with mobile devices with all the tablets we have. Links don’t work on mobile devices yet.
    Added click(); on this pen and it works but doesn’t work under the .fly sub menu
    http://codepen.io/atjones44/pen/rayNXW

    #193075
    atjones44
    Participant

    Do you know of a quick way to get the links clickable on mobile devices? The menu works fine on the mobile devices I just cant click on the links.

    Once this is working we’ll call it finished!

    #193077
    Shikkediel
    Participant

    I think you wanna try to remove e.preventDefault(), it’s just added to prevent text selection but it may be interfering with touch devices.

    #193078
    atjones44
    Participant

    Works perfect now, thank you!

    #193081
    Shikkediel
    Participant

    You’re welcome. Glad we got all the quirks removed. I thought I knew a little bit about mouse events but that was an exaggeration.
    A little wiser now though (especially about e.target)…

    #193528
    Shikkediel
    Participant

    I went ahead and took the hover menu to the next level – like I think it should function but wasn’t quite able to get there before :

    • Full hover functionality as well as touch and click support
    • Preventing text selection yet still able to redirect external links
    • Auto-hiding when anything other than the menu is tapped
    • Fully tweaked hover interaction for showing/hiding items correctly

    http://codepen.io/Shikkediel/pen/LEyYpp?editors=011

    Holler @atjones44 in case it may be of interest still.

    #193542
    atjones44
    Participant

    Thanks a lot man.

    #193561
    Shikkediel
    Participant

    No problem, geek enough to want to get the details right. :-B
    It’s more of a general demo with slightly different class names so let me know if you want to implement it but run into trouble somewhere…

Viewing 12 posts - 31 through 42 (of 42 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.