jQueryとCutyCaptを使用したブラウザの相対的な配置

Question

私はCutyCaptを使用していくつかのWebページのスクリーンショットを大いに成功させてきました。私の挑戦は、ユーザーがクリックした場所を表すスクリーンショットにいくつかの点を描くことです。

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 

人のブラウザウィンドウの幅を返す必要があります。

希望すると便利です。