geht das mit Ajax? sofortige umsetzung für den User bei externen Stylesheet

[strgg]

Hallo Leute

Ich möchte auf einen Userinput bei meiner Webseite deren diverse extern-eingebundene (same Server) CSS-files anpassen lassen?

1. User ändert z.B. die Farbe
2. Ajax übermittelt und schreibt die Stylesheet's um
3. unmittelbar darauf ändert sich die Webseite

ist dies möglich oder muss ich nach der stylesheet-änderung nochmals einen ajaxcall an die index.php abfeuern damit die Webseite überhaupt reagiert?

PS: Mit php hatte ich bereits versucht durch Get/Post variablen umschreiben zu lassen, jedoch ist die index.php bei mir nur ca. 20 zeilen lang und hält Verweise auf extrem viele css und weitere php files wobei ich dann diese auch alle mit den variablen ergänzen müsste. Ajax scheint zudem ressourcenschonender zu sein und ich kann gezielt pro Input die jeweilige Datei ansteuern. Sorry, bin noch ein bisschen newbe bzgl. Ajax. Wäre schön wenn mir jemand sagen würde, ob dies machbar wäre.

Als ich es mit Javascript versucht hatte (die meisten der div-id's verwenden css-klassen von externen Sheets), so konnte ich mit folgender function nicht die änderung des style-attributs bewirken

function colorize(){
var c = getElementById("colorme");
c.style.background= getElementById("colorget").value;
}

html

<div id="colorme" class="anyclass">platzhaltertext</div>
<input type="text" id="colorget" value="#ff0000">
<input type="button" value"changeColor" onclick="colorize()"/>

Kann es sein dass die bestehende klassendefinition stärker ist als meine Neudefinition, muss ich daher die Klasse (welche diverse weitere styles ausser der farbe enthält) gänzlich mit JS killen?

[BlackScorp]

mit ajax ist das möglich aber unnötig.. angenommen du änderst eine farbe von irgend einem div und schickst die farben an eine php datei, die deine style.css ändert, danach musst du so oder so einen refresh machen damit deine seite das veränderte style.css annimmt .. von daher, kann man doch gleich daten über ein formular oder sonstigem weiterschicken. ajax ist eigentlich dafür gedacht daten vom server holen oder daten an den server schicken, während irgendwas im vordergrund lauft und wo die seite nicht aktualisiert werden sollte.. also mach das gleich mit php

MFG

EDIT: hier haste ein schönes beispiel wie man das umsetzen könnte
http://jqueryui.com/themeroller/

da haste ein formular und alle inhalte werden an die URL übergeben, wenn man dann auf speichern klickt, wird eine css datei erzeugt und seite neu aktualisiert

[strgg]

@BlackScorp
Danke für den Ratschlag.

EDIT: hier haste ein schönes beispiel wie man das umsetzen könnte
jQuery UI - ThemeRoller

Ich benutze bereits das Interface vom themeroller.
Hatte hingegen gedacht das dies auf Ajax basiert da ich kein Iframe im Source gefunden hatte und die Seite nicht neu lädt. Es werden per get parameter übergeben deshalb schloss ich auf ajax

Also kann/sollte ich wohl deiner Meinung nach per Ajax nicht zielgerichtet einzelne classen oder styles für die index.php neuladen lassen.

Könntest Du mir noch helfen und sagen warum mein Javascript kein Ergebnis ergab:

Kann es sein dass die bestehende klassendefinition stärker ist als meine Neudefinition, muss ich daher die Klasse (welche diverse weitere styles ausser der farbe enthält) gänzlich mit JS killen?

Hast mir schon sehr weitergeholfen. Vielen Dank

[BlackScorp]

ganz einfach... javascript verändert eine eigenschaft nur für die aktuelle ansicht.. sobald die seite neugeladen wird, werden die default werte aus der style.css genommen... also musst du nicht den hintergrund etc von einem div verändern, sondern die veränderung auch in eine datei speichern.

function colorize(){
var c = getElementById("colorme");
c.style.background= getElementById("colorget").value;
}

diese funktion ist also quasi nur eine vorschau, und diese vorschau muss man abspeichern..

[nikosch]

Das CSS ist dann aber für -alle- Nutzer geändert. Das ist doch nicht das Ziel, oder?

[BlackScorp]

naja man müsste dann über php die css datein verwalten zb

echo '<link rel="stylesheet" href="style_'.$userID.'.css" />;' 

[nikosch]

Das heißt, dass sich der User immer anmelden muss. Oder ein Cookie gesetzt werden muss (wird bei Fefe so gemacht).

[BlackScorp]

ist ja nur ein vorschlag vllt hat TE eine login funktion, wo der eingeloggte benutzer seine eigene ansicht individuell gestalten kann...

[ChrisB]

Kann es sein dass die bestehende klassendefinition stärker ist als meine Neudefinition, muss ich daher die Klasse (welche diverse weitere styles ausser der farbe enthält) gänzlich mit JS killen?

Nein, per style-Attribut mit JavaScript gemachte Angaben haben immer höchste Spezifität.


Was du allerdings wirklich erreichen willst, ist aus deinem Code und auch deiner Beschreibung nicht wirklich zu erkennen.
Die anderen Poster haben ja schon versucht zu raten, was du eigentlich willst - wenn's eins davon ist, dann beschreibe bitte noch mal genauer, was du bisher versucht hast.
Und wenn nicht - dann beschreibe bitte erst mal klar und verständlich, was du eigentlich vor hast.

[strgg]

Die anderen Poster haben ja schon versucht zu raten, was du eigentlich willst - wenn's eins davon ist, dann beschreibe bitte noch mal genauer, was du bisher versucht hast.

Ich habe ein PHP-script verfasst welches layouteigenschaften wie farbe etc. eines Users speichert.

Ich möchte nun ebenfalls eine Vorschau der Änderung unmittelbar anzeigen lassen bevor der User den Submit-button drückt.

Anscheinend ist ja der Ajax-ansatz nicht geeignet weshalb ich nun via frame per php das neudefinierte layout neu rendern lasse.

Dank Deinem Beitrag habe ich nun erfahren, dass ich selbiges ev. auch mit JS browserseitig machen kann und wohl einfach mein JS-code (threadstart) fehlerhaft war.

Vielen Dank für den Hinweis

[ChrisB]

Dank Deinem Beitrag habe ich nun erfahren, dass ich selbiges ev. auch mit JS browserseitig machen kann

Ja, kannst du - du kannst Stylesheet-Regeln, auch die die gerade angewandt werden, per JavaScript manipulieren/löschen/neue hinzufügen; ist aber browserübergreifend etwas aufwendig.

Coding: DHTML/CSS-Regeln (& Stylesheets) mit Javascript auslesen & ändern (styleSheets mit rules/cssRules & cssText browserübergreifend nutzen)


Wenn dir das zu komplex erscheint - dann kannst du auch per JavaScript die gemachten Eingaben an dein PHP-Script schicken, welches dann entsprechenden CSS-Code zurückliefert. In dem du ein neues LINK-Element erzeugst und im HEAD einhängst; Parameter kannst du dabei im Querystring der Adresse übergeben, aber natürlich nur in begrenztem Umfang.

Wenn es eine große Anzahl an Parametern erfordert, dann könntest du auch per AJAX einen POST-Request machen, dir den CSS-Code als Text zurückliefern lassen, und damit ein neues STYLE-Element erzeugen, das dann ebenfalls in HEAD eingehängt wird.

Bei beiden Ansätzen kann es erforderlich sein, das/die aktuellen Stylesheets zu deaktivieren. Dazu enthält die oben genannte Seite glaube ich auch was; man kann es aber auch ggf. einfacher über die disabled-Eigenschaft des LINK- bzw. STYLE-Elements machen.

[mquadrat]

Noch ein kleiner Hinweis: wenn du wirklich das .css File umschreibst könntest du Probleme mit dem Caching bekommen. Sprich entweder der Cache bleibt aktiviert, dann rendert der Browser das alte CSS oder man unterbindet das Caching des CSS, was dann allerdings zu Leistungseinbußen und höherem Taffic führt.

[nikosch]

Noch ein kleiner Hinweis: wenn du wirklich das .css File umschreibst könntest du Probleme mit dem Caching bekommen. Sprich entweder der Cache bleibt aktiviert, dann rendert der Browser das alte CSS oder man unterbindet das Caching des CSS, was dann allerdings zu Leistungseinbußen und höherem Taffic führt.

An sich ists sowieso nötig, dass hier verschiedene Dateien generiert werden (bzw. parameterisierte URLs), weil das CSS ja nicht global für alle User geändert werden soll.

Parameterisierte URLs ist eigentlich schon das Stichwort: Fordere als CSS ein PHP-Script an, in dem Du dynamisch CSS zusammenbaust.