How to create a floating div with jQuery


Tags: javascript,jquery,css,floating

Problem :

When the mouse is over an element A of a certain class , another floating div B, which contains a link, should appear. B should disappear as soon as the mouse has left A and B.

How can I do this with jQuery? jsFiddle

var container = $('#container');
var area = $('.area'); // this is A
var position = area.offset();

var floating = $("<div />", {
        css : { "position"  :   "absolute",
                "top"       :   position.top - 30,
                "left"      :   position.left + 20,
                "border"    :   "1px solid #000",
                "padding"   :   "5px",
                "display"   :   "none",
                "z-index"   :   "100",
                "background-color"  :   "#F00"
        }
    })
        .text('Hello World'); // this is B

    container.css('position', 'relative');
    container.append(floating);

    function show() {
        floating.show();
    }

    function hide() {
        floating.hide();
    }

    area.on('mouseenter', show);
    area.on('mouseleave', hide);
    floating.on('mouseenter', function(event) {
        console.log("floating: mouseenter");
        area.off('mouseenter', show);
        area.off('mouseleave', hide);
    });
    floating.on('mouseleave', function(event) {
        console.log("floating: mouseleave");
        area.on('mouseenter', show);
        area.on('mouseleave', hide);
    });

My problem is that evertime the mouse enters B, B disappears already. I need to do this with jQuery, not only CSS.



Solution :

I'm not sure why you have to put the floating div in the jQuery. This is probably how I would achieve something similar to what you want.

http://jsfiddle.net/A2gFb/6/

Just put the hidden float in the HTML,

<div class="area">luptatum zzril
    <div class="fixed">Hello World!</div>
</div>

with proper CSS set.

.area {
    position: relative;
    color: #0F0;
    font-weight: bold;
    /* you may want to set the width/height here as well*/
}

.fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;  /* Thanks Diego for pointing out the typo here */
    background-color: red;
    display: none;
}

And the jQuery would be as simple as this:

$(".area").mouseenter( function() {
    $(".fixed").show();
});

$(".area").mouseleave( function() {
    $(".fixed").hide();
});

    CSS Howto..

    How to make outer div fit child divs?

    How to overwrite “left: 80%” from inline CSS

    How to create custom archive page on Tumblr

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    How to center images in div

    How to refer in CSS to all elements that have some attribute?

    How to make a 2x2 grid of Div's in CSS?

    How to fix the top row and first column in a webpage, with only CSS

    How to ignore parent's width limit in CSS

    How to highlight the table row using jquery in Rails 3?

    How to put only certain elements of a div in a css box

    bootstrap modal disappear immediately after showing

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to move this circle using javascript?

    How can I stay organized when writing CSS? [duplicate]

    How to override default css style rule of Bootstrap

    How to customize unordered list items in HTML using CSS

    How to change the width of displayed text nested in a div?

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to align text and image in a CSS box?

    How can you separate the navigation bar list from the body list?

    Polymer 1.0 how can I style a paper-input:disabled?

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How to make span width to be maximum using CSS?

    How to change or call svg clippath polygon attributes in CSS

    How to restrict character limit by line or # of characters with css?

    how to Styling a “choose file” button using css Only

    How to override a templates default option with javascript and css

    How to use particular CSS styles based on screen size / device

    How to manipulate the CSS at runtime