CODEWITHSUNDEEP
jquerycsshtmlpositioning
neeebzz
neeebzz

Reputation: 11538

How to position DIV on top and absolute in JQuery?

Can anyone give me an idea how div positioning works in JQuery?

I want to show a div at an absolute position and on top of everything else? Like in a form I want to show a help pop-up to appear right next to the text box in focus (like they do in careers.stackoverflow > edit CV) .

Similarly what is the best strategy to show a hover card like when in twitter when you hover over an avatar a small div appears with user profile summary.

Thanks

Upvotes: 0

Views: 7272

Answers (5)

Jim G.
Jim G.

Reputation: 15382

How about something like this:

$(document).ready(function(){
    $('#imgLinkToolTip').mouseover(function() {
        $('#dvLinkToolTip').css({ left: $(this).position().left - 300, top: $(this).position().top - 45 }).show();
    }).mouseout(function() {
        $('#dvLinkToolTip').hide();
    });
});

In this example, imgLinkToolTip is your hover-over target and dvLinkTooltip is the div that you'd like to pop-up.

And yes, your div will need a higher z-order and position: absolute.

Upvotes: 5

zod
zod

Reputation: 12437

For positioning

try with css style fields top:5px; left:px;As you want

Try to use FF fireBug and check whats really happening

Try

position:absolute and position:relative

For hover or layering!!

use z-index and position

Try Jquery slide ,slideDown for effects

Upvotes: 0

matthewpavkov
matthewpavkov

Reputation: 2928

Positioning the div is done just like you would do without javascript/jQuery. So, I would start by creating an actual coded and working HTML/CSS demo of what you want to do. Position your jQuery activated content in its own (absolutely) positioned div. Once it looks ok (checking multiple browsers, etc), then you can just show/hide the div, and you won't need to worry about custom positioning it with jQuery.

Alternatively, you're trying to position the jQuery activated content on the fly (so, the content isn't already loaded in the page, etc), you may need to set inline styles $('#mydiv').css() setting absolute positioning values (top, left, etc).

Upvotes: 0

Dennis Burton
Dennis Burton

Reputation: 3333

The div you want to position on top needs a higher z-order, position: absolute, and dimensions.

I have used plugins like qTip to provide the functionality you are mentioning in the past. There are probably a 100 other tooltip plugins that would work too.

Upvotes: 2

dotariel
dotariel

Reputation: 1604

Regarding the "hover card", I recommend looking into the qTip Plugin.

Upvotes: 1

Related Questions