Frage Neu vermessen bei Window Mode

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

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
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.
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
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.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Unbenannt.PNG
Unbenann1t.PNG
Wofür das Timeout in resize()?
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
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83

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:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
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
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
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);

};
 
  • Like
Reaktionen: Aaron3219
Werbung: