Координаты курсора на экране

[Admin]

Странно, координаты должно показывать в любом случае.

Дело не в знаках "=" и "==" это точно, т.к. "==" используется для сравнения, а "=" для присвоения значений.

Попробуйте для эксперимента добавить после:

Код:

$(".unique").find("img").live('mousemove', function(e) {

строчку:

Код:

alert(xy_class);

Тогда при клике по изображению на экране должно будет появиться окно с названием класса изображения. Смените класс изображения и повторите клик, данные в окошке так же должны будут смениться.

[ale10ey]

(25.02.2015 20:56:55)Admin писал(а):  Странно, координаты должно показывать в любом случае.

Дело не в знаках "=" и "==" это точно, т.к. "==" используется для сравнения, а "=" для присвоения значений.

Попробуйте для эксперимента добавить после:

Код:

$(".unique").find("img").live('mousemove', function(e) {

строчку:

Код:

alert(xy_class);

Тогда при клике по изображению на экране должно будет появиться окно с названием класса изображения. Смените класс изображения и повторите клик, данные в окошке так же должны будут смениться.

Доброе время суток,
Проверил, но строчка ничего не изменила и окно не появилось.
Для наглядности код html:

<div class="entry">
<h3><img class="xy_1" src="img/icons/autocad.png" />Autodesk AutoCAD 2015</h3>

<h5><a href="img/gallery/autocad.png" class="pirobox" title="Autodesk AutoCAD">&darr; Увеличить изображение</a></h5>
<a href="img/gallery/autocad.png" class="pirobox" title="Увеличить изображение"><img src="img/gallery/autocad-image.png" alt="Autodesk AutoCAD" /> </a>
</div>

И код pirobox:

  piroBox.rar (Размер: 612 байт / Загрузок: 2)

---

Добавление к предыдущему сообщению:
код html: (снизу вверх)
Ссылка a - 1 изображение (110x150px) и 2 изображение (800x600px)
Заголовок h5 - при клике на ссылку появляется 2 изображение

В коде html не прописан class="xy_1" для ссылки (пробовал, не работает - изображение открывается сразу без работы скрипта);
пробовал менять в pirobox - .find("img") на .find("a"), также не срабатывает.

Хотя, если раскоментировать 2 скрипт из архива pirobox, то скрипт работает нормально, но для всех изображений.

[Admin]

В строчке:

Код:

$("entry").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

Вы "потеряли" точку перед entry!

Правильно так:

Код:

$(".entry").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

[ale10ey]

Доброе время суток,
Работает, проверил для 2 изображений задавая различные отступы.
Благодарен вам за помощь, конечно можно было и без скрипта, но думал возможно ли реализовать подобное и оказывается - да. Интересный получился скрипт.
У меня имеются скрипты на css 3, некоторые из них работают как js, если я их хочу опубликовать, в каком разделе лучше создать тему.
Далее вы сами решите интересны они будут вам или нет.
С уваженим, Алексей.

[Admin]

Если скрипты уникальны и не дублируют на 100% скрипты с других сайтов, то выкладывайте их прямо в Скрипты (PHP, JavaScript, jQuery).

[ale10ey]

Доброе время суток.
Как сделать отступы между координатами X и Y ?
Например, в данный момент:
X = 102 Y = 254, на
X = 102 Y = 254
Если менять в js скрипте, то сдвигается обе координаты одновременно, а как сделать, чтобы по отдельности?

PS: Забыл, что пробелы не учитываются.
X = 102 Y = 254, на
X = 102 [отступ] Y = 254

[Admin]

Можно двумя способами.

Если необходимо добавить расстояние между X и Y координатами, то это можно сделать при помощи неразрывных пробелов (&nbsp;):

Код:

$(".xy_pos").html("X = " + relativeX + "    Y = " + relativeY);

Если же необходимо сделать положение координат X и Y независимыми друг от друга, то тут только создавать еще один объект (например, <span class="xy_pos2"></span>) и задавать его координаты через CSS.

[ale10ey]

(11.03.2015 20:46:53)Admin писал(а):  Можно двумя способами.

Если необходимо добавить расстояние между X и Y координатами, то это можно сделать при помощи неразрывных пробелов (&nbsp;):

Код:

$(".xy_pos").html("X = " + relativeX + "    Y = " + relativeY);

Если же необходимо сделать положение координат X и Y независимыми друг от друга, то тут только создавать еще один объект (например, <span class="xy_pos2"></span>) и задавать его координаты через CSS.

Спасибо, просто и понятно, а насчет &nbsp; даже стыдно, что сам не догадался. С уважением, Алексей

[ale10ey]

Здравствуйте,

В последний раз, сразу к сожалению не заметил, просьба извинить не проверил на работоспособность скрипта для ссылки "Увеличить изображение", если кликнуть по самому изображению, то скрипт работает прекрасно.

1. Код js:

var xy_class='';
var xy_pos_x=0;
var xy_pos_y=0;

$(document).ready(function(){
$(".entry a").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

$(".unique").find("img").live('mousemove', function(e) {


if (xy_class=='acad') { xy_pos_x=60; xy_pos_y=65; }
else if (xy_class=='review') { xy_pos_x=50; xy_pos_y=40; }

var relativeX = e.pageX - Math.floor($(this).offset().left);
var relativeY = e.pageY - Math.floor($(this).offset().top);
$(".xy_pos").html("X = " + relativeX + "&nbsp; Y = " + relativeY); /* <span class="xy_pos2"></span> */


$(".xy_pos").css({"right":"0","margin-right":$(".pirobox_content").offset().left+xy_pos_x,
"top":"0","margin-top":$(".pirobox_content").offset().top+$(".pirobox_content").outerHeight()-xy_pos_y});
});


$("a.pirobox").bind("click",function(d) { $(".xy_pos").css("display","block"); });

$(".piro_close").live("click", function(e) { $(".xy_pos").css("display","none"); });
$().bind("keydown", function ( c ) { if (c.keyCode === 27) { $(".xy_pos").css("display","none"); }});
});

2. Скриншот для наглядности, где ссылка "Увеличить изображение" работает, т.е скрипт pirobox запускается появляется 2 изображение, а вот координаты отображаются, но за пределами изображения, если же кликнуть по изображению, тут все нормально, координаты появляются согласно js скрипта строчки:

Цитата:if (xy_class=='acad') { xy_pos_x=60; xy_pos_y=65; }

3. Сам код html:

<div class="entry">

<h3><img src="img/icons/autocad.png" />Autodesk AutoCAD 2015</h3>

<h5><a href="img/gallery/autocad.png" class="pirobox" title="Autodesk AutoCAD">&darr; Увеличить изображение</a></h5>
<a href="img/gallery/autocad.png" class="pirobox" title="Увеличить изображение"><img class="acad" src="img/gallery/autocad-image.png" alt="Autodesk AutoCAD" /></a>

<div class="right">
<p>Lorem Ipsum is simply dummy text<p>
</div>
</div> <!-- entry ends -->

Для ссылки <a><img /></a> идущей после тега h5<a></a></h5> все нормально работает, а вот для тега h5 внутри которого ссылка "Увеличить изображение" координаты не работают должным образом.

Пытался сам добавлять h5 a в pirobox скрипт, но не работает:

Цитата:$(document).ready(function(){
$(".entry a").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

$(".unique").find("img").live('mousemove', function(e) {

При таком подходе работает ссылка <a><img /></a> идущая после тега h5<a></a></h5>, а координаты для ссылки "Увеличить изображение" не работают.

Надеюсь я более или менее изъяснился правильно, надеюсь сможете помочь несмотря, что тема не новая.

С уважением и заранее благодарен .

[ale10ey]

Добавление

Цитата:.entry h5 a

в код результата не дает.

Цитата:$(document).ready(function(){
$(".entry a").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

$(".unique").find("img").live('mousemove', function(e) {

Может быть проблема, что скрипт ищет .find("img") и находит внутри .entry a, но в теге h5 (который также находится внутри entry имеется только ссылка "Увеличить изображение", и если прописать .find("a, img") также не работает или для ссылки что-то необходимо поменять?

Заранее благодарен.