[sepp88]

Hallo Leute,

ich versuche gerade folgendes zu realisieren...wenn das Browserfenster kleiner ist, als 790px in der Höhe, soll eine Infobox (ein div mit der id="info") auf top:30px gesetzt werden und eine toggle-funktion aktiviert werden, die das gleiche Div beim Klicken nach nach unten oder nach oben schiebt.
Das Ganze soll aber nur in Kraft treten wenn das Fenster unter 790 ge-resized wird. Sonst soll das #info div auf die höhe 250 gesetzt werden.

PHP-Code:

    $(window).resize(function() {
        var height_window = $(window).height();
        if (height_window < 790) {
                
                    $("#info").css('top', '30px');
                    $("#info").css('cursor', 'pointer');
                    
                $('#info').toggle(function() {
                    $("#info").stop().animate({top: '250px'}, 'fast');
                }, function() {
                    $("#info").stop().animate({top: '30px'}, 'fast');
                });

        } else {

                $("#info").css('cursor', 'default');
                $("#info").stop().animate({top: '250px'}, 'fast'); 

        }    
    });
    $(window).resize(); 


Es funktioniert ansatzweise ganz gut, aber irgendwie wird die resize Funktion gefeuert auch wenn ich außerhalb der 790 px bin. Was mach ich denn da falsch?

[hemfrie]

Hallo Sepp,

verstehe nicht ganz was das Problem ist.

resize() ist ein Event-Handler und natürlich wird das Event bei jedem Resize ausgelöst (auch wenn die Höhe > 790px ist).


Das $(window).resize(); am Ende hat keine Funktion, das kann weg.

[sepp88]

kann ich mein Problem beim Vergrößern/Verkleinern des Fensters dann anders beheben?

Was ich erreichen will. Wenn die Browserfensterhöhe größer als 790px ist, soll gar nichts passieren. Das #info div soll auf der höhe 250px stehen und NICHT klickbar sein, also keine Togglefunktion.

Wenn das Fenster allerdings unter 790px verkleinert wird, soll das #info div nach oben sliden (top:30px) und die toggle funktion aktiv werden. Die toggle funktion soll bei klick bewirken, dass das #info div auf die 250px position slided, bei erneutem klick soll es wieder auf 30px sliden.

Wenn das Fenster dann wieder vergrößert wird, soll das #info div wieder egal auf welcher höhe es sich gerade befindet (30px oder 250px) auf die position 250px sliden und die toggle funktion soll wieder deaktiviert sein.

[hemfrie]

Der toggle Event-Handler bleibt bei Dir im Moment auch bei bei einer Höhe > 790px bestehen.

Du musst Dein $('#info') mit .unbind() davon befreien, damit die toggle Funktion bei der Höhenüberschreitung nicht weiter ausgeführt wird.

javascript:

PHP-Code:

var infobox = $('#info');

$(window).resize(function() {
    var height_window  = $(window).height();
    
    if (height_window  < 790) {                             
        infobox.css({'top':'30px','cursor':'pointer'});
     
        infobox.toggle(function() {
               $(this).stop().animate({top: '250px'}, 'fast');
        }, function() {
               $(this).stop().animate({top: '30px'}, 'fast');
        });
     } else {             
        infobox.stop().unbind().css({'cursor':'default'})
               .animate({top: '250px'}, 'fast');
    }    
}); 


[sepp88]

Danke, super!

Kann ich per jquery auch abfragen, ob ein Element z.b. einen bestimmen Wert eines CSS Attributes hat?

Also quasi (pseudocode)

if (infobox.css({'top' == '250px'}) ...

[hemfrie]

Ja, das geht. Die Syntax sieht wie folgt aus:

Ein Beispiel

javascript:

PHP-Code:

$('.blub').css({'top':'250px','background':'green'});

if($('.blub').css('top') == '250px'){
   alert('true');   
} 


[hemfrie]

Das Resize-Event feuert übrigens sehr häufig. Es könnte daher unter Umständen sinnvoll sein, einen kleinen Timer einzubauen, damit die Resize Aktionen nicht zu oft aufgerufen werden.

Beispiel-Code: Resize Window - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Achte auf die Counter-Zahl in der Infobox - Screenr - @xhtmlforum: jQuery resize mit setTimeout

Wenn Du das ganze ohne setTimeout ausprobierst, wird der Counter um einiges weiter hochzählen. Musst Du mal checken, welches Setting für Dich am Besten passt.

[sepp88]

Tausend Dank! echt spitze!

[hemfrie]

gern geschehen