Willkommen, Gast ( Anmelden | Registrierung )     [ Hilfe | Mitglieder | Suche ]

 
Reply to this topicStart new topic
> CSS über JS automatisch wechseln?
feniweb
Beitrag 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)
Go to the top of the page
 
+Quote Post
Daniel
Beitrag 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 smile.gif

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
Go to the top of the page
 
+Quote Post
Daniel
Beitrag 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
Go to the top of the page
 
+Quote Post
feniweb
Beitrag 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
&lt;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)
Go to the top of the page
 
+Quote Post
feniweb
Beitrag 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)
Go to the top of the page
 
+Quote Post
smail
Beitrag Fri. 16. March 2007, 20:51
Beitrag #6


Advanced Member
********

Gruppe: AdvancedMembers
Beiträge: 587
Mitglied seit: 01.07.2006
Mitglieds-Nr.: 62



ZITAT(feniweb @ Fri. 16. March 2007, 16:59) *
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 smile.gif


--------------------
Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
Go to the top of the page
 
+Quote Post
Daniel
Beitrag 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
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 19.4.24 - 08:04

Sefrengo ist ein eingetragenes Markenzeichen und urheberrechtlich geschützt.
Copyright 2009 Design & Daten, Alle Rechte vorbehalten.