Neu vermessen bei Window Mode

html.de-Forum JavaScript
1

Hallo liebes Forum,

folgendes Problem:
Ich habe hier erstmal einen kleinen Codeschnipsel eines sticky headers:

[CODE]$(function () {
createSticky($(„header“));
});

function createSticky(sticky) {

pos5 = sticky.offset().top;
win5 = $(window);

$(window).resize(function (e) {
    setTimeout(function () {
        pos2 = sticky.offset().top;
        pos5 = e.target.pos2;
    }, 500);
});


win5.on("scroll", function () {
    win5.scrollTop() >= pos5 ? sticky.addClass("fixed") : sticky.removeClass("fixed");
    $('.main').css("margin-top", "50px");
    win5.scrollTop() >= pos5 ? $('.main').css("margin-top", "50px") : $('.main').css("margin-top", "0px");
});

}[/CODE]

Also bei einem resize werden die Variablen pos5 und win5 ja schon geupdatet. Wenn ich allerdings mal auf den Button für den window-Mode drücke, dass Fenster ganz klein ziehe und dann (WICHTIG) AUF den Button für das Maximieren drücke, wird die Variable nicht geupdatet, da ja kein resize im Sinne von klein- oder großziehen stattfindet.
Ich habe mal gelesen, dass es unmöglich ist mit Jquery zu überprüfen, ob das Fenster nun im Window-Mode ist oder nicht.
Habt ihr da irgendwelche Lösungsvorschläge?

http://www.webdingo.net/zoo/
Diese Seite hat es irgendwie geregelt bekommen.

2

Was soll der Window Mode sein? Das Gegenteil von Fullscreen?

Wofür das Timeout in resize()? Wenn das schon so eine Art Optimierung sein soll, dann sollte das Timeout auch immer wieder „gecleart“ werden. Sonst kann man sich das gleich sparen.

3

[ATTACH=full]4770[/ATTACH]

[ATTACH=full]4771[/ATTACH]

Gut das du mich drauf ansprichst. Wollte ich eh noch eine Lösung für finden.
Aus irgendwelchen Gründen funktioniert es ohne Timeout nicht mehr…
Wenn ich das timeout cleare, funktioniert es auch nicht

4

Zum Timeout - wenn dann so:

[CODE=JavaScript]var timeout = null;

$(window).resize(function () {
clearTimeout(timeout);
timeout = setTimeout(…, 500);
});[/CODE]

Ersteres müsste sich per „screen.availHeight“ ableiten lassen. Natürlich genauso für die Breite:

[CODE=JavaScript]var isMaximized = function () {
return screen.availHeight <= window.outerHeight && screen.availWidth <= window.outerWidth;
};

if(isMaximized()) {…}[/CODE]

5

Ich verstehe was dein Gedanke war, jedoch funktioniert das leider nicht.
Der Browser erkennt keinen Größenunterschied.
Also für ihn verändert sich das Browserfenster gar nicht

6

Habe es jetzt extra getestet und nach ein paar Anpassungen für MacOS (availHeight ist um 1 Größer als möglich), Timeout wird auf Grund der Fensteranimation benötigt.

Funktioniert für mein Empfinden einwandfrei - zumindest auf Mac:

[CODE=JavaScript]var isMaximized = function () {
return screen.availHeight-1 <= window.outerHeight && screen.availWidth <= window.outerWidth;
};

var timeout = null;

window.onresize = function () {

clearTimeout(timeout);

timeout = setTimeout(function () {
    if(isMaximized()) console.log('fullscreen');
    else console.log('windowed');
}, 500);

};[/CODE]

7

Oh,
Ich hatte die -1 vergessen…

Aber danke, es funktioniert jetzt

8

Die -1 ist nur ein Hack, da availHeight mir 1372 zurückgibt, die maximale Höhe die ich jedoch erreichen kann nur 1371 beträgt. Vielleicht gibt es auch eine bessere Lösung dafür.

9

ja aber ohne funktioniert es nicht…
Muss wohl so gehen.