ausgeblendetes Element an der Seite

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich möchte auf einer WebSite etwas realisieren, was ich schon mal irgendwo gesehen habe, wo ich aber nicht weiß, wie es heißt, und es deshalb auch nicht via Google finde. Die Seite soll zuerst so aussehen:

[ATTACH=full]3837[/ATTACH]

Wenn man dann das orange-braune Feld am rechten Rand anklickt, soll es so aussehen:

[ATTACH=full]3836[/ATTACH]

Mich würde interessieren, wie man so etwas umsetzt. Oder zumindest eben wie es heißt, damit ich bei Google erfolgreich weitersuchen kann.

Danke im Voraus,
Sarek \//_

2

Meinst du so etwas wie eine jquery popup Box?

3

Hallö,

Ich würde das auch per jquery machen aber nur als div was aufgeht, es soll ja nur eine Box sein und nicht mehrere.

Schau mal auf meine Textseite am rechten Rand das blaue. So was?

Cheffchen

4

Ich weiß jetzt nicht, was Du mit Deiner Textseite meinst. Meinst Du Deine WebSite http://code.klassentreffen-seelow-92.de ? Wenn ja, dann meine ich so etwas wie das gelbe am linken Rand.

5

Das ist vom technischen Ansatz her ein ganz einfaches Konstrukt.

Der große Container mit den Zusatzinformationen wird mit position: absolute am rechten Rand positioniert, damit er außerhalb des Textflusses steht und sich über den Content legt. Das ein- und ausblenden geschieht über CSS-Manipulationen, die per jQuery ausgeführt werden. Im initialen Zustand erhält der Container eine verringerte Breite und alles darin wird mit display:none ausgeblendet. Beim Klick wird die Breite verändert und der Inhalt display: block gesetzt.

Im ersten Schritt könntest du jeweils ein leeres grünes und braunes Div bauen, die wie im ersten Bild aussehen und positioniert werden. Zusätzlich erstellst du im CSS eine Klasse mit der width des unteren braunen Containers. Per jQuery schreibst du ein Click Event für das braune Div mit der Funktion toggleClass(). Diese switched dann abwechselnd die Containerbreite.

Mit CSS und jQuery solltest du dich allerdings auskennen. Sonst lohnt es nicht, dass Thema hier zu vertiefen.

6

Mit CSS schon (so halbwegs). Mit jQuery gar nicht …
Wäre dankbar für eine Beispiel-HTML-Datei (wo wirklich nur diese Funktion drin ist), anhand derer ich die Funktion analysieren und anpassen kann …

P.S.: Warum jQuery und nicht JavaScript?

7

Jquery ist Browser übergreifend. Man muss sich nicht so sehr über die Kompatibilität Gedanken machen. Das ist im allgemeinen so. Und man kann in wenigen Zeilen so ein Pop up Fenster erzeugen.

8

Ich würde sogar sagen das kann man ohne JavaScript erreichen. Mit der CSS-Pseudoklasse :target können moderne Browser auch Elemente einblenden. Kommt auf die Zielgruppe der Webseite an, ob das Sinn macht.

9

jQuery ist JavaScript. Es vereinfacht und erweitert die Sprache um viele nützliche Funktionen. Auch wenn du dich mit jQuery noch nicht beschäftigt hast, hindert dich doch nichts daran, die oben erwähnten Funktionen auszuprobieren, oder?

http://api.jquery.com/click
http://api.jquery.com/toggleClass

Unterstützung setzt Eigeninitiative und Lernbereitschaft des Fragestellers voraus.

10

Eventuell schon, aber weniger flexibel, wenn das ein- und ausblenden diverser Untercontainer von Bedingungen abhängen soll. Außerdem kein guter Rat für Leute, die nach jedem Strohhalm suchen, um JavaScript zu vermeiden. :wink:

11

Danke für diesen Link. Dort gibt es ein Beispiel, das ich halbwegs verstanden habe:

[HTML]

toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: blue; } .highlight { background: yellow; }

Click to toggle

Irgendein anderer Absatz

[/HTML]

Das Problem ist jetzt, dass jeder mit

eingeleitete Absatz beim Anklicken die Toggle-Funktion auslöst. Wie kann ich regeln, dass nur ein bestimmtes HTML-Element das kann?

12

Du hast dem Element, welches angeklickt werden soll, ja die Klasse blue gegeben. Also schreibst Du:

$( "p.blue" ).click(function() {[
13

Der Selektor innerhalb $() entspricht dem Selektor, den man auch im CSS verwenden würde. Also $(„p“) ist gleich p {}.

14

Danke :slight_smile:

15

Also ohne das konkrete Beispiel von threadi hätte ich jetzt nix verstanden …

16

Übernehmen heißt noch nicht verstehen, und sofern man etwas nicht verstanden hat, scheitert man beim nächsten Mal an einem ähnlichen Problem.

17

Es mag ja sein, dass Du gut mit Hilfe von generalisierten Merksätzen verstehen kannst. Ich durchschaue Funktionsprinzipien eher durch konkrete Beispiele. im Prinzip hat threadi das gleiche gesagt wie Du, aber er hat es deutlich anschaulicher erklärt. Gerade dadurch kann ich die Toggle-Funktion jetzt auch auf andere Fälle anwenden.