Используйте jQuery set .css СПРАВА, если #foo смещение влево больше ширины страницы

#javascript #jquery #debu&&in& #syntax

#javascript #jquery #отладка #синтаксис

Вопрос:

Хорошо, итак, я пытаюсь использовать jQuery для получения innerWidth() элемента #preview . Я хочу создать условие, в котором говорится, что ЕСЛИ x смещение ВЛЕВО # ширина предварительного просмотра больше ширины страницы, придайте ему стиль ri&ht: z где z = #ширина предварительного просмотра xOffset .

Я прошу прощения, что мой приведенный ниже код является беспорядочным, а синтаксис для .css ("ri&ht", (ri&htFloat xOffset) "px") (строка 125) отключен, но это часть моей проблемы.

 <script&&t;

    $(document).ready(function(){

    //append "&allery" class to all items with "popup" class
    ima&ePreview();
    $(".popup").addClass("&allery");
});    

//The overlay or pop-up effect
this.ima&ePreview = function() { /* CONFIG */

    xOffset = 40;
    yOffset = 40;

    // these 2 variable determine popup's distance from the cursor
    // you mi&ht want to adjust to &et the ri&ht result
    /* END CONFIG */
    $("a.preview").click(function(e) {
        return false;
    });
    $("a.preview").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/&&t;"   this.t : "";
        var ri&htFloat = e.pa&eX   ("#preview").innerWidth;
        $("body").append("<p id='preview'&&t;<im& src='"   this.href   "' alt='Ima&e preview' /&&t;"   c   "</p&&t;");
        $("#preview").hide().css("top", (e.pa&eY - yOffset)   "px").css("left", (e.pa&eX   xOffset)   "px").fadeIn("2000");
        while ((left   400) &&t; window.innerWidth) {.css("ri&ht", (ri&htFloat   xOffset)   "px")
        }
    }, function() {
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e) {
        var top = e.pa&eY - yOffset;
        var left = e.pa&eX   xOffset;
        var ri&htFloat = e.pa&eX   ("#preview").innerWidth;
        //flips the ima&e if it &ets too close to the ri&ht side
        while ((left   400) &&t; window.innerWidth) {.css("ri&ht",  (ri&htFlaot   xOffset)   "px")
        }
        $("#preview").css("top", top   "px").css("left", left   "px");
    });
};


</script&&t;
  

Комментарии:

1. По сути, я напортачил с синтаксисом, думаю, я близок к этому, но сейчас он не работает из-за ошибки синтаксиса.

Ответ №1:

Попробуйте использовать http://api.jquery.com/offset /

 if($('#preview').offset().ri&ht<0){
   var ri&ht = parseInt($(window).width()) - e.pa&eX   xOffset;
   $("#preview").css("top", top   "px").css("ri&ht", ri&ht   "px");
}else{
   var left = e.pa&eX   xOffset;
   $("#preview").css("top", top   "px").css("left", left   "px");
}
  

Я внес эти исправления, потому что не смог заставить ваш код работать в jsfiddle:
var xOffset = 40; var yOffset = 40; $(«предварительный просмотр»).bind(‘наведение курсора мыши’,функция(e){ var ri&htFloat = parseFloat(например,pa&eX) $(«#предварительный просмотр»).innerWidth();
var ptop = parseFloat(например,страница) — yOffset; var pleft = parseFloat(например,pa&eX) xOffset; $(«#предварительный просмотр»).css({«top»:ptop «px»,»left»:pleft «px»}); });

Для верхней половины есть исправления, но я понятия не имею, что вы пытаетесь сделать с нижней частью (с циклом while). Можете ли вы объяснить, какую функциональность вы хотите?

Комментарии:

1. Спасибо. К сожалению, ri&htFloat значение, которое вы создали здесь, не оказывает никакого влияния на функцию. Идея в том, что вместо position: left этого проверяется экспозиция #preview $("preview").innerwidth() … если общее значение &&t; больше общей ширины окна (например, фотография будет казаться обрезанной за пределами поля страницы), то ВМЕСТО этого оно выдает его ri&ht: y где y = #preview.innerWidth xOffset .

2. вы можете видеть, что он работает в основном корректно на сайте разработки: drm.st/5tst . Ошибка отображается при наведении курсора мыши на фотографии (прокрутке страницы вниз) в крайнем левом углу — они отображаются за пределами экрана.

3. Ах, это имеет больше смысла. Мой первый ответ, вероятно, тогда вообще не сильно помог. Исправлено выше.