How to position one element relative to another with jQuery? -

-

i have hidden div contains toolbar-like menu.

i have number of divs enabled show menu div when mouse hovers on them.

is there built-in function move menu div top right of active (mouse hover) div? i'm looking $(menu).position("topright", targetel);

tl;dr: (try here)

if have following html:

<div id="menu" style="display: none;">    <!-- menu stuff in here -->    <ul><li>menu item</li></ul> </div>  <div class="parent">hover on me show menu here</div>

then can use following javascript code:

$(".parent").mouseover(function() {     // .position() uses position relative offset parent,      var pos = $(this).position();      // .outerwidth() takes account border , padding.     var width = $(this).outerwidth();      //show menu directly on placeholder     $("#menu").css({         position: "absolute",         top: pos.top + "px",         left: (pos.left + width) + "px"     }).show(); });

but doesn't work!

this work long menu , placeholder have same offset parent. if don't, , don't have nested css rules care in dom #menu element is, use:

$(this).append($("#menu"));

just before line positions #menu element.

but still doesn't work!

you might have weird layout doesn't work approach. in case, use jquery.ui's position plugin (as mentioned in answer below), handles every conceivable eventuality. note you'll have show() menu element before calling position({...}); plugin can't position hidden elements.

update notes 3 years later in 2012:

(the original solution archived here posterity)

so, turns out original method had here far ideal. in particular, fail if:

  • the menu's offset parent not placeholder's offset parent
  • the placeholder has border/padding

luckily, jquery introduced methods (position() , outerwidth()) way in 1.2.6 make finding right values in latter case here lot easier. former case, appending menu element placeholder works (but break css rules based on nesting).


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more