Bei Klick Text anzeigen

[Bilsar]

Moin,
ich habe neulich gesehen, wie ein Text angezeigt wurde, wenn man auf einen anderen Text geklickt hatte.
Leider finde ich das Beispiel nicht mehr.
Es sah aber etwa so aus:
bla bla ...
Weitere Informationen =>
bla bla ....
Wenn man auf den Pfeil klickte, wurde unmittelbar darunter ein zusätzlicher Text eingeschoben.
Ich weiß nicht, wie man das bezeichnet, um gezielt suchen zu können.
Habt Ihr mir ein Beispiel° oder den technischen Begriff für dieses Verfahren?
G. Bilsar

°PS. Falls dies nicht zu komplex ist für HTML-Neulinge

[jobo]

Hallo,

naja das Prinzip von Javascript solltest Du vielleicht verstehen. U.u. hilft dir das hier:

http://html-ag.wvs-berlin.de/Javascript/zeilengenerator.html

Außerdem lässt sich jedem Element eine Onclickfunktion zuweisen. Und es lassen sich Elementinhalte z.B. via innerHTML auslesen oder setzen.

Gruß

jobo

[ChrisB]

Hi,

Ich weiß nicht, wie man das bezeichnet, um gezielt suchen zu können.
Habt Ihr mir ein Beispiel° oder den technischen Begriff für dieses Verfahren?

Es braucht nicht immer „technische Begriffe“ für eine Suche ... http://www.google.com/search?q=bei+klick+text+anzeigen

Und etwas ähnliches wird gerade hier diskutiert.

MfG ChrisB

[Bilsar]

Moin,
die Beispiele, die ich gefunden habe, setzen alle Javascript voraus, was bei uns nicht erlaubt ist.
Es muss aber eine Lösung ohne Javascript geben, da ich den zitierten Effekt ja auf meinem PC gesehen habe.
Womit wurde dies dann realisiert?

[jobo]

Hallo,

Nur Javascript kann das DOM verändern. CSS kann Elemente ein und ausblenden.

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

Gruß

jobo

[Bilsar]

Hallo,

Nur Javascript kann das DOM verändern.

DOM = Document Object Model?
Was wird daran verändert?

CSS kann Elemente ein und ausblenden.

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

Dann wird es wohl CSS gewesen sein, denn da wurde ja Text eingeblendet, allerdings nicht so wie in Deinem Beispiel (Navigationsleiste).
Über Google habe ich jetzt gesucht, aber bis jetzt immer Javascript-Lösungen oder CSS mit Javascript gefunden.
Wie geschrieben hat es aber bei mir funktioniert, obwohl bei mir kein Javascript aktiviert ist.
Gruß
Bilsar

[Matthias Apsel]

Om nah hoo pez nyeetz, Bilsar!

Wie geschrieben hat es aber bei mir funktioniert, obwohl bei mir kein Javascript aktiviert ist.

Wenn es bei einem klick passiert, dann hilft die Pseudoklasse :target weiter.

Matthias

[Bilsar]

gruztipo Matthias,

Om nah hoo pez nyeetz, Bilsar!

... und auf Deutsch?

Wenn es bei einem klick passiert, dann hilft die Pseudoklasse :target weiter.

Da habe ich inzwischen "gegooglet" und das wäre genau das Richtige. Aber immer wieder habe ich auch gelesen, dass dies nur wenige neue Browser verstehen.
Kennst Du eine Übersicht darüber, wer :target unterstützt?
Danke
Bilsar

[Matthias Apsel]

Om nah hoo pez nyeetz, Bilsar!

Kennst Du eine Übersicht darüber, wer :target unterstützt?

target im selfhtml-wiki, entschuldige, dass ich das nicht gleich mit verlinkt habe. Die Icons sind wie folgt zu lesen: Unterstützt von IE9 und allen relevanten FF, Chr, Saf und Op.

Matthias

[Bilsar]

Danke Matthias!
Gruß
Bilsar

[Kai345]

[latex]Mae  govannen![/latex]

Die Icons sind wie folgt zu lesen: Unterstützt von IE9 und allen relevanten FF, Chr, Saf und Op.

Das hilft irgendwie überhaupt nicht weiter. Wer bestimmt, was relevant ist?

Nehmen wir mal an, daß man ein Projekt erstellen soll mit einer bestimmten vorgegebenen Auswahl an Browsern. Wenn da lediglich ein allgemeines FF, OP, SAF, CHR Icon steht, sagt das gar nichts darüber aus, ob man eine bestimmte Technik nun problemlos innerhalb dieser Auswahl verwenden kann oder anderweitig nacharbeiten, andere Wege gehen oder auf bestimmte Dinge verzichten muß.

Es wäre also notwendig, erst einmal das CSS zu erstellen und dann mit allen beteiligten Browsern zu testen, um dann evtl. zu erkennen, daß man doch eine andere Lösung benötigt.

Man hat also ggf. viel Zeit ver(sch)wendet und muß dann zusätzlich noch anderweitig recherchieren, um die Unterstützung und Lösungen zu ermitteln. Zeit, die man durch eine einfache Versionsangabe hätte sparen können.
Würde dort eine Version stehen, könnte man ggf. direkt abwägen, ob eine bestimmte Technik für die vorgegebene Auswahl in Frage käme.

Eine Referenz-Doku sollte das meines Erachtens schon leisten.

Stur lächeln und winken, Männer!
Kai

[MudGuard]

Hi,

Eine Referenz-Doku sollte das meines Erachtens schon leisten.

<I>

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, Kai345!

Das hilft irgendwie überhaupt nicht weiter. Wer bestimmt, was relevant ist?

Die Frage ist, wie weit geht man zurück? Ich habe mich auf eigene Tests in den mir zur Verfügung stehenden Browsern jeweils in den aktuellen Versionen sowie auf quirksmode.org bezogen. Dort ist z.B. Op10.10 die älteste Version. Wenn bei quirksmode alles "grün" ist, habe ich das allgemeine Icon verwendet, sonst das mit der entsprechenden Versionsnummer.

Was mich allerdings wundert, ist das keine 11er Opera-Versionen bei getclicky auftauchen.

Nicht relevant sind Browser, die nicht mehr in the wild anzutreffen sind

Diskussion hier im Forum, die ich aber nicht haarspalterisch fortführen möchte.

Eine Referenz-Doku sollte das meines Erachtens schon leisten.

Jeder, der die Icons spezifizieren möchte, ist herzlich eingeladen, dies zu tun.

Auch der Gedanke, engine-icons statt browser-icons zu verwenden, ist nicht ganz von der Hand zu weisen, allerdings müsste dann auch eine Zuordnung dokumentiert werden.

Matthias

[Bilsar]

Hallo!

Wenn es bei einem klick passiert, dann hilft die Pseudoklasse :target weiter.

Dies habe ich jetzt versucht, ungeachtet der Frage, welche Browser es unterstützen.
Was mir jetzt noch nicht klar ist:
Wie kann ich den angezeigten Text wieder verschwinden lassen?
Hier mein ganz einfaches Beispiel für :target:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
<head>  
  <style type="text/css">  
    p.expand_text { display: none; }  
    p.expand_text:target { display:block;   }  
  
  </style>  
</head>  
<body>  
<h1>Thema ssr1</h1>  
<a href="#ssr1">Nähere Infos ->"</a><br>  
    <p class="expand_text" id="ssr1">Infos zu ssr1<br>...........<br>...........<br>...........<br></p>  
<h1>Thema ssr2</h1>  
    <p>Infos zu ssr2<br>...........<br>...........<br>...........<br></p>  
</body>  
</html>  

Schönen Sonntag!

[Matthias Apsel]

Om nah hoo pez nyeetz, Bilsar!

Was mir jetzt noch nicht klar ist: Wie kann ich den angezeigten Text wieder verschwinden lassen?

Indem du innerhalb des Textes einen Link "schließen" o.ä. unterbringst. Schon ist ein neues Element aktuelles Ziel eines Verweises.

Schönen Sonntag!

dito, scheint schön zu werden, die Sonne lässt sich blicken.

Matthias

[Bilsar]

Hi Matthias,

Indem du innerhalb des Textes einen Link "schließen" o.ä. unterbringst. Schon ist ein neues Element aktuelles Ziel eines Verweises.

Da hätte ich eigentlich selbst darauf kommen müssen - pardon!
Aber jetzt vielleicht noch eine stilistische Frage.
Wenn ich den Text anzeige bei einem Klick auf "Weitere Informationen »",
welchen sinnvollen Text gebe ich dem Link zum Wiederverstecken des Textes?
"Weniger Informationen" , "Schließen" scheinen mir wenig geeignet.
Danke
Bilsar

[Matthias Apsel]

Om nah hoo pez nyeetz, Bilsar!

Da hätte ich eigentlich selbst darauf kommen müssen - pardon! Aber jetzt vielleicht noch eine stilistische Frage. Wenn ich den Text anzeige bei einem Klick auf "Weitere Informationen »", welchen sinnvollen Text gebe ich dem Link zum Wiederverstecken des Textes? "Weniger Informationen" , "Schließen" scheinen mir wenig geeignet.

Wenn ich dabei an Windows-Dialogfelder zum Beispiel beim Kopieren denke, scheinen mir die genannten Texte durchaus sinnvoll. Und wenn sich eine komplette Box öffnet, die durch position: absolute; auch ggf anderen Text verdeckt, ist "schließen" auch geeignet.

Matthias

[Bilsar]

Hallo Matthias,

Danke für die Unterstützung!
Gruß
Bilsar