• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Neu vermessen bei Window Mode

Aaron3219

Senior HTML'ler
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");
    });
  
}

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.
 
Werbung:
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");
    });
 
}

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.

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.
 
Werbung:

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...

Das timeout habe ich aber (hoffentlich jetzt) richtig gecleart
Code:
$(window).resize(function (e) {
        var timer = setTimeout(function () {
            pos2 = sticky.offset().top;
            pos5 = e.target.pos2;
        }, 00);
        clearTimeout(timer);
    });

Zum Timeout - wenn dann so:
Javascript:
var timeout = null;

$(window).resize(function () {
  clearTimeout(timeout);
  timeout = setTimeout(..., 500);
});

Ersteres müsste sich per "screen.availHeight" ableiten lassen. Natürlich genauso für die Breite:
Javascript:
var isMaximized = function () {
  return screen.availHeight <= window.outerHeight && screen.availWidth <= window.outerWidth;
};

if(isMaximized()) {...}
 
Zuletzt bearbeitet:
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
 
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:

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);

};
 
Werbung:
Werbung:
Zurück
Oben