• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

ausgeblendetes Element an der Seite

S

Sarek

Neues Mitglied
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:

Grafik1-crop1.jpg


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

Grafik1-crop2.jpg


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 \\//_
 
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
 
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.
 
Tronjer schrieb:
Mit CSS und jQuery solltest du dich allerdings auskennen. Sonst lohnt es nicht, dass Thema hier zu vertiefen.
Zum Vergrößern anklicken....

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?
 
Zuletzt bearbeitet:
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.
 
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.
 
threadi schrieb:
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.
Zum Vergrößern anklicken....

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. ;)
 
Tronjer schrieb:
http://api.jquery.com/toggleClass
Zum Vergrößern anklicken....

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

HTML: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p >Irgendein anderer Absatz</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>

Das Problem ist jetzt, dass jeder mit <p> eingeleitete Absatz beim Anklicken die Toggle-Funktion auslöst. Wie kann ich regeln, dass nur ein bestimmtes HTML-Element das kann?
 
Du hast dem Element, welches angeklickt werden soll, ja die Klasse blue gegeben. Also schreibst Du:

Code: 
$( "p.blue" ).click(function() {[
 
Der Selektor innerhalb $() entspricht dem Selektor, den man auch im CSS verwenden würde. Also $("p") ist gleich p {}.
 
Übernehmen heißt noch nicht verstehen, und sofern man etwas nicht verstanden hat, scheitert man beim nächsten Mal an einem ähnlichen Problem.
 
Tronjer schrieb:
Übernehmen heißt noch nicht verstehen, und sofern man etwas nicht verstanden hat, scheitert man beim nächsten Mal an einem ähnlichen Problem.
Zum Vergrößern anklicken....

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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben