jQuery klassen aus Stylesheets ansprechen

BlackScorp · 20.10.2011, 12:31

hey leute,

ich möchte gerne ein kleines jQUery plugin schreiben um CSS3 Animationen auszuführen und falls es nicht vom Browser unterstützt wird, soll setIntervall als fallback für animationen dienen.

Also ich habe jetzt mal eine CSS3 Animation hingekriegt http://cccpmik.wmw.cc/animation/ (läuft nur unter FF und Webkit, soweit ich weis)

mein Problem dabei ist, ich müsste keyframes definieren bzw auslesen. Wie könnte ich mit hilfe von jQuery aus einer css datei @-moz-keyframes name{
[from|to|%]
}
auslesen?

ich habe mir das Ganze so vorgestellt, dass ich erstmal prüfe welchen Browser ich gerade habe und wenn dieser Browser die CSS3 funktionen nicht unterstützt, hole ich mir die werte aus den keyframes und lasse die als inline style im div erscheinen und mit setInterval wechseln.

Also was die eigentliche frage wäre ist, wie könnte ich am besten die keyframes aus der CSS datei auslesen.. oder habt ihr eventuell andere vorschläge?

MFG

nikosch · 20.10.2011, 13:29

Gar nicht würde ich mal sagen. JS kann nur auf das DOM zugreifen, nicht auf externe Dateien oder Stylesheets. Da müsstest Du schon nen CSS Parser schreiben.

BlackScorp · 20.10.2011, 13:49

naja ich könnte ja vorrübergehen divs erzeugen mit klassen, dessen css auslesen und daraus neue klassen erzeugen.. das problem ist aber dieser @-moz-keyframes ich weis nicht wie ich den inhalt dieser keyframes auslesen kann

rudygotya · 21.10.2011, 19:32

Ich hatte bei 2 anderen Projekten ein ähnliches Problem, allerdings gehts in dem Fall nicht um wahnsinnig komplexe Animationen. Um das zu lösen, habe ich Modernizr verwendet und alternativ zu css-Animationen einen js-Fallback (polyfill) geschnipselt. Modernizr bringt mittlerweile yepnope mit, damit könntest du je nach Bedarf resourcen laden. Kann dann z.b. so aussehen (Modernizr.load === yepnope):

PHP-Code:

  /*jslint devel: true, browser: true, confusion: false, continue: true, sloppy: true, eqeq: true, white: true, plusplus: true, maxerr: 50, indent: 4 */
/*global Modernizr, jQuery, yepnope */
( function( $, y ) {
  
y( {
    test : Modernizr.cssanimations,
    yep : '/js/jquery.css-animate.js',
    nope : {
        effects : '/js/jquery-ui/ui/minified/jquery.effects.core.min.js'
    },
    callback: function( url, i, key ) {
        if( key && key === 'effects' ) {
            y( {
                '/js/jquery-ui/ui/minified/jquery.effects.slide.min.js',
                complete : function() {
                    $( window ).trigger( 'slideReady' );
                }
            } );
        }
    }
    
} );
    
} )( jQuery, yepnope );

Ist zwar ein wesentlich einfacherer Anwendungsfall als für ein Onlinegame, aber evtl. bringt dich das schon weiter.
Oder den Source von isotope zu Gemüte führen

Grüße

Basti

BlackScorp · 21.10.2011, 20:28

hey ja danke für die Links ich werde die mir mal zur gemüt ziehen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
Best Practice jQuery -> DOM Elemente Ansprechen	da.eXecutoR	JavaScript, Ajax und mehr	9	08.01.2011 16:12
Wozu brauche ich eigentlich eine abstrakte Klasse?	echo	PHP Tipps 2010	28	24.11.2010 17:10
[Erledigt] Jquery div ansprechen	TZP	JavaScript, Ajax und mehr	4	15.10.2010 09:29
jQuery Bild in DIV ansprechen.	JanM	JavaScript, Ajax und mehr	2	14.06.2010 13:12
[Erledigt] Wie Objekte von Klassen zusammenführen	total2121	PHP Tipps 2009	6	19.10.2009 14:22
Mehrere Klassen verknüpfen	BlackJack01090	Software-Design	9	26.05.2009 20:43
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Fragen zu Klassen	Kein Genie	PHP Tipps 2006	3	08.05.2006 11:25
Sessions an includete Klassen übergeben	Dr_Enquinox	PHP Tipps 2006	4	29.04.2006 10:25
Klassen		PHP Tipps 2005	5	09.04.2005 18:51
Klassen in Klassen verwenden		PHP Tipps 2005	5	23.02.2005 14:08

20.10.2011, 12:31
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	jQuery klassen aus Stylesheets ansprechen hey leute, ich möchte gerne ein kleines jQUery plugin schreiben um CSS3 Animationen auszuführen und falls es nicht vom Browser unterstützt wird, soll setIntervall als fallback für animationen dienen. Also ich habe jetzt mal eine CSS3 Animation hingekriegt http://cccpmik.wmw.cc/animation/ (läuft nur unter FF und Webkit, soweit ich weis) mein Problem dabei ist, ich müsste keyframes definieren bzw auslesen. Wie könnte ich mit hilfe von jQuery aus einer css datei @-moz-keyframes name{ [from\|to\|%] } auslesen? ich habe mir das Ganze so vorgestellt, dass ich erstmal prüfe welchen Browser ich gerade habe und wenn dieser Browser die CSS3 funktionen nicht unterstützt, hole ich mir die werte aus den keyframes und lasse die als inline style im div erscheinen und mit setInterval wechseln. Also was die eigentliche frage wäre ist, wie könnte ich am besten die keyframes aus der CSS datei auslesen.. oder habt ihr eventuell andere vorschläge? MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.10.2011, 13:29
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gar nicht würde ich mal sagen. JS kann nur auf das DOM zugreifen, nicht auf externe Dateien oder Stylesheets. Da müsstest Du schon nen CSS Parser schreiben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

20.10.2011, 13:49
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	naja ich könnte ja vorrübergehen divs erzeugen mit klassen, dessen css auslesen und daraus neue klassen erzeugen.. das problem ist aber dieser @-moz-keyframes ich weis nicht wie ich den inhalt dieser keyframes auslesen kann __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

21.10.2011, 19:32
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Ich hatte bei 2 anderen Projekten ein ähnliches Problem, allerdings gehts in dem Fall nicht um wahnsinnig komplexe Animationen. Um das zu lösen, habe ich Modernizr verwendet und alternativ zu css-Animationen einen js-Fallback (polyfill) geschnipselt. Modernizr bringt mittlerweile yepnope mit, damit könntest du je nach Bedarf resourcen laden. Kann dann z.b. so aussehen (Modernizr.load === yepnope): PHP-Code: /jslint devel: true, browser: true, confusion: false, continue: true, sloppy: true, eqeq: true, white: true, plusplus: true, maxerr: 50, indent: 4 / /global Modernizr, jQuery, yepnope / ( function( $, y ) { y( { test : Modernizr.cssanimations, yep : '/js/jquery.css-animate.js', nope : { effects : '/js/jquery-ui/ui/minified/jquery.effects.core.min.js' }, callback: function( url, i, key ) { if( key && key === 'effects' ) { y( { '/js/jquery-ui/ui/minified/jquery.effects.slide.min.js', complete : function() { $( window ).trigger( 'slideReady' ); } } ); } } } ); } )( jQuery, yepnope ); Ist zwar ein wesentlich einfacherer Anwendungsfall als für ein Onlinegame, aber evtl. bringt dich das schon weiter. Oder den Source von isotope zu Gemüte führen Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

21.10.2011, 20:28
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	hey ja danke für die Links ich werde die mir mal zur gemüt ziehen __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen