Форум

codingfighter · #1 (**permalink**) 13.05.2012, 17:58

всем привет. ситуация такая. есть span на странице с определенным id, и нужно именно под ним сделать появление div'a. в общем думаю можно как-то с абсолютным позиционированием относительно верхнего угла страницы, но для этого необходимо поколдовать с самим span'ом, вычислить его координаты, высоту, сложить и поместить div. Будет это работать? Есть у кого-то уже готовые наработки?

bot87 · #2 (**permalink**) 13.05.2012, 18:17

кинь картинку

Раед · #3 (**permalink**) 13.05.2012, 18:30

Сообщение от codingfighter

Будет это работать

будет
Если правильно сделать, то заработать может всё что угодно

vadim5june · #4 (**permalink**) 13.05.2012, 18:44

Сообщение от codingfighter

всем привет. ситуация такая. есть span на странице с определенным id, и нужно именно под ним сделать появление div'a. в общем думаю можно как-то с абсолютным позиционированием относительно верхнего угла страницы

Лучше располагать его не относительно страницы а относительно offsetParent самого элемента span
тогда и с z-index проблем не будет

Раед · #5 (**permalink**) 13.05.2012, 19:24

<!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>

codingfighter · #6 (**permalink**) 13.05.2012, 19:27

не работает код, в самый низ вставляет...

codingfighter · #7 (**permalink**) 13.05.2012, 19:56

так, почти сделал, только какая-то фигня, не хочет определяться offsetHeight span'a пишет что равно нулю, а то если его не указать то просто накладывается div поверх

bot87 · #8 (**permalink**) 13.05.2012, 20:57

codingfighter а может попробуй через inline-block для span?

.Там и js может и не пригодится.

codingfighter · #9 (**permalink**) 13.05.2012, 21:40

Помогите пожалуйста допилить код

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);
	}
}

...

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="ab" onclick="echo_test_div(this)">test</span>

даже в ie вставляет под элелментом, а вот chrome и сафари чего-то сдвигает элемент немного влево. и я что-то не пойму зачем цикл в функции findPosition, и откуда данные берутся в случае else ? надыбал функцию на этом форуме...

vadim5june · #10 (**permalink**) 13.05.2012, 22:14

Сообщение от codingfighter

даже в ie вставляет под элелментом, а вот chrome и сафари чего-то сдвигает элемент немного влево. и я что-то не пойму зачем цикл в функции findPosition, и откуда данные берутся в случае else ? надыбал функцию на этом форуме...

цикл в функции нужен потому что мы складываем все top и left родителей(offset) до тех пор пока не дойдем до body
posY += 20;=это вместо offsetHeight-но он работает

Форум

Справочник

Discord чат

Курсы javascript