Vollständige Version anzeigen : html mit gefalteten(od. hidden) Bereichen-Hilfe benötigt


.x-tra
03.10.2013, 20:46

Also im Grunde suche ich nur einen Beispielcode für folgendes html/css szenario.

Eine html seite mit normal text etc;(was ich selber hinbekomme), und jetzt kommts....

andersfarbige begriffe, bei welchen sich auf klick darauf eine art hidden content darunter anzeigen lässt, wo dann jedoch einmal eine art codeblock enthalten ist, sowie auch normaler text drinsteht;(bei erneutem klick soll sich dies wieder schliessen)

ich nehme an, dass man das in einem normalen div container anlegt, jedoch muss ich irgendwie diese funktion auch einbauen, dass dieser fold/unfold kram funktioniert.

könnte mir jemand ein einfaches beispiel nennen?
ich habe so ca. 50 befehle die in eine hilfe;html sollen und würde das gerne auf diese art und weise realisieren.
so eine art template wäre schön ,was man dann einfach nur immer wieder durch kopieren des quelltextes erweitern kann.

vielen dank schonmal an diejenigen die sich die zeit nehmen mir dabei zu helfen

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Sancho-Pancho
04.10.2013, 00:05

Prototype v1;7;2 API documentation | Element;toggle (;prototypejs~org/doc/latest/dom/Element/toggle/)


.x-tra
04.10.2013, 15:42

Vielen Dank, aber kann mir das jemand auch auf deutsch erklären?
Bzw. einen funktionierenden code zeigen?
Wenn ich das einfach in eine html einfüge als Beispiel, funktioniert es eben nicht.


Faiint.
07.10.2013, 07:57

Schau mal hier:

Infobox (;aktuell;de;selfhtml~org/artikel/css/infobox/index;htm)

Ich denke du meinst das hier :)


Sancho-Pancho
07.10.2013, 12:56

Das ist noch mal was anderes, wäre auch eine Möglichkeit und sogar in der Theorie besser. Per CSS braucht man nämlich kein Javascript.
Aber dank den Entwicklern vom Firefox kann das ja jetzt eh keiner mehr abschalten (außer in der config). <- Vorsicht, Ironie ;)

Mein Beispiellink sollte aber eigentlich eh nur eine Anregung sein, mal selber ein paar Suchbegriffe bei Google auszuprobieren.


Murdoc
07.10.2013, 19:07

Okay, also wir haben Prototype~JS ([leider] obsolet in aktuellen Browsern und den einhergehenden JavaScript Umgebungen) und SelfHTML mit HTML 4;1 Beispielen (anhand derer du sehr wahrscheinlich invalides HTML produzieren wirst [<div> innerhalb von <a>]).

Wenn dir das reicht -> super!

Wenn du lieber auf aktuelle Techniken setzen willst:
Can I use... Support tables for HTML5, CSS3, etc (;caniuse~com/#search=target)
:target - CSS | MDN (;developer;mozilla~org/en-US/docs/Web/CSS/:target)
Using the :target selector - Web developer guide | MDN (;developer;mozilla~org/en-US/docs/Using_the_:target_selector)

Beispiel: CSS3 :target (;putc~me/etc/trg)


leex
08.10.2013, 06:14

CSS3 funktioniert aber doch nicht bei vielen Nutzern oder sehe ich da falsch?

weitere Lösung wäre es mit jquery zu lösen.
$( "#clickme" );click(function() {
$( "#book" );slideToggle( "slow", function() {
// Animation complete.
});
});


Sancho-Pancho
08.10.2013, 08:51

Wenn man vom IE absieht, beherrschen die anderen aktuellen Browser fast alles.
Browser Support Checklist CSS3 – Normans Blog – Demos (;;;normansblog~de/demos/browser-support-checklist-css3/)
CSS3 Reference (;;;w3schools~com/cssref/css3_browsersupport;asp)


.x-tra
08.10.2013, 12:35

optional wäre mir auch eine lösung recht ähnlich des chm formates.
also links ein div mit allen links, und rechts der contentinhalt....
ich hab von html bissl ahnung und von css;alles darüber hinaus müsste ich mir erst mühsam erlesen.
da das eine einmalige geschichte wird wäre eine einfache geschichte.;easy to use template am liebsten;wobei mir murdocs beispiel schon auch zusagt...

p;s. und wer mir mit javascript helfen will....;das sind für mich böhmische dörfer..;davon hab ich null plan


leex
08.10.2013, 16:59

wäre es nicht sinnvoller für dich wenn du den content in einem tooltip mit jquery ausgibst?!
so: Tooltip | jQuery UI (;jqueryui~com/tooltip/#custom-content)

sieht doch wesentlich besser aus und is denke ich leicht zu implementieren.
Gibt verschiedene varianten (siehe navigation rechts) und kannst dir anpassen wie du möchtest in größe farbe etc...


Murdoc
08.10.2013, 18:33

Wenn man vom IE absieht, beherrschen die anderen aktuellen Browser fast alles.
Browser Support Checklist CSS3 – Normans Blog – Demos (;;;normansblog~de/demos/browser-support-checklist-css3/)
CSS3 Reference (;;;w3schools~com/cssref/css3_browsersupport;asp)


Wo auch immer du diese komischen Tabellen aufgetrieben hast ...
Hier gibts verlässliche Quellen für CSS, HTML und JavaScript: Can I use... Support tables for HTML5, CSS3, etc (;caniuse~com/)

Wie ich oben bereits verlinkt habe wird :target in allen aktuellen Browsern unterstützt (auch IE9).


leex
09.10.2013, 10:54

und was ist mit dem rest der user? gibt sicher noch genug die nicht mal den IE9 drauf haben. Programmierst du bei deinen Projekten dann für alle alten browser extra oder lässt du diese einfach außer acht?


Murdoc
09.10.2013, 18:11

Ich erstelle mit Hilfe von Featuredetection fallbacks wenn es sein muss. Ansonsten überlasse ich den Benutzer mit seinem veralteten Browser sich selbst ohne etwas zu emulieren.

Früher hat man noch versucht eine Webseite in allen Browsern absolut gleich aussehen zu lassen. Heute ist das (zu Glück) anders. Jeder bekommt das bestmögliche Ergebnis. Und wenn das beduetet, dass es keine Animationen, keine dynamischen Inhalte und keine fancy CSS3 Features gibt, dann ist das eben so.

Imho


Ähnliche Themen zu html mit gefalteten(od. hidden) Bereichen-Hilfe benötigt
  • Hilfe bei Hidden Conten / Bedanken
    Ich krieg dass beim upload irgendwie nicht hin einen hidden content zu erstellen. Ich mochte dass man sich bedankt um meine links zu sehen. kann mir jemand helfen bzw tips geben. (so wie bei den andren uploads von andren usern) BW is ehrensache Peace [...]

  • Hilfe bei Hidden Content
    Leider ist mein Thema sofort geschlossen worden. Hab jetyt herausgefunden wie das mit dem Hide funktioniert aber ..... es erscheint sofort in gruen ohne dass man sich bedanken muss. Wie krieg ich den Bedankomaten da rechts unten hinein. Danke [...]

  • Hilfe!Aufgabe,Zum Thema Berechnung und Buchung in wichtigen Bereichen des Großhandels
    Hallo Leute, Vielleicht könnt ihr mir ja hier helfen!!! Wir hattenm im Unterricht diese Aufgabe bearbeitet bzw. besprochen gehabt, aber ich habe voll kein plan wie die Buchnungssätze, die Konten und die Abgeschlossenen Buchungen und so aussehen und wie die auf die Ergebnisse gekommen sind: [...]

  • [HTML] overflow hidden
    Moin, ich steig da echt nicht durch... ich weiß nicht was da falsch sein sollte.. In dem Textfeld, soll kein Scrollbar mehr sein, wenn der Text über den Rand hinaus geht. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1;0 Transitional//EN" ";;;w3~org/TR/xhtml1/DTD/xhtml1-transitional;dtd"> <html xml [...]



raid-rush.ws | Imprint & Contact pr