CSS über JS automatisch wechseln? |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
CSS über JS automatisch wechseln? |
Fri. 16. March 2007, 13:58
Beitrag
#1
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@alle
Ich möchte eine CSS-Datei nach einer gewissen Zeit automatisch austauschen lassen. Also nach einer gewissen Zeit, soll eine andere CSS-Datei geladen werden. Habe dazu ein script geschrieben jedoch funktioniert das so nicht und ich komme nicht dahinter warum, evtl. erkennt jemand von euch warum. QUELLTEXT <script> <!-- function makeArray() { this.length = makeArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = makeArray.arguments[i] } var css= new makeArray ("1.css", "2.css", "3.css", "4.css", "5.css"); var nummer = 1; function wechsle() { document.getElementsByTagName("link"); document.href = "css/"+css[nummer]; nummer += 1; if (nummer == 6) nummer = 1; setTimeout("wechsle()", 1500); } //--> </SCRIPT> <link href="css/default.css" rel="stylesheet" type="text/css" title="default"/> Im body wird die Funktion wechsel noch geladen. <body onLoad="wechsle()"> Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Fri. 16. March 2007, 15:31
Beitrag
#2
|
|
Advanced Member Gruppe: Members Beiträge: 54 Mitglied seit: 26.06.2006 Wohnort: Karlsruhe Mitglieds-Nr.: 3 |
so sollte es eher gehen.
dafür muß natürlich die zu wechslende CSS datei das erste link-Element auf der Seite sein. die makeArray-Klasse ist übrigens überflüssig. der "[x,y,z]" shorthand erzeugt das ja viel schöner QUELLTEXT var css = ["1.css", "2.css", "3.css", "4.css", "5.css"];
var nummer = 1; function wechsle() { if (!</span><span class="postcolor">document.getElementsByTagName) return;</span> <span class="postcolor"> var link = document.getElementsByTagName("link")[0]; link.href = "css/"+css[nummer]; nummer += 1; if (nummer == 6) nummer = 1; setTimeout("wechsle()", 1500); } Der Beitrag wurde von Daniel bearbeitet: Fri. 16. March 2007, 15:32 -------------------- Technikwürze - Design & Webstandards Podcast |
|
|
Fri. 16. March 2007, 15:36
Beitrag
#3
|
|
Advanced Member Gruppe: Members Beiträge: 54 Mitglied seit: 26.06.2006 Wohnort: Karlsruhe Mitglieds-Nr.: 3 |
diese komischen "postcolor" spans mußt du dir wegdenken ...
-------------------- Technikwürze - Design & Webstandards Podcast |
|
|
Fri. 16. March 2007, 16:00
Beitrag
#4
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@daniel
Super! Danke viel mal es funktioniert, mit diesem Script. QUELLTEXT <script> <!-- var css = ["1.css", "2.css", "3.css", "4.css", "5.css"]; var nummer = 0; function wechsle() { var link = document.getElementsByTagName("link")[0]; link.href = "css/"+css[nummer]; nummer += 1; if (nummer == 5) nummer = 0; setTimeout("wechsle()", 1500); } //--> </SCRIPT> der erste < link> muss das CSS enthalten also auch so etwas muss auch danach aufgeführt werden. QUELLTEXT < link rel="shortcut icon" href="favicon.ico" /> Noch etwas, die CSS-Dateien können beliebig benannt werden müssen natürlich im Verzeichnis css/ sein und "nummer = 1;" kann man auf 0 setzen dann startet er von der ersten CSS-Datei an auch "nummer == 5" muss mit der Anzahl CSS-Dateien überein stimmen. Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Fri. 16. March 2007, 16:59
Beitrag
#5
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@daniel
Genial währe so noch diese CSS überblenden zu können Wie bei einer Slideshow. Weisst du evtl. auch dazu eine lösung für IE und FF? Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Fri. 16. March 2007, 20:51
Beitrag
#6
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Genial währe so noch diese CSS überblenden zu können Wie bei einer Slideshow. Weisst du evtl. auch dazu eine lösung für IE und FF? wie wärs einfach mit einem dieser vielen Effekt-Frameworks? Ich hab mal mit moo.fx gearbeitet, das ist eigentlich ganz cool, nur 3kb, hat nette Effekte und ist recht einfach in der Handhabung. http://moofx.mad4milk.net/ Dann einfach das Body-tag ausbelnden, css wechseln, body einblenden. So zumindest die Theorie -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Sun. 18. March 2007, 15:42
Beitrag
#7
|
|
Advanced Member Gruppe: Members Beiträge: 54 Mitglied seit: 26.06.2006 Wohnort: Karlsruhe Mitglieds-Nr.: 3 |
ja, je nachdem was du eignetlich genau in den CSS Dateien änderst. Aber ohne JavaScript Library (prototype+scritacolus, jQuery, moofx, YUI-EXT wären da Kandidaten) kommst du da wohl nicht aus. Mit denen kannst du dann direkt in dem JavaScript die CSS-Anweisungen und ihre Übergangsfunktionen definieren.
-------------------- Technikwürze - Design & Webstandards Podcast |
|
|
Vereinfachte Darstellung | Aktuelles Datum: 19.4.24 - 08:04 |