CODEWITHSUNDEEP
jquerycss
jmenezes
jmenezes

Reputation: 1926

How to position a div under a link on click?

I'm trying to do something like this very site does when you hover over a users image in the answers. Since I've never much worked with CSS, I've no idea how to get this right. I've been given the CSS and design. The data will be loaded server side and sent to the page using jQuery.

My problem is, a link can be anywhere on the page but will all appear below each other with slight differences in margin from the left. The div needs to be just under that always. How can I do this?

This is the entire CSS I'm working with. You can copy and paste it. Anything is changeable now. It's the positioning part that has me stuck.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title Less</title>
<script type="text/javascript">
$(document).ready(function() {
    $('.prod-info').click(function() {
        var data = 'id=5705';
        if(data) {
            $.ajax({
                type:"GET",
                url:"/products/info/",
                data:data,
                dataType:'json',
                beforeSend:function(x){

                },
                success: function(x){

                },
                error: function(x){

                },
            });
        }
        return false;
    });
});
</script>
<style type="text/css">
#prod-menu {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #505050;
    border-color: #444444 #1C1C1C #1C1C1C;
    border-radius: 4px 4px 4px 4px;
    border-right: 1px solid #1C1C1C;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 #727272 inset;
    color: #E3E3E3;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 11px;
    line-height: 1.2;
    padding: 10px;
    position: relative;
    text-align: left;
    width: 300px;
    z-index: 320;

}
#prod-menu .pm-gravatar {
    float: left;
    margin-right: 8px;
}
#prod-menu .pm-header-info .pm-prod-link, #prod-menu .pm-header-info .mod-flair {
    color: #E2E2E2 !important;
    font-size: 18px;
}
#prod-menu .pm-header-info .pm-flair .badgecount, #prod-menu .pm-header-info .pm-flair .reputation-score {
    color: #E2E2E2;
}
#prod-menu .pm-about-me {
    clear: both;
    font-size: 11px;
    margin: 5px 0;
    overflow: hidden;
}
#prod-menu .pm-links a {
    font-size: 11px;
    margin-right: 8px;
}
#prod-menu a, #prod-menu a:visited {
    color: #B4D4EC;
    text-decoration: none;
}
#prod-menu a:hover {
    color: #DCECF7;
}
</style>
</head>
<body>

<div id="container">

<div class="prod-info">I am Link A</div>
<div class="prod-info" style="margin-top:150px;margin-left:100px">I am Link B</div>
<div class="prod-info" style="margin-top:300px;margin-left:200px">I am Link C</div>

<div id="prod-menu">
I am the product info div!
</div>

</div>

</body>
</html>

Upvotes: 1

Views: 1616

Answers (1)

EdenSource
EdenSource

Reputation: 3387

You can add this statments :

$('.prod-info').mouseenter(function () {
    currTop = $(this).offset().top+20;
    currLeft = $(this).offset().left;
    $('#prod-menu').css({
        top: currTop + "px",
        left: currLeft + "px",
        display: "block"
    })
});
$('.prod-info').mouseleave(function () {
    currTop = $(this).offset().top;
    currLeft = $(this).offset().left;
    $('#prod-menu').css({
        display: "none"
    })
});

And i also replace position:relative by position:absolute.

Hope this help.

Check the Fiddle

Upvotes: 4

Related Questions