jQuery와 CutyCapt로 브라우저 상대 위치 지정

Question

저는 CutyCapt를 사용하여 여러 웹 페이지의 스크린 샷을 성공적으로 찍었습니다. 내 도전 과제는 이제 사용자가 클릭 한 위치를 나타내는 스크린 샷에 몇 개의 점을 그립니다.

CutyCapt는 스크린 샷을 찍기 전에 웹 페이지의 크기를 스크롤 폭만큼 조정하는 과정을 거칩니다. 페이지의 배경을 많이 볼 수는 없지만 콘텐츠를 얻을 수 있기 때문에 매우 유용합니다.

내 도전 과제는 사용자의 마우스 X 좌표를 스크린 샷에 매핑하는 것입니다. 분명히 사용자는 화면 해상도가 다르며 브라우저 창을 다른 크기로 열어 놓을 수 있습니다. 아래 이미지는 동일한 로고가있는 3 개의 예를 보여줍니다. 예를 들어, 로고가 "내용 영역"의 왼쪽 가장자리까지 10 픽셀 (빨간색)이라고 가정합니다.

이러한 경우와 해상도에 관계없이 로고의 X 좌표가 10이라고 계산할 JavaScript 루틴이 필요합니다. 다시 한 가지 도전 과제는 다른 해결책입니다. 가운데 맞춤 예제에서 브라우저의 왼쪽 가장자리 (검은 색)에서 측정 한 로고의 위치는 브라우저 크기가 변경 될 때마다 다릅니다. 왼쪽 정렬 된 예제는 화면 크기가 조정됨에 따라 로고가 움직이지 않으므로 단순해야합니다.

누구나 페이지의 화면 이동 폭을 계산할 수있는 방법을 생각할 수 있습니까? 즉, 가로 스크롤 막대가 나타나기 전에 브라우저 창의 최소 너비를 계산하는 JavaScript 솔루션을 찾고 있습니다. 그리고 요소 ID 나 클래스 이름을 먼저 모른 채이 작업을 수행해야합니다.

도움 주셔서 감사합니다.

Answer 1

당신은 요소가 필요로하는 전체 공간 얻을 수 있습니다 :

function getWidth(x){ 
    var totalWidth = x.width(); 
    totalWidth += parseInt(x.css("padding-left"), 10) + parseInt(x.css("padding-right"), 10); //Total Padding Width 
    totalWidth += parseInt(x.css("margin-left"), 10) + parseInt(x.css("margin-right"), 10); //Total Margin Width 
    totalWidth += parseInt(x.css("borderLeftWidth"), 10) + parseInt(x.css("borderRightWidth"), 10); //Total Border Width 
    return totalWidth; 

} 

당신은 요소의 위치에 그것을 추가 할 필요가 : 그래서

$('#yourlogo').offset().left; 

:

을

var window-width = $('#yourlogo').offset().left + getWidth($('#yourlogo')); 

희망이 도움이 : - ??

Answer 2

나는 당신을 올바르게 이해하고 있다면, 이것이 당신을 위해 무엇을해야만할까요!

var browserWidth=$(window).width(); // returns width of browser viewport 

사람 브라우저 창 너비를 반환해야합니다.

희망이 도움이됩니다.