WORLD OF WARCRAFT

Тема: Требуется помощь с javascript  (Прочитано 3267 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Kermit

  • Администратор
  • Ветеран
  • *****
  • Сообщений: 8586
Требуется помощь с javascript
« : 30 Ноября, 2010, 02:43:59 »
  • Рейтинг:0 (+0 | 0)


Срочно требуется помощь гуру javascript.

Суть дела. Есть код, основанный на jquery. Что он делает: при наведении мыши на специально сформированный smf тег, справа от курсора появляется слой с картинкой. Убираем мышь, картинка исчезает. Иллюстрации:

Картинка 1
Картинка 2 - курсора мыши не видно, но он на центральной ссылке tort-1.

<script type="text/javascript">
this.screenshotPreview = function(){   
   /* CONFIG */
     
      xOffset = 10;
      yOffset = 30;
     
      // these 2 variable determine popup\'s distance from the cursor
      // you might want to adjust to get the right result
     
   /* END CONFIG */
   $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";

      $("body").append("<p id=\'screenshot\'><img style=\'height: 600px\' src=\'', 'http://www.noob-club.ru', '/media/"+ this.rel +"\' alt=\'image preview\' />"+ c +"</p>");
      $("#screenshot")
          .css("top",(e.pageY - xOffset - 300) + "px")
          .css("left",(e.pageX + yOffset) + "px")
          .fadeIn("fast");
    },
   function(){
      this.title = this.t;   
      $("#screenshot").remove();
    });   
   $("a.screenshot").mousemove(function(e){
      $("#screenshot")
         .css("top",(e.pageY - xOffset - 300) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};

Все работает как и должно, во всех браузерах. Но есть косяк: если ссылка расположена слишком близко к правому краю экрана, на ущербных разрешениях типа 1280х1024 всплывающая картинка вылезает за край. Это очень плохо.

Картинка 3

Что нужно: модифицировать код таким образом, чтобы если курсор мыши в момент наведения находился правее центра окна, всплывающая картинка показывалась не справа от курсора мыши, а слева от него. Получившийся код должен быть кроссбраузерным.

Нужно срочно и позарез. Помогите.  :'(
« Последнее редактирование: 30 Ноября, 2010, 02:57:11 by Kermit »

Андрейка

  • Завсегдатай
  • **
  • Сообщений: 872
Re: Требуется помощь с javascript
« Ответ #1 : 30 Ноября, 2010, 06:27:17 »
  • Рейтинг:2 (+2 | 0)
$("#screenshot")
.css("top",(e.pageY - xOffset - 300) + "px")
.css("left",(e.pageX + yOffset) + "px")
---------------

var bDefective = (screen.width <=1024 && e.pageX > $(window).width() / 2);
$("#screenshot")
.css("top",(e.pageY - xOffset - 300) + "px")
.css( bDefective ?"right":"left", e.pageX + (bDefective?-1:1) * yOffset) + "px")

Kermit

  • Администратор
  • Ветеран
  • *****
  • Сообщений: 8586
Re: Требуется помощь с javascript
« Ответ #2 : 30 Ноября, 2010, 11:55:36 »
  • Рейтинг:0 (+0 | 0)
Идет ругань на синтаксическую ошибку в этой строке:
.css( bDefective ?"right":"left", e.pageX + (bDefective?-1:1) * yOffset) + "px")

Андрейка

  • Завсегдатай
  • **
  • Сообщений: 872
Re: Требуется помощь с javascript
« Ответ #3 : 30 Ноября, 2010, 11:59:27 »
  • Рейтинг:0 (+0 | 0)
скобку перед e.pageX забыл %)
.css( bDefective ?"right":"left", (e.pageX + (bDefective?-1:1) * yOffset) + "px")

Kermit

  • Администратор
  • Ветеран
  • *****
  • Сообщений: 8586
Re: Требуется помощь с javascript
« Ответ #4 : 30 Ноября, 2010, 12:10:38 »
  • Рейтинг:0 (+0 | 0)
Почти работает, только вот если курсор находится в правой части экрана, картинка появляется не рядом с курсором слева, а несколько в отдалении. Выглядит не очень аккуратно. Это можно побороть?

Андрейка

  • Завсегдатай
  • **
  • Сообщений: 872
Re: Требуется помощь с javascript
« Ответ #5 : 30 Ноября, 2010, 12:16:38 »
  • Рейтинг:0 (+0 | 0)
фотка появляется справа от курсора на расстоянии, заданном в конфиге (yOffset)..
если фотка слева, то она должна появляться на таком же расстоянии (yOffset) - если проблема именно в этом расстоянии, то так:
.css( bDefective ?"right":"left", (e.pageX + bDefective?0:yOffset) + "px")

Ассемблер

  • Завсегдатай
  • **
  • Сообщений: 111
  • MOV TMOD, #01h

  • Варкрафт: +
    • Имя: Ассемблер
    • Класс: Маг
    • Сервер: Борейская тундра
Re: Требуется помощь с javascript
« Ответ #6 : 30 Ноября, 2010, 12:55:53 »
  • Рейтинг:0 (+0 | 0)
фотка появляется справа от курсора на расстоянии, заданном в конфиге (yOffset)..
если фотка слева, то она должна появляться на таком же расстоянии (yOffset) - если проблема именно в этом расстоянии, то так:
.css( bDefective ?"right":"left", (e.pageX + bDefective?0:yOffset) + "px")

есть подозрения что так должно быть
.css( bDefective?"right":"left", bDefective?($(window).width()-e.pageX+yOffset):(e.pageX + yOffset) + "px")
« Последнее редактирование: 30 Ноября, 2010, 13:00:20 by Ассемблер »


Kermit

  • Администратор
  • Ветеран
  • *****
  • Сообщений: 8586
Re: Требуется помощь с javascript
« Ответ #7 : 30 Ноября, 2010, 13:08:00 »
  • Рейтинг:0 (+0 | 0)
есть подозрения что так должно быть
.css( bDefective?"right":"left", bDefective?($(window).width()-e.pageX+yOffset):(e.pageX + yOffset) + "px")
Идеально. Спасибо огромное!

 

закрыть