Bug Tracker

#9541 closed bug (invalid)

Opened June 07, 2011 05:12PM UTC

Closed June 22, 2011 08:01AM UTC

href click sometimes fails if the clicked div is in motion

Reported by: nickgram81@yahoo.gr Owned by: nickgram81@yahoo.gr
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...

Attachments (0)
Change History (2)

Changed June 07, 2011 05:55PM UTC by rwaldron comment:1

component: unfiled → event
owner: → nickgram81@yahoo.gr
priority: undecided → low
status: new → pending

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!

Changed June 22, 2011 08:01AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pending → closed

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!