Bug Tracker

Opened 9 years ago

Closed 8 years ago

#9541 closed bug (invalid)

href click sometimes fails if the clicked div is in motion

Reported by: nickgram81@… Owned by: nickgram81@…
Priority: low Milestone: 1.next
Component: event Version: 1.6.1
Keywords: Cc:
Blocked by: Blocking:

Description

Hello. I have a navigation menu. Each btn is moved on hover over.

If I hover over a btn and IMMEDIATELY click, then most of the times the href click won't fire!!!

Why?

Here is some code...

<script>
    $(document).ready(function() {  
        menu(0);
    }); 
</script>

</head>

<body>
    
    <div id="container">
    

        <nav class="navStyle">
            <ul>
                <li id="btn_01">
                    <a href="index.html">
                        <div id="upper_01">
                            <div class="upper_number">1</div>
                            <div class="upper_text">ΑΡΧΙΚΗ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">1</div>
                            <div class="upper_text">ΑΡΧΙΚΗ</div>
                        </div>
                    </a>
                </li>
                <li id="btn_02">
                    <a href="activities.html">
                        <div id="upper_02">
                            <div class="upper_number">2</div>
                            <div class="upper_text">ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">2</div>
                            <div class="upper_text">ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ</div>
                        </div>
                    </a>
                </li>
                <li id="btn_03">
                    <a href="facilities.html">
                        <div id="upper_03">
                            <div class="upper_number">3</div>
                            <div class="upper_text">ΕΓΚΑΤΑΣΤΑΣΕΙΣ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">3</div>
                            <div class="upper_text">ΕΓΚΑΤΑΣΤΑΣΕΙΣ</div>
                        </div>
                    </a>
                </li>
                <li id="btn_04">
                    <a href="education.html">
                        <div id="upper_04">
                            <div class="upper_number">4</div>
                            <div class="upper_text">ΕΚΠΑΙΔΕΥΣΗ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">4</div>
                            <div class="upper_text">ΕΚΠΑΙΔΕΥΣΗ</div>
                        </div>
                    </a>
                </li>
                <li id="btn_05">
                    <a href="news.html">
                        <div id="upper_05">
                            <div class="upper_number">5</div>
                            <div class="upper_text">ΤΕΛΕΥΤΑΙΑ ΝΕΑ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">5</div>
                            <div class="upper_text">ΤΕΛΕΥΤΑΙΑ ΝΕΑ</div>
                        </div>
                    </a>
                </li>
                <li id="btn_06">
                    <a href="contact.html">
                        <div id="upper_06">
                            <div class="upper_number">6</div>
                            <div class="upper_text">ΕΠΙΚΟΙΝΩΝΙΑ</div>
                        </div>
                        <div class="bottom">
                            <div class="upper_number">6</div>
                            <div class="upper_text">ΕΠΙΚΟΙΝΩΝΙΑ</div>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>

....

And the .js:

function menu(currentBtn) {
            
    var listItems = document.getElementsByTagName("li");
    var nItems = listItems.length;

    for (var i = 0; i < nItems; i++) {
        var counter = i + 1;
        var btnString = "#btn_0" + counter;
        if (i != currentBtn) {
            $(btnString).bind( 'mouseenter', onMouseOver ); // use mouseenter instead of mouseover, so that children do not fire up
            $(btnString).bind( 'mouseleave', onMouseOut );  // use mouseleave instead of mouseout, so that children do not fire up
            $(btnString).bind( 'click', onMouseClick );
        } else {
            $(btnString).stop().animate({top:"-163"}, {duration:0});
        }
    }
}

function onMouseOver(e) {
    $(this).stop().animate({top:"-163"}, {duration:300});
}

function onMouseOut(e) {
    $(this).stop().animate({top:"-0"}, {duration:300});
}

function onMouseClick(e) {
	
}

and the css...

/* NAVIGATION MENU */

.navStyle {
    height: 163px;
    font-size: 16px;
    overflow: hidden;
}

.navStyle ul {
    list-style: none; /* remove list bullets */
    margin: 0;
    padding: 0;
}

.navStyle li {
    display: inline;  /*make menu horizontal */
    position: relative;
    float: left;
    width: 163px;
}

#upper_01, #upper_02, #upper_03, #upper_04, #upper_05, #upper_06 {
    height: 163px;
    color: #000000;
    font-family: 'UBHelveticaLightNormal';
} 

.bottom {
    height: 163px;
/*    background-color: #e1cf01;*/
    background-color: #000000;
    color: #ffffff;
    font-family: 'UBHelveticaLightNormal';
} 

.upper_number {
    font-size: 40px;
    position: relative;
    top: 10px;
    left: 10px;
}

.upper_text {
    position: relative;
    left: 10px;
    top: 90px;
}

#upper_01 {
    background-color: #e5e5e5;
}

#upper_02 {
    background-color: #dcdcdc;
}

#upper_03 {
    background-color: #d2d2d2;
}

#upper_04 {
    background-color: #c8c8c8;
}

#upper_05 {
    background-color: #bebebe;
}

#upper_06 {
    background-color: #b4b4b4;
}


Any ideas??? I'm noob with jquery and javascript, so it may be something easy.

Thanx in advance...

Change History (2)

comment:1 Changed 9 years ago by Rick Waldron

Component: unfiledevent
Owner: set to nickgram81@…
Priority: undecidedlow
Status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu.

We do appreciate that you've provided the offending code, but this is a lot to put back together - thanks!

comment:2 Changed 8 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Note: See TracTickets for help on using tickets.