javascript - jQuery get the total position from an id -
i want set focus position on variable #id after ajax reloads content within container. container has overflow:auto;
in see scrollbar if content large. after inserting new content, can't focus set on #id i'm giving set on.
i first tried set focus on id:
<script type="text/javascript"> function setfocus(ulid) { var heightul = $("#"+ulid).offset(); $("#"+ulid).focus(); } </script>
later tried total height of id, put offset()
on it, $("#"+ulid).offset().top;
or $("#"+ulid).position().top;
.
function setfocus(ulid) { var heightul = $("#"+ulid).offset().top; $("#"+ulid).stop().animate({ scrolltop: heightul }, 'fast'); }
but isn't working either. position()
0 in return , offset()
returns object's height relative parent. , not total height object positioned within container.
the html:
<div class="info-container edit" id="info-container-edit"> <span class="cat">info 1</span> <ul id="info1" class="cat-list music"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> <span class="cat cat">info 2</span> <ul id="info2" class="cat-list music"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> <span class="cat cat">info 3</span> <ul id="info3" class="cat-list music"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> <span class="cat cat">info 4</span> <ul id="info4" class="cat-list music"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> </div>
the ajax code refreshes container #info-container-edit
. problem example want focus on #info3
setfocus('info3');
. seems returns height of #info2
, not total height container #info-container-edit
till #info3
.
can point out how fix problem? if can position height of #id within container, should problem fixed. or how set display focus on #id?
you use .scrollintoview()
:
document.getelementbyid(ulid).scrollintoview(false);