Форум

Кирюха =) · #1 (**permalink**) 28.03.2013, 20:32

Всем привет!!! Недавно задался задачей такой: есть ссылка какая нибудь, при клике на нее появляется дивчик прямо под курсором слева, вот это прямо под курсором слева сделать не могу, где то в сети видел пример когда то, а вспомнить не могу, помогите пожалуста.

danik.js · #2 (**permalink**) 29.03.2013, 00:44

<!DOCTYPE html>
<style>
#popup{
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 5px black;
    padding: 3px 6px;
    color: white;
    font: 12px Arial;
}
</style>
<a href="#">Ссыкла какая нибудь</a>
<div id="popup" style="display:none">дивчик</div>
<script>
(function(){
    var link = document.querySelector('a');
    var popup = document.getElementById('popup');
    link.addEventListener('click', function(e){
        e.preventDefault();
        popup.style.display = 'block';
        popup.style.left = e.pageX - popup.offsetWidth + 'px';
        popup.style.top = e.pageY + 'px';
    });
})();
</script>

Кирюха =) · #3 (**permalink**) 29.03.2013, 14:19

Спасибо большое за пример, но мне надо определить координаты курсора относительно элемента, допустим относительно body

danik.js · #4 (**permalink**) 29.03.2013, 15:39

1) Определяем координаты элемента относительно окна (через getBoundingClientRect)
2) Вычитаем из координат курсора координаты элемента

Кирюха =) · #5 (**permalink**) 29.03.2013, 16:49

Смотрите что на просторах javascript.ru нашел

function mousePageXY(e)
	{
	  var x = 0, y = 0;
	
	  if (!e) e = window.event;
	
	  if (e.pageX || e.pageY)
	  {
	    x = e.pageX;
	    y = e.pageY;
	  }
	  else if (e.clientX || e.clientY)
	  {
	    x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
	    y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
	  }
	
	  return {"x":x, "y":y};
	}

Добавил себе в копилочку, но все равно спасибо за все)

danik.js · #6 (**permalink**) 29.03.2013, 17:20

Сообщение от Кирюха =)

Смотрите что на просторах javascript.ru нашел

А что он делает? И чем отличается e.pageX от e.x ?

Кирюха =) · #7 (**permalink**) 29.03.2013, 18:09

Да собственно ничем, просто тут готовая функция, в полиэтилене))))

danik.js · #8 (**permalink**) 29.03.2013, 19:05

Так нужно с использованием jquery или нет?

Кирюха =) · #9 (**permalink**) 30.03.2013, 00:40

Ну с самого начала нужно было с использованием jquery теперь уже пофиг))) Все равно спасибо вам

danik.js · #10 (**permalink**) 30.03.2013, 06:45

$('a').click(function(e){
    alert(e.pageX);
});

Это замена вашему скрипту ))
А вобще странно. Я вам предложил вариант с .pageX, но вы сказали что вам нужны координаты относительно некоторого элемента. Потом вы приводите код где используется тот же самый .pageX без всякой обработки, и который якобы решает вашу задач. Как так?

Форум

Справочник

Discord чат

Курсы javascript