CODEWITHSUNDEEP
javascriptjquerymouseenter
Divergent
Divergent

Reputation: 141

Mouseenter event not working

What I have done in this function is create a drop down menu when you click a button:

function toggleNavPanel(x){

    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "▾";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "▴";
    }
}

This works successfully. But this is not what I want. What I want is for someone to be able to mouseover something and have the form pop up.

What I have done is put it into a mouseenter function like so:

$('#story').mouseenter(function() {
    var panel = document.getElementById('dropdown'), maxH="300px";
        panel.style.height = "0px";

}).mouseleave(function() {
    var panel = document.getElementById('dropdown'), maxH="300px";
        panel.style.height = maxH;

});

This does not work. The actual mouseenter event is never executing because I have tried alerting and it didn't work either.

Could someone please tell me what I'm doing wrong? Some more related code is below:

#story {
    position:relative;
    top: -20%;
    left: 0%;
    width: inherit;
    height: 25%;
    margin: 0 auto;
    margin-top: 5px;
    background-color: transparent;
    color: black;
    border-style: solid;
    border-width: 1px;
    border-color: #D8D8D8;  
 }
 #dropdownbutton {
    float:center;
    width:144px;
    height:46px;
    padding-top:16px;
    background:#F90;
}
#dropdown{
    position:absolute;
    height:0px;
    width:550px;
    background:#000;
    top:60px;
    left:160px;
    border-radius:0px 0px 8px 8px;
    overflow:hidden;
    z-index:10000;
    transition: height 0.3s linear 0s;
}

view:

<div class="main">
    <div id="dropdownbutton">
        <button type="button" onclick="toggleNavPanel('dropdown')">Drop Down</button>
    </div>

    <div id="dropdown">
        <p>Working</p>
    </div>

Location of story element:

<div class="info_bar">
    <div id="story">Story</div>
    <div id="info">Info</div>
    <div id="content">Content</div>
</div>

Upvotes: 1

Views: 293

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

Based on the discussions...

jQuery library was not included and the code was not added in a dom ready handler

Upvotes: 2

Related Questions