Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

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

0 Mitglieder und 3 Gäste betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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)




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.




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



Nun solltet ihr die Datei namens "animatedcollapse.js" am angegebenen Speicherort finden.
« Letzte Änderung: 18. April 2014, 10:43:21 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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...




...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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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: HTML5
  1. <!-- animate collapse Div - Verlinkungen -->
  2. <script type="text/javascript" src="../assets/animatedcollapse.js">
  3. /***********************************************
  4. * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  5. * This notice MUST stay intact for legal use
  6. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
  7. ***********************************************/
  8.  
  9. <!-- animate collapse Div - Javascript -->
  10. <script type="text/javascript">
  11. animatedcollapse.addDiv('box1', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  12. animatedcollapse.addDiv('box2', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  13. animatedcollapse.addDiv('box3', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  14. animatedcollapse.addDiv('box4', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  15. animatedcollapse.addDiv('box5', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  16. animatedcollapse.addDiv('box6', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  17. animatedcollapse.addDiv('box7', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  18. animatedcollapse.addDiv('box8', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  19. animatedcollapse.addDiv('box9', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  20. animatedcollapse.addDiv('box10', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  21. animatedcollapse.addDiv('box11', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  22. animatedcollapse.addDiv('box12', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  23.  
  24. animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
  25.         //$: Access to jQuery
  26.         //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
  27.         //state: "block" or "none", depending on state
  28. }
  29.  
  30. animatedcollapse.init()
  31.  
  32. <!-- animate collapse Div - CSS -->
  33. div.box,
  34. div.box_a,
  35. div.box_b,
  36. div.box_c,
  37. div.box_d,
  38. div.box_e,
  39. div.box_f {
  40.     width:280px; /*Breite Box*/
  41.     border-top: 5px solid #e2e2e2;
  42.     padding: 8px;
  43.     margin-bottom: -25px;
  44.     margin-right: 15px;
  45.     -webkit-box-shadow: 0px 0px 5px #999;
  46.        -moz-box-shadow: 0px 0px 5px #999;
  47.             box-shadow: 0px 0px 5px #999
  48. }
  49.  
  50. div.box:hover {border-top: 5px solid #0e7ac4}
  51. div.box_a:hover {border-top: 5px solid #B42FCF}
  52. div.box_b:hover {border-top: 5px solid #4ABA4A}
  53. div.box_c:hover {border-top: 5px solid #AC2A6F}
  54. div.box_d:hover {border-top: 5px solid #E48E0D}
  55. div.box_e:hover {border-top: 5px solid #C30027}
  56. div.box_f:hover {border-top: 5px solid #79C032}
  57.  
  58. .box_inner {width:264px;} /*Breite der Box (280px) - 2x 8px padding = Breite aufgeklappte Box*/
  59.    
  60. .button{padding:6px 0px 4px 0px;}
« Letzte Änderung: 18. April 2014, 10:41:43 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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: HTML5
  1. <!-- so sehen die Kommentare aus -->


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: HTML5
  1. <!-- animate collapse Div - Verlinkungen -->
  2. <script type="text/javascript" src="../assets/animatedcollapse.js">
  3. /***********************************************
  4. * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  5. * This notice MUST stay intact for legal use
  6. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
  7. ***********************************************/
  8.  


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: HTML5
  1. <!-- animate collapse Div - Javascript -->
  2. <script type="text/javascript">
  3. animatedcollapse.addDiv('box1', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  4. animatedcollapse.addDiv('box2', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  5. animatedcollapse.addDiv('box3', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  6. animatedcollapse.addDiv('box4', 'fade=0,speed=400,group=boxes,persist=1,hide=1')
  7. animatedcollapse.addDiv('box5', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  8. animatedcollapse.addDiv('box6', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  9. animatedcollapse.addDiv('box7', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  10. animatedcollapse.addDiv('box8', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  11. animatedcollapse.addDiv('box9', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  12. animatedcollapse.addDiv('box10', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  13. animatedcollapse.addDiv('box11', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  14. animatedcollapse.addDiv('box12', 'fade=0,speed=800,group=boxes,persist=1,hide=1')
  15.  
  16. animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
  17.         //$: Access to jQuery
  18.         //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
  19.         //state: "block" or "none", depending on state
  20. }
  21.  
  22. animatedcollapse.init()


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: HTML5
  1. animatedcollapse.addDiv('box13', fade=0,speed=800,group=boxes,persist=1,hide=1')

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: HTML5
  1. /*ich bin ein Kommenar*/

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

Code: HTML5
  1. <!-- animate collapse Div - CSS -->
  2. div.box,
  3. div.box_a,
  4. div.box_b,
  5. div.box_c,
  6. div.box_d,
  7. div.box_e,
  8. div.box_f {
  9.     width:280px; /*Breite Box*/
  10.     border-top: 5px solid #e2e2e2; /*oberer grauer Rand der Box*/
  11.     padding: 8px;  /*Abstand zwischen äußerer Box-Kante und Inhalt*/
  12.     margin-bottom: -25px; /*Abstand von oberer Box zur darunterliegenden Box*/
  13.     margin-right: 15px; /*seitlicher Abstand zwischen den Boxen*/
  14.     -webkit-box-shadow: 0px 0px 5px #999;  
  15.        -moz-box-shadow: 0px 0px 5px #999;
  16.             box-shadow: 0px 0px 5px #999 /*3Zeilen für den Box-Schatten*/
  17. }
  18.  
  19. /*Änderung der Rahmenfarbe bei Mouseover*/
  20. div.box:hover {border-top: 5px solid #0e7ac4} /*box bei Mouseover*/
  21. div.box_a:hover {border-top: 5px solid #B42FCF} /*box_a bei Mouseover*/
  22. div.box_b:hover {border-top: 5px solid #4ABA4A} /*box_b bei Mouseover*/
  23. div.box_c:hover {border-top: 5px solid #AC2A6F} /*box_c bei Mouseover*/
  24. div.box_d:hover {border-top: 5px solid #E48E0D} /*box_d bei Mouseover*/
  25. div.box_e:hover {border-top: 5px solid #C30027} /*box_e bei Mouseover*/
  26. div.box_f:hover {border-top: 5px solid #79C032} /*box_f bei Mouseover*/
  27.  
  28. .box_inner {width:264px;} /*Breite der Box (280px) - 2x 8px padding = Breite aufgeklappte Box*/
  29.    
  30. .button{padding:6px 0px 4px 0px;} /* Astand oben und unten vom Button zum Text */
  31.  
« Letzte Änderung: 18. April 2014, 18:00:52 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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.




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.




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: HTML5
  1. <div class="box">


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

Code: HTML5
  1. </div>

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)




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.


« Letzte Änderung: 21. April 2014, 10:13:20 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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.




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




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.




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.




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: HTML5
  1. rel="toggle[box1]" data-openimage="../assets/images/collapse.png" data-closedimage="../assets/images/expand.png"

Alle sonst noch notwendigen Klicks sind im folgenden Screenshot markiert.




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)

« Letzte Änderung: 21. April 2014, 11:14:20 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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: HTML5
  1. <div speed="400" groupname="boxes" id="box1" class="box_inner">

Codeschnipsel zum Einfügen nach dem Tag:

Code: HTML5
  1. </div>




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




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.




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

« Letzte Änderung: 21. April 2014, 11:41:22 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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)




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: HTML5
  1. class="box"

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.

« Letzte Änderung: 21. April 2014, 12:03:27 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
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.




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.



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: HTML5
  1. toggle[box1]

Code: HTML5
  1. toggle[box2]

(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.




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.




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 »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion