CSS-Eigenschaften dauerhaft verändern (z.B. per Button, speichern in Cookie)

BRotondi · 26 März 2010

Guten Abend

Lese mich nun schon eine Weile kreuz und quer, finde aber nicht so den Durchblick...

Wie kann ich CSS-Eigenschaften am effizientesten dauerhaft verändern lassen? D.h. der User klickt z.B. auf ein Icon und alle Divs einer bestimmten Klasse verschwinden. Sie sollen auch beim Laden weiterer Seiten verschwunden bleiben.

Ist es wirklich die sinnvollste / effizienteste Variante, via JavaScript und Cookies zu arbeiten?

Gibt es vielleicht auch ein fertiges Beispiel an dem ich rumfeilen könnte?

Merci!
Bruno

threadi · 27 März 2010

BRotondi schrieb:
D.h. der User klickt z.B. auf ein Icon und alle Divs einer bestimmten ID verschwinden.

Das passt nicht zusammen. Eine ID darf auf einer HTML-Seite nur 1 mal vorkommen. Für deinen Zweck müsstest Du entweder eine Klasse verwenden oder mehrere IDs.

Wie kann ich CSS-Eigenschaften am effizientesten dauerhaft verändern lassen? .. Sie sollen auch beim Laden weiterer Seiten verschwunden bleiben.

Als Cookie und/oder in der Sitzung speichern. Ginge auf JavaScript- oder php-Basis, wobei das mit dem "Klick" zum Ausblenden eher JavaScript wäre.

BRotondi · 27 März 2010

Das passt schon: Wenn ich via Javscript display="none" setze, verschwinden alle divs. Lese mich gerade bei YUI 2: Dom Collection rein ...

JensB · 27 März 2010

Aber trotzdem solltest du auf Elemente, die die gleiche ID haben, verzeichten, da eine ID einmalig in einem HTML-Dokument sein muss.

BRotondi · 27 März 2010

Verstehe. vBulletin handhabt das auch korrekt. Passe mein erstes Posting an: ID -> Klasse. Merci für den Hinweis!

Efchen · 1 April 2010

BRotondi schrieb:
Ist es wirklich die sinnvollste / effizienteste Variante, via JavaScript und Cookies zu arbeiten?

Du kannst solche Dinge auch serverseitig speichern.
Nur, wenn der Nutzer identifiziert werden soll, brauchst Du irgendeine Form des Logins. Und da sind Cookies/Sessions halt üblich. Wenn jemand keine Cookies erlaubt oder kein JavaScript aktiviert hat, kann man Session-IDs auch in der URL übergeben oder aber im schlimmsten Fall muss sich der Nutzer auf jeder Seite einloggen.

BRotondi · 15 Mai 2010

Merci jeweils für Eure Hilfestellungen! Als Merci & falls sonst mal wer davon profitieren kann, meine Lösung:

Code:

<script type="text/javascript">
function [B]SetClass [/B](type_,class_,property_,value_) {
    t = YAHOO.util.Dom.getElementsByClassName(class_, type_);
    YAHOO.util.Dom.setStyle(t, property_, value_);
}
function [B]DetailsOn [/B]() {
[COLOR=SeaGreen]    SetClass('div', 'author', 'display', '');
[/COLOR][COLOR=Red]    YAHOO.util.Dom.setStyle('newthreadlink_top', 'display', '');
[/COLOR]
    set_cookie('details_visible', 1);
}
function [B]DetailsOff [/B]() {
 [COLOR=SeaGreen]   SetClass('div', 'author', 'display', 'none');
[/COLOR] [COLOR=Red]   YAHOO.util.Dom.setStyle('newthreadlink_top', 'display', 'none');
[/COLOR]
    set_cookie('details_visible', 0);
}
function [B]DetailsInit [/B]() {
    t = fetch_cookie('details_visible');
    if (t=="0") {
        DetailsOff();
    }
    else
    {
        DetailsOn();
    }
}
function [B]DetailsSwitch [/B]() {
    if (YAHOO.util.Dom.getStyle("[COLOR=Red]newthreadlink_top[/COLOR]", "[COLOR=Red]display[/COLOR]") == "[COLOR=Red]none[/COLOR]") {
        DetailsOn();
    }
    else
    {
        DetailsOff();
    }
}
YAHOO.util.Event.onDOMReady(DetailsInit);
</script>

Grün ein Beispiel-CSS-Wechsel für eine Klasse, Rot für eine ID. Im Switch wird nicht das Cookie überprüft, da der User ev. verschiedene Fenster offen hatte und nun im aktuellen den Switch ausführt, egal was im Cookie steht.

Aufruf der Skripte z.B. via

Code:

<a href="javascript:[B]DetailsSwitch[/B]()" title="Details on/off"><img src="/images/details.png"></a>

BRotondi · 15 Mai 2010

Allerdings ist mir etwas noch nicht gelungen: Wie kann ich folgende <img> beeinflussen?

Code:

<h3 class="threadtitle">
    [COLOR=Red]<img src="icon1.gif">[/COLOR]
    <a href="showthread.php?625">Titel</a>
</h3>

Das auf obiger Routine beruhende

Code:

[B]SetClass[/B]('[COLOR=Black]img[/COLOR]', 'threadtitle', 'display', 'none');

bleibt wirkungslos, genau so wie all meine anderen Versuche.

Eine Idee? Merci!
Bruno

mermshaus · 16 Mai 2010

Dafür eignet sich jQuery (Main Page - jQuery JavaScript Library) ausgezeichnet. Hier ein Beispiel, das vielleicht halbwegs passt:

Die JavaScript-Funktionalität im Beispiel ist "unobtrusive", die Seite funktioniert also auch bei deaktiviertem JavaScript (in diesem Fall sind alle Details immer eingeblendet).

HTML:

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>test</title>
        <!-- Das jQuery-Script sollte für den Einsatz natürlich auf dem eigenen Server liegen -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <style type="text/css">
        .section {
            border: 1px solid #ccc;
            padding: 5px;
            margin-bottom: 10px;
        }

        .show-details {
            background: #eee;
            cursor: pointer;
            width: 200px;
        }

        .hidden {
            display: none;
        }
        </style>

        <script type="text/javascript">
        $(document).ready(function ()
        {
            $('div.section').each(function ()
            {
                var element = document.createElement('p');
                $(element).text('Details anzeigen')
                          .addClass('show-details');
                $(element).toggle(function () {
                    $(this).text('Details ausblenden');
                    $(this).parent().children('.details').removeClass('hidden');
                }, function () {
                    $(this).text('Details anzeigen');
                    $(this).parent().children('.details').addClass('hidden');
                });
                $(this).prepend(element);
                $(this).children('.details').addClass('hidden');
            });
        });
        </script>
    </head>

    <body>
        <div class="section">
            <div class="details">
                <h3>Details</h3>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>

        <div class="section">
            <div class="details">
                <h3>Details 2</h3>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>

        <div class="section">
            <div class="details">
                <h3>Details 3</h3>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
    </body>

</html>

BRotondi · 16 Mai 2010

Interessante Variante. Merci!

Ist mein Beispiel etwa gar nicht mit YAHOO Dom lösbar? Würde dessen Möglichkeiten gerne noch auskosten lernen. (Oder gibt es ein detaillierteres Manual/how to, welches auch solche Beispiele behandelt?)

mermshaus · 16 Mai 2010

Das ist mit Yahoo DOM natürlich ebenfalls lösbar. Eine recht ausführliche Dokumentation scheint es ja auch zu haben: YUI 2: Dom Collection

Ich habe noch nicht damit gearbeitet. Auf den ersten Blick sah dein Beispiel für mich allerdings noch recht funktional (method(element)) und nah an "normalem" JavaScript aus, während jQuery eher objektorientiert (element.method()) arbeitet und Dinge sehr stark "optimiert". Deshalb erschien es mir sinnvoll, das zumindest vorzustellen.

BRotondi · 16 Mai 2010

Die Vorstellung weiss ich in der Tat zu schätzen! DOM scheint mir für solche Dinge etwas overkill. Schlägt z.B. durch lange Analysezeiten beim ersten benutzen von getElementsByClassName auf.

YUI 2: Dom Collection habe ich studiert. Ist aber eher eine (Reminder-)Referenz als ein Einstiegsdokument. Bin beim besten Willen nicht drauf gekommen, wie mein nur wenig komplexeres Beispiel nun umgesetzt werden müsste.

...

Merci dennoch!
Bruno

P.S.: Es ist mir auch nicht gelungen, ein class="c1 c2" anzusteuern. Ev. erwartet Dom für solche Dinge eine entsprechend komplexe bzw. verschachtelte Abfrage...

mermshaus · 18 Mai 2010

Eine Möglichkeit habe ich spontan auch nicht gefunden.

In Pseudocode vielleicht so:

Code:

elems = DOM.getElementsByClassName('c1');

foreach (elems as e) {
    if (DOM.hasClass(e, 'c2')) {
        // e hat beide Klassen
    }
}

jQuery:

Code:

$('.c1.c2').css('background-color', '#f00');

BRotondi · 18 Mai 2010

Merci!

Ja, soweit ich Yahoo Dom unterdessen "durchschaue" (...) arbeitet es mit genau solch verschachtelten Aufrufen, sobald es eine Spur komplizierter wird...

BRotondi · 31 Mai 2010

mermshaus schrieb:
Dafür eignet sich jQuery (Main Page - jQuery JavaScript Library) ausgezeichnet.

Bin unterdessen auch mit jQuery durch und muss sagen, dass ich die Tragweite Deiner Zeilen unterschätzt habe. Gerade für Einsteiger ist jQuery viel Einfacher. Es kann 1:1 die CSS-Notation übernommen werden, die Eigenschaften werden nur leicht anders dargestellt.

Code:

$("[COLOR=Red].postbitdeleted a.viewpostlink[/COLOR]").css({  [COLOR=SeaGreen]"color": "#aeaeae", "font-weight": "normal"[/COLOR]  });

Und: Die Seite lädt jetzt wieder deutlich schneller. Scheinbar benötigt jQuery keine so lange Aufbereitund der DOM...

Merci! :)

struppi · 31 Mai 2010

Das geht in modernen Browsern auch ohne jquery:

Code:

var el = document.querySelector(".postbitdeleted a.viewpostlink");
el.setAttribute('style', 'color:#aeaeae; font-weight:normal');

crash · 31 Mai 2010

querySelector() ist aber noch ziemlich neu und somit kaum implementiert.

Objekt-Literale sind überladen, so dass die Eigenschaften nicht als String gesetzt werden müssen:

Code:

{  color: "#aeaeae", font-weight: "normal"  }

Wäre mal eine Maßnahme in PHP.

struppi · 31 Mai 2010

Deshalb sag ich ja, moderne Browser. Wobei die API von 2006 ist: Selectors API und "kaum implementiert" stimmt nicht.

BRotondi · 1 Juni 2010

crash schrieb:
Objekt-Literale sind überladen, so dass die Eigenschaften nicht als String gesetzt werden müssen:

Code:

{ color: "#aeaeae", font-weight: "normal" }

Guter Hinweis, Merci! Wird gleich lesbarer + eine Tipfehlerquelle weniger.

struppi · 1 Juni 2010

BRotondi schrieb:
Guter Hinweis, Merci! Wird gleich lesbarer + eine Tipfehlerquelle weniger.

Naja, in dem Code ist ein Fehler drin. Die Objektschlüssel müssen zwar nicht mit Anführungszeichen umschlossen werden, in dem Fall aber schon. Deshalb ist es sinnvoller Anführungszeichen zu verwenden, wenn man Syntaxfehler vermeiden will.

EDIT: Die Fehlermeldung:

Code:

Fehler: missing : after property id
Quelldatei: ../test.html
Zeile: 21, Spalte: 14
Quelltext:
var x = { font-size:1};

CSS-Eigenschaften dauerhaft verändern (z.B. per Button, speichern in Cookie)

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

struppi

Guest

Neues Mitglied

struppi

Guest

Neues Mitglied

struppi

Guest