2 Có cách nào để di chuyển một đối tượng HTML nếu đối tượng quá gần với đường viền của cửa sổ không?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Bối cảnh: Khi tôi di chuột vào hình ảnh thẻ, một hộp xuất hiện và nó hiển thị các ảnh nghệ thuật. Vấn đề của tôi là, nếu thẻ quá gần với viền trái hoặc phải của cửa sổ, nó sẽ cắt hộp và chúng ta không thể nhìn thấy infos nữa.

Câu hỏi thực tế: Có cách nào trong CSS hoặc JavaScript để di chuyển hộp sang bên phải nếu nó quá lớn để vừa với màn hình không?

 https://imgur.com/a/tO5JnZq

Hình ảnh cho thấy hộp bị cắt vì quá gần với viền trái của cửa sổ

    
1
  1. bạn có đang sử dụng một số plugin công cụ như plugin để hiển thị thông tin của thẻ
    2019-05-08 16: 03: 48Z
  2. nhận vị trí con trỏ khi sự kiện di chuột được kích hoạt, nếu nó nhỏ hơn chiều rộng của div xuất hiện từ cạnh màn hình thì sửa đổi vị trí của nó (+ /-) từ vị trí con trỏ
    2019-05-08 16: 06: 49Z
  3. @ MuhammadOmerAslam không tôi không sử dụng bất kỳ plugin nào nhưng tôi nghĩ rằng tôi đã tìm thấy giải pháp, cảm ơn!
    2019-05-08 17: 03: 54Z
2 Câu trả lời                              2                         

Tôi đã làm một cái gì đó như thế này gần đây trong jquery, về cơ bản, bạn có được chiều rộng màn hình và vị trí màn hình con trỏ khi bắn tooltip, nếu nó không phù hợp thì hãy di chuyển nó cho đến khi nó:

$('.showtooltip').on('click touchend', function (e){
    const screenWidth = $(window).width() / 2;
    const x = e.pageX; //Cursor X position
    const y = e.pageY; //Cursor Y position
    const tooltipDirection = e.pageX < screenWidth ? 10 : -200;// if click is on the right of the screen show tooltip to the left of event(-200px)
    const content = "Here's a tooltip";

    if (content.length > 0)
    {
        //insert a span with your content or whatever here
        $('body').append("<div class='custom-tooltip' style='position:absolute;left:" + (x + tooltipDirection) + "px;top:" + y +"px;background-color:#ffa;border:1px solid #cc9;padding:3px;font-size:13px;-moz-box-shadow: 2px 2px 11px #666;-webkit-box-shadow: 2px 2px 11px #666;'>" + content + "</div>");


         setTimeout(function(){//remove the span after 3 seconds
             $('.custom-tooltip').fadeOut(function(){
                 $(this).remove();
             });
         },3000);
    }   
});
    
1
2019-05-08 16: 15: 47Z
  1. Ý kiến ​​hay cảm ơn bạn!
    2019-05-08 17: 04: 44Z

Sử dụng CSS nội tuyến, lề hoặc phần đệm cho không gian ở bên trái:

style="margin:10px" or "padding:10px"

cho lề hoặc phần đệm ở bên phải:

style="position:absolute,right:10px,margin:10px" or "padding:10px"

Hy vọng nó sẽ hoạt động cho mục đích của bạn.

    
- 2
2019-05-08 16: 45: 33Z
nguồn đặt đây