[Kermit]

• ВКонтакте
• Twitter
• Telegram
• WhatsApp

Срочно требуется помощь гуру 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

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

Нужно срочно и позарез. Помогите.  :'(

[Андрейка]

$("#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]

Идет ругань на синтаксическую ошибку в этой строке:
.css( bDefective ?"right":"left", e.pageX + (bDefective?-1:1) * yOffset) + "px")

[Андрейка]

скобку перед e.pageX забыл %)
.css( bDefective ?"right":"left", (e.pageX + (bDefective?-1:1) * yOffset) + "px")

[Kermit]

Почти работает, только вот если курсор находится в правой части экрана, картинка появляется не рядом с курсором слева, а несколько в отдалении. Выглядит не очень аккуратно. Это можно побороть?

[Андрейка]

фотка появляется справа от курсора на расстоянии, заданном в конфиге (yOffset)..
если фотка слева, то она должна появляться на таком же расстоянии (yOffset) - если проблема именно в этом расстоянии, то так:
.css( bDefective ?"right":"left", (e.pageX + bDefective?0:yOffset) + "px")

[Ассемблер]

фотка появляется справа от курсора на расстоянии, заданном в конфиге (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")

[Kermit]

есть подозрения что так должно быть
.css( bDefective?"right":"left", bDefective?($(window).width()-e.pageX+yOffset):(e.pageX + yOffset) + "px")

Идеально. Спасибо огромное!