Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    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
    Code:
    function colorize(){
    var c = getElementById("colorme");
    c.style.background= getElementById("colorget").value;
    }
    html
    Code:
    <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?

  • #2
    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
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

    Kommentar


    • #3
      @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

      Kommentar


      • #4
        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..
        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

        Kommentar


        • #5
          Das CSS ist dann aber für -alle- Nutzer geändert. Das ist doch nicht das Ziel, oder?
          [COLOR="#F5F5FF"]--[/COLOR]
          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
          [COLOR="#F5F5FF"]
          --[/COLOR]

          Kommentar


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

            PHP-Code:
            echo '<link rel="stylesheet" href="style_'.$userID.'.css" />;' 
            apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

            Kommentar


            • #7
              Das heißt, dass sich der User immer anmelden muss. Oder ein Cookie gesetzt werden muss (wird bei Fefe so gemacht).
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar


              • #8
                ist ja nur ein vorschlag vllt hat TE eine login funktion, wo der eingeloggte benutzer seine eigene ansicht individuell gestalten kann...
                apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                Kommentar


                • #9
                  Zitat von strgg Beitrag anzeigen
                  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.
                  [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                  Kommentar


                  • #10
                    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

                    Kommentar


                    • #11
                      Zitat von strgg Beitrag anzeigen
                      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.
                      [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                      Kommentar


                      • #12
                        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.

                        Kommentar


                        • #13
                          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.
                          [COLOR="#F5F5FF"]--[/COLOR]
                          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                          [COLOR="#F5F5FF"]
                          --[/COLOR]

                          Kommentar

                          Lädt...
                          X