расположить всплывающий div под элементом
всем привет. ситуация такая. есть span на странице с определенным id, и нужно именно под ним сделать появление div'a. в общем думаю можно как-то с абсолютным позиционированием относительно верхнего угла страницы, но для этого необходимо поколдовать с самим span'ом, вычислить его координаты, высоту, сложить и поместить div. Будет это работать? Есть у кого-то уже готовые наработки?
|
кинь картинку
|
Цитата:
Если правильно сделать, то заработать может всё что угодно |
Цитата:
тогда и с z-index проблем не будет |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
</head><body>
б<br>ркдуфхпр
уацццау<br>цы
цуауауцпафц<br>уа
цфуа<br>аааааааааааау<br><br>
<span id="ab">Кликни на меня и увидишь див</span>
<script type="text/javascript">
function coords(elem) {
var coo;
if (elem.getBoundingClientRect) {
coo = getOffsetRect(elem);
} else {
coo = getOffsetSum(elem);
}
function getOffsetSum(elem) {
var top=0, left=0;
while(elem) {
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
return {top:top, left:left}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return {top:Math.round(top), left:Math.round(left)}
}
coo.bottom || (coo.bottom=(document.body.clientHeight)-(coo.top+(coo.height||elem.clientHeight)));
coo.right || (coo.right=(document.body.clientWidth)-(coo.left+(coo.width||elem.clientWidth)));
return {top:coo.top,left:coo.left,bottom:coo.bottom,right:coo.right}
}
document.getElementById('ab').onclick = function() {
var crds = coords(this);
var div = document.createElement('div');
div.innerHTML = 'Я див';
div.style.position = 'absolute';
div.style.left = crds.left+'px';
div.style.top = (crds.top+this.offsetHeight)+'px';
document.body.appendChild(div);
}
</script>
</body></html>
|
не работает код, в самый низ вставляет...
|
так, почти сделал, только какая-то фигня, не хочет определяться offsetHeight span'a пишет что равно нулю, а то если его не указать то просто накладывается div поверх
|
codingfighter а может попробуй через inline-block для span?:) .Там и js может и не пригодится.
|
Помогите пожалуйста допилить код
function findPosition(oElement) {
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
posY += 20;
return [posX, posY];
} else {
oElement.y += 20;
return [oElement.x, oElement.y];
}
}
function echo_test_div(elem) {
var get_position = findPosition(elem);
if(get_position.length == 2) {
var getdiv = document.createElement('div');
getdiv.innerHTML = 'Я див';
getdiv.style.position = 'absolute';
getdiv.style.left = get_position[0]+'px';
getdiv.style.top = get_position[1]+'px';
document.body.appendChild(getdiv);
}
}
... <span id="ab" onclick="echo_test_div(this)">test</span> даже в ie вставляет под элелментом, а вот chrome и сафари чего-то сдвигает элемент немного влево. и я что-то не пойму зачем цикл в функции findPosition, и откуда данные берутся в случае else ? надыбал функцию на этом форуме... |
Цитата:
posY += 20;=это вместо offsetHeight-но он работает |
| Часовой пояс GMT +3, время: 22:36. |