CODEWITHSUNDEEP
jqueryhtmlcss
Alexandr Belov
Alexandr Belov

Reputation: 1834

Positioning an element on hover another element

I have a div with CSS "display:none", and I want it to be positioned in a certain way while hovering an image of the class "preview". I can't use just CSS, because my hidden div involves images which are to be changed depending on what Image from list item you hover. I've read and tried everything here, How to position one element relative to another with jQuery?

but nothing works to me. Here's my HTML:

   <div id="content">
        <ul>
           <li>
                <a href="#">
                    <img class="preview" src="images/E46_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>

            <li>
                <a href="#">
                    <img class="preview" src="images/E93_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>

            <li>
                <a href="#">
                    <img class="preview" src="images/E46_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>
        </ul>
    </div>

And my div with CSS "display:none" is a slider.

I think I need a simple (not like the ones from the link I posted above) analogue of Javascript's getBoundingClientRect() in JQuery. Please, help!

Upvotes: 0

Views: 113

Answers (2)

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1680

Here as follows:

var pos = $(element to position by).position();

var width = $(this).outerWidth();

//show the element over the placeholder
$("item to position").css({
    position: "absolute",
    top: pos.top + "px",
    left: (pos.left + width) + "px"
}).show();

});

A great example working is also here on a fiddle another created. http://jsfiddle.net/wjbuys/QrrpB/

Upvotes: 0

user8942
user8942

Reputation: 141

If you can elaborate, i can make this better, but for the basics, here goes:

here is a combination of both: http://jsfiddle.net/zc2m9yh1/

jQ:

$("#content ul li").hover(function () {
    var src = $(this).find("img").attr("src");
    $(this).children("div").html('<img src="' + src + '">');
}, function () {
    //on mouseout
});

css:

#content ul li div {
    display: none;
}
#content ul li:hover div {
    display: block;
}
#content ul li img {
    max-width: 100px;
}

Upvotes: 1

Related Questions