CODEWITHSUNDEEP
jquerycssgoogle-visualization
BrOSs
BrOSs

Reputation: 929

Display Google pie chart when mouse hover

I want to display my chart when the mouse is hover some element. Everything works fine except I can't stop the slideToggle returns its original position.

Once the mouse is "out-of-target" it contracts, but if the mouse still at the chart it should stay appearing.

$(document).ready(function () {
            $("#test").hover(function () {
                $("#chart_div").slideToggle('slow');
            });
        });

I made a jsFiddle for this question instead of pasting here the whole bunch of code.

EDIT

Here is a goal example.

Upvotes: 1

Views: 890

Answers (2)

halilb
halilb

Reputation: 4115

You can do it by defining both mouseenter and mouseleave events like this sample:

$(document).ready(function() {
    $("#test").mouseenter(function() {
        $("#chart_div").show('slow');
    });
    $(".outerClass").mouseleave(function() {
        if(!$('#chart_div').is(':hover')) {
            $("#chart_div").hide('slow');
        }
    });
});​

Where your html structure should resemble this sample:

<div class="outerClass">
    <div id="test"><strong>TEST.</strong></div>
    <div id="chart_div"></div>
</div>
<div id="another_div">here is out of the pie div</div>

Live Example

Upvotes: 2

matchew
matchew

Reputation: 19645

The best solution would be to change this to a .click()

but if you need the chart to display when you move your mouseover TEST and hide when you move your mouse back over test then you .mouseenter()

$(document).ready(function() {
    $("#test").mouseenter(function() {
        $("#chart_div").slideToggle('slow');
    });
});​

http://jsfiddle.net/fnTXQ/

Upvotes: 1

Related Questions