jQuery - Toggle blendet Navigation aus

[Quabbe]

Hi,

ich arbeite gerade an einem responsive layout. Die Navigation wird bei <560px per CSS durch "display:none" ausgeblendet und durch einen Button per jQ.toggle wieder eingeblendet. Wenn man die Navigation dann nach zweimaligem Klick auf den Button wieder geschlossen hat und das Fenster erneut auf >560px zieht, ist die Navigation immer noch ausgeblendet.

Wie kann ich jQuery verklickern, dass er die Navigation bei >560px immer anzeigen soll?


Gruß,
Quabbe

 

[cebito]

und das Fenster erneut auf >560px zieht

Und das macht in der Realität WER? Du merkst das zwar beim Prüfen, aber kein User zieht ständig sein Browserfenster groß und klein. Denk mal drüber nach.

 

[Quabbe]

Darüber nachgedacht habe ich. Und wenn es doch einer macht? ;-)

Es wird doch bestimmt irgendeine Möglichkeit geben, jQuery mit Mediaqueries in Einklang zu bringen, oder nicht?

Dasselbe Problem ist mir beim Einblenden von Elementen beim Laden der Seite aufgefallen. Wenn die Seite anschließend auf <560px gezogen wird, wo sich die entsprechenden Elemente anders verhalten sollten, sehen sie immer noch so aus wie in der >560px Ansicht.

 

[Duddle]

Ist die Seite irgendwo online? Oder hast du den relevanten Codeauszug bereit, damit man das mal lokal nachvollziehen kann?


Duddle

 

[Quabbe]

Ich lade sie kurz hoch. Gebt mir drei Minütchen.

Da ist sie: www.vermittelmich.de

Momentan ist sie nur für -webkit-browser optimiert.

 

[Myhar]

Es wird doch bestimmt irgendeine Möglichkeit geben, jQuery mit Mediaqueries in Einklang zu bringen, oder nicht?

jQuery ist nichts anderes als Javascript. Und in Javascript kannst du einen Eventhandler auf window.resize setzen und eine Funktion aufrufen. Was du dann in dieser Funktion machst bleibt dir überlassen.

 

[Duddle]

Ich würde wohl die Lösung wie hier bzw. hier beschrieben nutzen. Irgendwie muss jQuery mitbekommen, dass der Media Query "wirkt" und die gezeigten Ansätze scheinen das am direktesten umzusetzen.


Duddle

 

[Quabbe]

Danke Duddle, der erste Link hat die Lösung gebracht. Zwar macht mir die Scrollbar noch einen kleinen Strich durch die Rechnung, weil sie bei der width ignoriert zu werden scheint. Aber damit kann ich leben. Die Abfrage, ob ein Element innerhalb des Mediaqueries über eine bestimmte Angabe verfügt, klappt bei mir jedenfalls nicht.

Die Seite habe ich wieder runter genommen.


Gruß,
Quabbe

 

[afr0kalypse]

Und das macht in der Realität WER? Du merkst das zwar beim Prüfen, aber kein User zieht ständig sein Browserfenster groß und klein. Denk mal drüber nach.

ICH mache das sehr wohl!
Du glaubst gar nicht, auf was für verrückte Ideen manche User so kommen.

 

[RockyRick]

jQuery(window).resize(function(){
            if(jQuery(window).width() < 1119){
                tuetwas();
                if(jQuery(window).width() < 870){
                    tunochetwas();
                }else{
                    machnochwasanderes();
                }
            }else{
                machetwasanderes();
            }
        });

erledigt?