Geek asks and answers

JQuery: position the element next to another and fix it there

I want to place ElementA next to ElementB, as indicated here: How to place one element relative to another using jQuery?

the only difference being that I want ElementA to move with ElementB if ElementB is moved.

Is it possible to somehow fix some position of an element to another? It is not possible to recalculate the position of ElementA each time the ElementB is moved.

UPDATE

In my situation, ElementB was an element td. Apparently, the elements tdcannot be relatively positioned, so ElementA did not move with ElementB. An easy fix for this was simply adding a relatively located divinside ElementB and then an ElementA placed there.

+3
source share
2 answers

Edit: look here for a live example: http://jsfiddle.net/jPUbh/

Change your html to this:

<div id="placeholder" style="position:relative">
    <div id="placeholder-text">Hover over me to show the menu here</div>
    <div style="position: absolute; display: none; top: 20px; left: 0px" id="menu">
       <!-- menu stuff in here -->
    </div>
</div>

and your js:

$("#placeholder-text").mouseover(showMenu);

var showMenu = function(ev) {
  $("#menu").show();
}

When the parent element (int this case div # placeholder) is set to relative, the block-level elements inside it that are set to absolute will be positioned relative to the parent. Therefore, change the top and left properties of the div # menu to suit your needs. Now, if div # placeholder moves, then the div # menu moves with it.

And your JS is much cleaner with CSS!

The ides are completely universal, change them as you wish :-) And update JS if you change them in html!

+3
source

ElementA ElementB, , "", , , , . ElementB .

: http://jsfiddle.net/sEGZD/

+2

More articles:


All Articles