mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 11:53 Benutzername: Passwort: Auto-Login

Thema: Flexibles Layout mit Isotope (?) vom 05.08.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Flexibles Layout mit Isotope (?)
Seite: 1, 2  Weiter
Autor Nachricht
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 19:31
Titel

Flexibles Layout mit Isotope (?)

Antworten mit Zitat Zum Seitenanfang

Nabend,

habe zurzeit ein Projekt und weiß nicht genau wie ich es umsetzen könnte.
Ich habe einen Div 'Content' in welchem jeweils 3 gleichgroße articles in einer Zeile floaten.
Nun sollte sich bei Klick auf einen der articles der jeweilige Content laden/vergrößern
und der Rest sich wie bei Isotope neu anordnen.





Wenn man nun auf article 6 klicken würde, sollte sich 5 wieder in den Ursprung zusammenfahren
und danach 6 öffnen wie bereits 5 sich geöffnet hat.

Habe jetzt schon sämtliche Foren durchforstet nach Lösungen mit Isotope aber leider
nicht fündig geworden. Kennt jemand vielleicht eine andere Lösung oder ein Plugin
welches genau sowas anbietet?

Danke schonmal im Voraus!
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst So 05.08.2012 19:44
Titel

Antworten mit Zitat Zum Seitenanfang

Klar geht das mit Isotope, aber vielleicht verstehe ich das Problem auch nicht richtig.
Jedenfalls solange "in einer Zeile floaten" nicht bedeutet, dass diese Zeile tatsächlich im Markup existiert.

Beschreibt das hier nicht genau, was Du machen möchtest? -> http://isotope.metafizzy.co/demos/relayout.html
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst So 05.08.2012 19:48
Titel

Antworten mit Zitat Zum Seitenanfang

Ist halt die Frage, ob Du einen Effekt wie in masonry haben willst oder nur ein einfaches Großziehen eines Feldes. Letzteres ist ja nun recht trivial. Von neu anordnen sehe ich in Deiner Skizze nix.

[edit]

http://jsfiddle.net/8Sgzy/


Zuletzt bearbeitet von pantonine am So 05.08.2012 19:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 19:48
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, diese Demo kenne ich natürlich auch und es ist auch fast das, was ich suche.
Unterschied zu der Demo wäre:

- nicht nur resize des Divs, sondern komplett eigener Content
- bei Klick auf einen anderen Div fährt der geöffnete Div wieder zusammen in den Ursprung
  View user's profile Private Nachricht senden
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 19:51
Titel

Antworten mit Zitat Zum Seitenanfang

pantonine hat geschrieben:
Ist halt die Frage, ob Du einen Effekt wie in masonry haben willst oder nur ein einfaches Großziehen eines Feldes. Letzteres ist ja nun recht trivial. Von neu anordnen sehe ich in Deiner Skizze nix.


Ja, der Effekt von Masonry sollte vorhanden sein.
"Neu anordnen" im Sinne von 6,7,8 ist eine Reihe unter 5 anstatt wie vorher 7,8,9 eine Reihe war.
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst So 05.08.2012 19:53
Titel

Antworten mit Zitat Zum Seitenanfang

Das lässt sich mit ca. 4,5 Zeilen jQuery bewerkstelligen:

- neuen Content via ajax Request in den größer gewordenen DIV packen
- zusätzlich in den listener für Klicks auf ein Element packen, dass erst alle klein gemacht werden

Edit: Vielleicht ein guter Zeitpunkt, das hier mal durchzuarbeiten -> https://tutsplus.com/course/30-days-to-learn-jquery/
Man braucht nur keine 30 Tage, 2 Tage tun es auch, wenn man dranbleibt. Da lernst Du jedenfalls alles, was du für diese Aufgabe brauchst, und das sogar mit vernünftigem Code!


Zuletzt bearbeitet von ChrisKam am So 05.08.2012 19:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst So 05.08.2012 19:55
Titel

Antworten mit Zitat Zum Seitenanfang

Siehe Edit oben, ohne Masonry Effekt.
  View user's profile Private Nachricht senden
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 19:59
Titel

Antworten mit Zitat Zum Seitenanfang

Danke euch, das sollte helfen. *Thumbs up!*
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Flexibles Layout
Frage zu JS Masonry/Isotope Darstellung
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
CSS Layout
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.