CODEWITHSUNDEEP
jqueryhtml
plooms
plooms

Reputation: 93

jQuery issue with one of my divs

EDIT: I got my .panel div to not run up through the whole page by adding clear:both to the CSS. Thanks guys for your help and suggestions.

Please check out the little project I'm working on to practice my html/css/js at http://opmet.net

I'm having an issue with the mouse hover that triggers the footer animation. I only want to toggle the footer when I hover in/out of #opmetAbout or #panel. If you look at the HTML you see the .panel class on a div around #opmetAbout and #panel gives desired hover effect.

For whatever reason though, the panel effect is triggered when you hover over the middle padding in-between #right (Sleep Time) & #left (Wake time).

Can somebody please explain why this is happening and how to fix it?

Thanks!

PS I know the actual sleep/wake time calculators have no functionality yet. Any suggestions as to how to do that with js are welcome too.

Upvotes: 0

Views: 69

Answers (3)

plooms
plooms

Reputation: 93

The problem was the .panel div I wrapped around my #footer and #panel ran up through the whole page. Any empty space between divs on the page would trigger the jQuery. To prevent the .panel div from running up through the page I made the CSS like this. Thanks for all your help and suggestions that lead me to this conclusion. 

.panel {
     clear:both;
}

Upvotes: 1

Hogan
Hogan

Reputation: 70523

Change your code like this:

<body> <!-- this tag was in the wrong place.... fix that! -->
<h1 id="header2"><div>Tempo</div></h1>
<div id="floatholders">  <!-- this tag is new -->
  <div id="left" ><br></br>
     <!-- content goes here -->
  </div>
  <div id="right" >
     <!-- content goes here -->
  <div>
</div>
<!-- this part stays the same... -->
<div id="footerOpmet">opmeT</div>
<div class="panel">
    <div id="footerAbout">About</div>
    <div id="panel"> 
         <!-- content goes here -->
   </div>
</div>
</div> <!-- don't forget to close all the divs -->
</body>

or change your javascript like this:

$("#footerAbout").mouseenter(function(){
    $("#panel").slideToggle();
});

$("#footerAbout").mouseleave(function(){
    $("#panel").slideToggle();
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})

This could cause a problem, by hiding the #panel when mouse is hovered over it

var panelTimer;
$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
}, function(){
    panelTimer = setTimeout(function(){
        $("#panel").slideToggle();
    }, 50)
})

$("#panel").mouseenter(function(){
    clearTimeout(panelTimer)
})

Update

replace

$(".panel").mouseenter(function(){
    $("#panel").slideToggle();
});

$(".panel").mouseleave(function(){
    $("#panel").slideToggle();
});

with

$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})

Upvotes: 0

Related Questions