Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Die letzten Beiträge

Autor Thema: animierte zusammenklappbare Textfelder in NOF  (Gelesen 2068 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
animierte zusammenklappbare Textfelder in NOF
« am: 15. April 2014, 23:01:44 »
Wie man in NetObjects Fusion ein- und ausklappbare Textfelder erstellen und stylen kann, zeige ich in diesem Tutorial.
Das "Besondere" an dieser Variante ist, dass ein ausgeklapptes Div automatisch geschlossen wird, sobald ein anderes Div ausgeklappt wird.

Um zu sehen und testen was damit gemeint ist, ruft einfach die folgende Beispielseite auf. http://demos.nof-community.de/expcolldiv/html/expand.html

« Letzte Änderung: 16. April 2014, 10:03:50 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #1 am: 17. April 2014, 10:05:54 »
Wichtige Hinweise!

Alle Angaben im Tutorial basieren auf einer Publizierung nach Assettyp. Wer eine andere Publizierungsstruktur bevorzugt, muss angegebene Pfade an seine Struktur anpassen.  Publizierungsstrukturen in NetObjects Fusion

Um eine korrekte Darstellung der Boxen in allen Browsern zu erzielen solltet ihr eure Seite unter dem Doctype "LOOSE" publizieren. (HTML5 und XHTML habe ich nicht getestet, mit LOOSE läuft es in den von mir getesteten Browsern gut.) Publizierung von DocType "LOOSE" in NetObjects Fusion
« Letzte Änderung: 21. April 2014, 12:35:52 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #2 am: 17. April 2014, 10:38:05 »
Zunächst beschafft ihr euch alle benötigten Dateien. Das ist zum Einen das Script "animatedcollapse.js", welches ihr euch auf dieser Seite herunterladen könnt.

Scrollt, wenn ihr die Seite aufgerufen habt ein wenig nach unten, bis ihr den Dateinamen der benötigten Datei sehen könnt (im Screenshot rot gekennzeichnet) und klickt ihn an. (bei euch sollte die Schriftfarbe des Dateilinks blau sein)

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Nun öffnet sich das Script in eurem Browser. Mit einem Klick auf Datei >> Seite speichern unter öffnet sich das euch bekannte Fenster zum speichern von Dateien.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Wählt nun einen Speicherort aus uns klickt abschließend auf speichern.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


Nun solltet ihr die Datei namens "animatedcollapse.js" am angegebenen Speicherort finden.
« Letzte Änderung: 18. April 2014, 10:43:21 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #3 am: 17. April 2014, 21:46:47 »
Neben dem Script benötigt ihr außerdem die Button-Grafiken zum ein- und ausklappen der Inhalte. Ihr könnt euch gern meine Grafiken mit einem Rechtsklick speichern und benutzen...

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


...es steht euch aber auch frei, eigene Grafiken zu erstellen. :)


Nachdem ihr das Script und die zwei Grafiken auf eurem PC gespeichert habt, bindet ihr diese als Assets in euer Projekt ein. Wer nicht weiß, wie man das macht, findet in dieser Anleitung Hilfe. http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/
« Letzte Änderung: 18. April 2014, 10:42:52 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #4 am: 18. April 2014, 10:32:38 »
Im nächsten Schritt fügt ihr den folgenden Code zwischen den Headtags der Seite ein, auf welcher ihr die Boxen nutzen möchtet. Da es sehr unwahrscheinlich ist, dass ihr diese Boxen auf jeder eurer Seiten einsetzen werdet würde ich dazu raten, den Code ins Layout-html einzufügen.

Wie man Code zwischen den Headtags einer Seite platziert kann man hier nachlesen.

Im nächsten Post werde ich ein paar Sätze zu diesem Code und zu notwendigen Anpassungen schreiben.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.

« Letzte Änderung: 18. April 2014, 10:41:43 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #5 am: 18. April 2014, 10:40:39 »
Wie angekündigt, hier nun ein paar Erläuterungen zu dem eingefügten Code.

Wenn ihr den Code in NOF eingefügt habt und das Code-Fenster in NOF auf eine Breite zieht, bei der der Code nicht mehr umbricht, dann werdet ihr relativ einfach erkennen können, dass sich dieser Code aus drei Teilen zusammensetzt.
Jeder dieser 3 Teile beginnt mit einem Kommentar.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



Ich werde die einzelnen Abschnitte hier gleich noch einmal posten um notwendige Änderungen besser erklären zu können.

Der erste Teil des Codes dient für die Verlinkung der benötigten Scripts und für einen copyright-Hinweis von dynamicdrive. (diesen auf keinen Fall entfernen)
In diesem Codeabschnitt ist maximal eine Änderung nötig und das auch nur dann, wenn ihr die Boxen auf eurer Startseite verwenden möchtet.
Ist dies der Fall, dann muss die Pfadangabe in der gelb markierten Zeile so geändert werden dass zu beginn des Pfades nur 1 Punkt (./) zu finden ist.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



Der zweite Abschnitt beinhaltet ein kleines Java-Script. In diesem Abschnitt können Änderungen notwendig werden, wenn mehr oder weniger Boxen als aktuell vorhanden (12) eingefügt werden sollen.
Der Bereich, in welchem ggf. Änderungen durchzuführen wären ist wieder gelb unterlegt.

Wenn man sich den gelb gekennzeichneten Codeabschnitt einmal genau ansieht, ist unschwer zu erkennen, dass er aus genau 12 Zeilen besteht.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



Jede dieser Zeilen steht für eine Box. Wollt ihr also weniger Boxen verwenden, dann löscht ihr die überflüssigen Zeilen aus dem Code. Am besten von unten damit die Nummerierung erhalten bleibt.

Benötigt ihr mehr Boxen, als die 12 vorhandenen, dann fügt ihr direkt unterhalb des gelb gekennzeichneten Bereichs eine weitere solche Zeile ein:

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Zu beachten ist hierbei nur, dass jede neue Box / Zeile auch eine neue ID benötigt. Die bislang vorhandenen Boxen haben die ID's 'box1' bis 'box12' (einfach mal den Code ansehen, die ID's sind unschwer zu erkennen).
Möchte ich also in meinen Beispielcode eine weitere Box integrieren müsste diese die ID 'box13' haben. Für jede weitere Box nummeriert ihr entsprechend weiter durch. Weitere Anpassungen sind in diesem Codeabschnitt nicht notwendig.


Nun kommen wir zum dritten und letzten Abschnitt unseres Codes, welcher die Styleangaben für unsere Boxen beinhaltet. In diesem Abschnitt findet ihr jede Menge Kommentare, die dieses Mal so aussehen:

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Die Kommentare sollten ausreichend sein, damit ihr die nötigen Anpassungen für das Aussehen eurer Boxen vornehmen könnt.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.
« Letzte Änderung: 18. April 2014, 18:00:52 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #6 am: 20. April 2014, 10:43:21 »
Nachdem nun alle Vorarbeit erledigt ist, beginnen wir damit, die Boxen in unserer Arbeitsansicht einzufügen. Von dynamicdrive aus ist dafür eine reine Code-Lösung vorgesehen. Ich habe aber - für alle die sich mit diesen leeren Textfeldern in der Arbeitsansicht schwer tun - eine Möglichkeit gefunden, die Boxen so in NOF einzubauen, dass man sie in der Arbeitsansicht sehen kann.

Wir beginnen mit der ersten Box und fügen hierfür ein neues Textfeld ein. Das Textfeld ziehen wir auf die Breite, die wir auch in den Styleangaben eingetragen haben, in meinem Fall sind das 280px. Damit ihr die Breite besser bestimmen könnt, stellt am besten euren Masterrahmen kurz auf ZeroMargins um, dann könnt ihr das Textfeld ganz links platzieren und beim Aufziehen am oberen Lineal die Breite ablesen.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Damit eure Felder später ohne viel Gefummel eine einheitliche Größe haben, kopiert euch das aufgezogene Textfeld am besten und fügt es an irgendeiner Stelle 2-3 mal ein.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Nun markiert ihr das zuerst eingefügte Textfeld mit einem einfachen Klick (der Cursor darf nicht blinken) und klickt auf der EP den HTML-Button an. Es öffnet sich ein Fenster in welchem ihr zwei Code-Schnipsel eingeben müsst.

Codeschnipsel 1 sieht wie folgt aus und wird "vor dem Tag" eingefügt.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



Codeschnipsel 2 ist dieser und wird "nach dem Tag" platziert.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Die Symbole neben den Pfeilen (nächster Screenshot) zeigen, welches Icon ihr anklicken müsst um den Cursor an der richtigen Stelle zu aktivieren.
(in älteren NOF-Versionen dürften die Reiter für die Einfügung "vor dem Tag" und "nach Tag" heißen)

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Nun könnt ihr den immer sichtbaren Teil eures Textes in das Textfeld eingeben. Sobald ihr Text in das Textfeld eingefügt habt, wird in der oberen linken Ecke des Feldes ein grünliches Symbol eingeblendet. Dieses Symbol zeigt euch dass in diesem Textfeld neben normalem Text auch eine html-Einfügung gemacht wurde.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.

« Letzte Änderung: 21. April 2014, 10:13:20 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #7 am: 21. April 2014, 10:19:13 »
Im nächsten Schritt setzt ihr den Cursor mit einem Doppelklick an das Ende eures eingegebenen Textes und macht dann einen weichen Zeilenumbruch. (Hochstelltaste für Großbuchstaben und Enter gleichzeitig drücken) Im Anschluss klickt ihr das Icon zum Einfügen von Bildern an und klickt im Anschluss direkt an den Anfang der neu entstandenen Zeile.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Navigiert nun zu der eingangs eingebundenen Grafik "expand.png" im Asset-Ordner eures Projekts und wählt diese aus.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Nachdem die Grafik in eurem Textfeld eingefügt wurde, markiert ihr sie mit einem einfachen Klick und klickt im Anschluss den Button "Link" auf der EP an.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Es öffnet sich ein kleines Fenster in welchem die Linkeinstellungen vorgenommen werden. Folgt zunächst den im nächsten Screenshot markierten Schritten und klickt zum Schluss den Button "HTML" unten links am Fensterrand an.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Ein weiteres Fenster geht auf, in welchem ihr wieder einen Codeschnipsel einfügen müsst. Der einzufügende Code sieht wie folgt aus und muss "in dem Link" eingefügt werden.
Solltet ihr die Boxen  auf der Startseite eures Projekts einsetzen, dann dürfen die Pfadangaben zu den Bildern statt mit zwei Punkten (../) nur mit einem Punkt (./) beginnen.

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Alle sonst noch notwendigen Klicks sind im folgenden Screenshot markiert.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Wie ihr erkennen könnt, hat eure Grafik nun ein kleines blaues Symbol, welches zeigt, dass hier eine Verlinkung vorhanden ist.
Setzt nun den Cursor mit einem Doppelklick hinter die Grafik und macht erneut einen weichen Zeilenumbruch. (Hochstelltaste+Enter)

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.
« Letzte Änderung: 21. April 2014, 11:14:20 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #8 am: 21. April 2014, 10:40:19 »
Nun greift ihr auf eins der eigangs duplizierten Textfelder zurück, markiert es mit einem einfachen Klick und klickt anschließend wieder den HTML-Button auf der EP.

Auch in dieses Textfeld fügt ihr nun wieder zwei Codeschnipsel ein. Einen vor dem Tag und einem nach dem Tag.

Codeschnipsel zum Einfügen vor dem Tag:

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Codeschnipsel zum Einfügen nach dem Tag:

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Im Anschluss fasst ihr das Textfeld mit der Maus an und zieht es in das andere Textfeld, in die Zeile unterhalb der verlinkten Grafik.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Sehr wahrscheinlich wird euer Textfeld an der rechten unteren Ecke nun ein kleines blaues Symbol anzeigen. Dieses Symbol zeigt an, dass Inhalte an diesem Textfeld umgebrochen werden. Das können wir in unserem Fall jedoch gar nicht brauchen, denn es führt zu einer fehlerhaften Darstellung unserer Boxen.

Sollte das besagte Symbol bei eurem Textfeld zu sehen sein, dann markiert das Textfeld mit einem einfachen Klick, aktiviert auf der EP den Reiter für die Ausrichtung und setzt den Punkt statt bei "Links umbrechen" nun bei "Links". Danach sollte der Punkt verschwunden sein und alles ist gut.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Nun gebt ihr in dieses Textfeld den Text ein, der erst beim Ausklappen des Feldes sichtbar werden soll.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.
« Letzte Änderung: 21. April 2014, 11:41:22 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #9 am: 21. April 2014, 11:45:47 »
Diesen gesamten Vorgang könntet ihr nun für jede weitere Box wiederholen und dabei eure duplizierten leeren Textfelder nutzen. Ihr müsstet dabei nur die IDs in den Codeschnipseln anpassen.
Ich persönlich finde das allerdings recht aufwändig und würde da ein wenig "abkürzen". Wie, erkläre ich euch an dieser Stelle nun auch noch kurz.

Markiert mit einem einfachen Klick das äußere Textfeld, in welchem Grafik und das zweite Textfeld liegen. Die gesamte Box muss rundherum die kleinen Kreise haben, daran erkennt ihr, dass ihr wirklich das "äußere" Textfeld erwischt habt.

Ist das Textfeld makiert, dann klickt ihr einmal mit einem Rechtsklick in das Feld und kopiert es euch. (eure leeren, anfangs duplizierten Textfelder könnt ihr löschen, wenn ihr diese Vorgehensweise nutzen möchtet)

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Im Anschluss fügt ihr die Kopie unterhalb oder neben eurer fertigen BOX ein, je nachdem, wie ihr die Boxen anordnen möchtet. Klickt dann das äußere Textfeld der neu eingefügten Box mit einem einfachen Klick an und klickt danach den HTML-Button auf der EP.

Es öffnet sich wieder das Code-Fenster und ihr seht die Einfügung die ihr ganz als erstes gemacht habt.

Hier steht nun u.A.
Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Diese Klasse enthält die grundlegenden Formatierungen für die äußere Box und sorgt für einen blauen Hover-Effekt (Farbänderung bei Mausover). Möchtet ihr für alle eure Boxen den selben Hover-Effekt nutzen, dann müsst ihr an dieser Stelle gar nichts ändern. Möchtet ihr jedoch - wie in meinem Beispielprojekt - verschiedene Hover-Farben einsetzen, dann könnt ihr hier frei nach Schnauze zwischen den verschiedenen zur Verfügung stehenden Klassen wählen.

Aktuell könntet ihr hier also zwischen folgenden Formatvorlagen wählen: box, box_a, box_b, box_c, box_d, box_e, box_f

Die Einfügungen könnten dann dementsprechnd so aussen:
class="box"
class="box_a"
class="box_b"
class="box_c"
class="box_d"
class="box_e"
class="box_f"

Wollt ihrs also gern bunt, dann wählt einfach willkürlich eine der Klassen aus und fügt sie statt der vorhandenen Klasse dort ein.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.
« Letzte Änderung: 21. April 2014, 12:03:27 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Online nettesekel

  • Administrator
  • *****
  • Beiträge: 7859
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: animierte zusammenklappbare Textfelder in NOF
« Antwort #10 am: 21. April 2014, 12:07:14 »
Ist das erledigt, klickt ihr mit einem einfachen Klick die expand-Grafik im duplizierten Textfeld an und im Anschluss klickt ihr den Button Link auf der EP.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Es öffnet sich das Fenster mit den Linkeinstellungen. Hier markiert ihr den leeren Link (im Screenshot blaue Zeile) und klickt im Anschluss den HTML-Button unten links am Fensterrand.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


Im sich öffnenden Fenster erkennt ihr die Einfügung wieder die ihr bei der ersten Box ins Link-HTML eingefügt habt.
Hier ist die Anpassung kein "Kann" mehr sondern ein "Muss" denn sonst werden eure Boxen nicht so funktionieren wie gewollt.

Aus diesem Grund macht ihr hier unbedingt aus

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


(Bei jeder weiteren Box wird weiter durchnummeriert.)

Habt ihr die Änderung vorgenommen schließt ihr den Vorgang mit einem Klick auf "OK", gefolgt von einem Klick auf "Link" ab.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Als letztes wählt ihr nun mit einem einfachen Klick das integrierte Textfeld mit dem Inhalt für den ausklappenden Teil aus und klickt wieder den "HTML" auf der EP an.

Es öffnet sich auch hier wieder das Code-Fenster und ihr passt hier ähnlich wie gerade beim Link-HTML die ID an, indem ihr diese von "box1" in "box2" ändert.

Auch hier wird bei jeder weiteren Box weiter durchnummeriert.

Nun ändert ihr eure Inhalte für eure zweite Box und dann kopiert ihr diese, fügt sie neu ein und nehmt wieder die gerade beschriebenen Anpassungen vor.

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Denkt daran, stand jetzt ist bei 12 Boxen Schluss, wollt ihr mehr Boxen müssen diese im Anfangs eingefügten Javascript "angelegt werden".

Ich wünsche euch viel Erfolg und Spaß bei der Umsetzung des Tutorials.

l.g. nettesekel :)



« Letzte Änderung: 21. April 2014, 12:29:33 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)