Browser relative Positionierung mit jQuery und CutyCapt

Question

Ich habe CutyCapt verwendet, um Screenshots von mehreren Webseiten mit großem Erfolg zu machen. Meine Herausforderung besteht nun darin, ein paar Punkte auf diese Screenshots zu malen, die darstellen, wo ein Nutzer geklickt hat.

In CutyCapt wird die Größe der Webseite auf die Bildlaufbreite geändert, bevor ein Screenshot erstellt wird. Das ist sehr nützlich, weil Sie nur Inhalt und nicht viel (wenn überhaupt) den Hintergrund der Seite erhalten.

Meine Aufgabe versucht, die X-Koordinaten eines Benutzers mit der Maus auf dem Screenshot abzubilden. Offensichtlich haben Benutzer unterschiedliche Bildschirmauflösungen und haben ihr Browserfenster für verschiedene Größen geöffnet. Das Bild unten zeigt 3 Beispiele mit demselben Logo. Nehmen Sie zum Beispiel an, dass das Logo 10 Pixel zum linken Rand des "Inhalt" -Bereichs (in Rot) ist.

In jedem dieser Fälle, und für jede Auflösung, brauche ich eine JavaScript-Routine, die berechnet, dass die X-Koordinate des Logos 10 ist. Auch hier ist die Herausforderung (glaube ich) unterschiedliche Auflösungen. In den zentrierten Beispielen variiert die Position des Logos, gemessen vom linken Rand des Browsers (in Schwarz), mit der Größe des Browsers. Das linksbündige Beispiel sollte einfach sein, da sich das Logo bei der Größenänderung des Bildschirms niemals bewegt.

Kann jemand an eine Möglichkeit denken, die scrollbare Breite einer Seite zu berechnen? Mit anderen Worten, ich suche nach einer JavaScript-Lösung, um die minimale Breite des Browserfensters zu berechnen, bevor eine horizontale Bildlaufleiste angezeigt wird. Und ich muss dies tun, ohne zuerst irgendwelche Element-IDs oder Klassennamen zu kennen.

Danke für Ihre Hilfe!

Answer 1

Sie können den gesamten Speicherplatz bekommen ein Element benötigt:

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; 

} 

Sie haben das des Elements in die Position hinzuzufügen:

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

So:

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

Hoffe das hilft: - ??

Answer 2

Wenn ich Sie richtig verstehe, dann sollte das für Sie funktionieren!

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

Es sollte die Breite der Personen Browserfenster zurückgeben.

Hoffe, das hilft!