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?
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.
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.
Merci jeweils für Eure Hilfestellungen! Als Merci & falls sonst mal wer davon profitieren kann, meine Lösung:
[CODE]
[/CODE]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.
[/CODE]Das auf obiger Routine beruhende
[CODE][B]SetClass[/B]('img', 'threadtitle', 'display', 'none');[/CODE]bleibt wirkungslos, genau so wie all meine anderen Versuche.
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]
<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>
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?)
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.
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…
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.
$(".postbitdeleted a.viewpostlink").css({ "color": "#aeaeae", "font-weight": "normal" });
Und: Die Seite lädt jetzt wieder deutlich schneller. Scheinbar benötigt jQuery keine so lange Aufbereitund der DOM…
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:
Fehler: missing : after property id
Quelldatei: ../test.html
Zeile: 21, Spalte: 14
Quelltext:
var x = { font-size:1};
