Antworten auf deine Fragen:
Neues Thema erstellen

Boxen die sich nach rechts ausklappen ...

mint

Nicht mehr ganz neu hier

Hy, ich bräuchte mal Hilfe bei einem Problem. Ich möchte Boxen als Infoboxen für Texte per Mausklick ausklappen lassen.
Kann mir jemand eine Codebeispiel nennen ?
Weitere Frage: Ich müsste in den Content meiner Website den Inhalt einer anderen Seite (als Verlinkung) laden, wie mache ich das am besten ?

Vielen Dank für Hilfe, Gruß Mint
 

Myhar

Hat es drauf

AW: Boxen die sich nach rechts ausklappen ...

Zu deinem ersten Problem:
Arbeitest du mit einem Framework wie jQuery?
http://api.jquery.com/toggle/
Falls nicht:
HTML:
HTMLELEMENT.style.display = "none"; bzw. 
HTMLELEMENT.style.display = "block";
Diese zwei Zustände musst du umschalten bei einem onclick -> Eventhandler für onclick für deine Elemente definieren und dann die Zielelemente ein- und ausblenden.

Zu deinem zweiten Problem:
Nimm einen iframe.

LG
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...

Wenn du ganz modern sein willst, löässt sich das auch per CSS lösen. Hab vor einiger Zeit mal was ähnliches Gebaut:
Vielleicht hilft es dir ja weiter :)

Ein Fallback ber js sollte man aber schon einrichten ..
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...

Um 90° drehen :D Spaß ;)

Prinzip ist eigentlich das selbe. Eine Box, die zwei andere beinhatet. die zweite (innere) box liegt unter der ersten. beim klicken wird per :target die position verschoben. (wichtig ist dabei, dass der übergeordnete container ein overflow:hiodden hat, damit die "infobox" verschwindet.

Hier mal quick'n'dirty http://dabblet.com/gist/1635463
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...


Nix PM! ;) Stell deine Fragen doch einfach hier, es gibt sicher einige, die das auch interessiert!

Ich antworte dir jetzt einach hier :D

mint schrieb:
Ich habe im Webshowroom auch die Lösung von Cebito gesehen und muss sagen, dass es mir gut gefällt wie die Box sich öffnet (ich nenne es mal Box). Nur wäre auch hier die Frage wie ich eine nach rechts aufklappende Box hinbekomme (mit dem Code von Cebito).
Für Hilfe wie immer sehr dankbar :)

gruß, Mint

Das kann man an dem Beispiel so nicht erklären. Da müsste man den kompletten Code umschmeißen. Aber ich denke mal, dass du den Toogler vom "öffnen-schließen" Feld meinst. Dazu schau dir am besten mal diesen Codebereich an:

HTML:
<header><h1><a href="#details">show details</a><a href="#">hide details</a></h1></header>

PHP:
#details h1 a{
	font-size:.7em;
	text-decoration:none;
	line-height:30px;
	display:none;
}

..

#details:target{
	height:430px;
	width:400px;
}
#details:target a[href="#"], #details:not(:target) a[href="#details"]{
	display:block;
}

Wie du siehst, sind zwei Links übereinander gelegt, die beim klick auf den jeweils anderen ein-/ausgeblendet werden.

Das sind allerdings noch Funktionen von CSS, die eine noch nicht allzu hohe Browserkompatibilität haben. ein js-Fallback sllte auf jeden Fall eingerichtet werden.. (Wenn die Seite denn überhaupt für die Öffentlichkeit sein soll :D )
 
Zuletzt bearbeitet:

mint

Nicht mehr ganz neu hier

AW: Boxen die sich nach rechts ausklappen ...

Ich habe im Webshowroom auch die Lösung von Cebito gesehen und muss sagen, dass es mir gut gefällt wie die Box sich öffnet (ich nenne es mal Box). Nur wäre auch hier die Frage wie ich eine nach rechts aufklappende Box hinbekomme (mit dem Code von Cebito).
Für Hilfe wie immer sehr dankbar :)

Gruß, Mint
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...

Danke, aber das funktioniert bei mir nicht :-(

Gruß, Mint

Eine sehr detailreiche poblembeschreibung! ;)

Worauf ich hinaus will: wenn du noch keinen webspace hast, mach dir kostenlos einen bei z.b. bplaced.net und lad ein testcase hoch. dann kann man dir auch gescheit helfen :)
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...

jo,schon viel besser ;)

dein article hat ja ein overflow: hidden und der link ist schon ganz am unteren ende des aeticles . gib dem article 3-4px mehr Höhe, und du siehst dein Info wieder :)
 

mint

Nicht mehr ganz neu hier

AW: Boxen die sich nach rechts ausklappen ...

Hy, lokal sind die thumbs auf der startseite genau plaziert (firefox, safari) auf dem server (one.com) verschieben sie sich... Da steckt noch viel arbeit drin - kannst du mir eine lösung für das rechts-ausklappen anbieten ?
Gruß,Mint
 

simonpicos

Mod | Forum

AW: Boxen die sich nach rechts ausklappen ...

Hy, lokal sind die thumbs auf der startseite genau plaziert (firefox, safari) auf dem server (one.com) verschieben sie sich... Da steckt noch viel arbeit drin - kannst du mir eine lösung für das rechts-ausklappen anbieten ?
Gruß,Mint

Ich verstehe dein Problem nicht.. Ich habe es mit meinem lösungsweg probiert (online direkt bei dir auf der Seite) und es verschiebt sich nichts.
 

mint

Nicht mehr ganz neu hier

AW: Boxen die sich nach rechts ausklappen ...

Ich bin da nicht so fit wie du (leider) - da werde ich wohl etwas falsch gemacht haben... bin morgen wieder hier - danke für heute :)

gruß, mint
 

cebito

undefined

Da ich momentan nur mit tapatalk hier unterwegs bin, kann ich nicht mehr beitragen, nur so viel @mint - kein Support per pm, solange die Initiative nicht von mir ausgeht.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.481
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben