✔ jquery animate und screens

[kosovafan]

Hallo,

ich versuche mich gerade mit Jquery und twitter. Soweit läuft es, allerdings um den responsiv design der Website zu folgen wäre auf ein Desktopn die animate Funktion waagerecht, aber auf mobilen Endgeräten senkrecht.

Wie kann ich das den am besten bewerkstelligen, zumal auf größeren Bildschirmen float genutzt wird und hier ebenfalls senkrecht benötigt wird.

$('.twitter .tweet').twittie({
    dateFormat: '%b. %d, %Y',
    template: '<strong class="date">{{date}}</strong> - {{screen_name}} {{tweet}}',
    count: 10
}, function () {
    setInterval(function() {
        var item = $('.twitter .tweet ul').find('li:first');

        item.animate( {
            marginLeft: '-220px', 
            'opacity': '0'
        }, 500, function() {
            $(this).detach().appendTo('.twitter .tweet ul').removeAttr('style');
        });
    }, 5000);
});

Es geht im item.animate. Wie könnnte man diese Schritte nutzen um es waagerecht und senkrecht je nach screen width nutzen zu können?

Danke und Gruß
Silvio

 

[Quaese]

Hi,

ich weiss nicht, ob ich das Problem richtig verstanden habe. Aber vielleicht hilft es dir, das "Animationsobjekt" in Abhängigkeit der Fensterbreite zu erstellen.

var item = $('.twitter .tweet ul').find('li:first'),
    // Fensterbreite ermitteln
    width = $('body').innerWidth(),
    anim;

// falls es sich um weniger als 900 Pixel handelt
if (width < 900) {
    anim = {
        marginTop: '-220px',
        'opacity': '0'
    }
// für 900 und mehr Pixel
} else {
    anim = {
        marginLeft: '-220px',
        'opacity': '0'
    }
}

item.animate(anim, 500, function() {
    $(this).detach().appendTo('.twitter .tweet ul').removeAttr('style');
});

Ciao
Quaese

 

[kosovafan]

Hallo,

danke für die Idee. If Abfrage habe ich total vergessen. Es läuft jetzt zur Zufriedenheit. Vielen Dank.

Silvio