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: jQuery News-Ticker in NetObjects Fusion einbinden  (Gelesen 5874 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
jQuery News-Ticker in NetObjects Fusion einbinden
« am: 29. September 2014, 20:09:55 »

Kürzlich habe ich einen - wie ich finde, ganz netten - News-Ticker im Web gefunden und in NOF getestet. Er basiert auf jQuery und bietet die Möglichkeit über drei kleine Buttons vor oder zurück zu blättern, bzw. den Ticker zu stoppen oder neu zu starten.

Wie ihr auf unserer Demo-Seite erkennen könnt, funktioniert er auch anstandslos in NetObjects Fusion, weshalb ich in folgendem Tutorial erläutern möchte, wie ihr diesen News-Ticker in euer NOF-Projekt einbinden könnt.

Hinweis:
Achtung! Das Tutorial setzt eine Publizierung nach Asset-Typ voraus. Solltet ihr eine andere Publizierungsstruktur verwenden, so könnt ihr den Ticker zwar trotzdem nutzen, müsst jedoch die im Tutorial genannten Pfadangaben eurer Struktur entsprechend anpassen.
« Letzte Änderung: 01. Oktober 2014, 07:59:30 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #1 am: 29. September 2014, 22:24:11 »
Zunächst ladet Euch die benötigten Dateien von der Quellseite herunter, indem ihr auf den Button mit der Aufschrift "Download now source files and docs" klickt. Im Anschluss entpackt bitte die heruntergeladene Zip-Datei.
Wenn ihr den entpackten Ordner "jquery_news_ticker" öffnet, findet ihr eine Datei mit dem Namen
index.html

sowie 3 Ordner mit den Namen
images
includes
styles



In den Ordnern befinden sich weitere Dateien. Entnehmt bitte dem nachfolgenden Screenshot, welche der Dateien von euch benötigt werden.



« Letzte Änderung: 29. September 2014, 22:53:11 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #2 am: 29. September 2014, 23:33:45 »
In der Datei ticker-styles.css waren einige wenige Anpassungen notwendig. Um diese nicht alle im Detail erläutern zu müssen, findet ihr nachfolgenden den geänderten Inhalt besagter Datei. Öffnet diese Datei also in eurem Editor und tauscht ihren Inhalt gegen den hier von mir geposteten Code.

Code: HTML5
  1. /* Ticker Styling */
  2. .ticker-wrapper.has-js {
  3.         margin: 20px 0px 20px 0px;
  4.         padding: 0px 20px;
  5.         width: 880px;
  6.         height: 32px;
  7.         display: block;
  8.         -webkit-border-radius: 15px;
  9.         -moz-border-radius: 15px;
  10.         border-radius: 15px;
  11.         background-color: #f8f0db;
  12.         font-size: 0.75em;
  13. }
  14. .ticker {
  15.         width: 810px;
  16.         height: 23px;
  17.         display: block;
  18.         position: relative;
  19.         overflow: hidden;
  20.         background-color: #f8f0db;
  21. }
  22. .ticker-title {
  23.         padding-top: 9px;
  24.         color: #990000;
  25.         font-weight: bold;
  26.         background-color: #f8f0db;
  27.         text-transform: uppercase;
  28. }
  29. .ticker-content {
  30.         margin: 0px;
  31.         padding-top: 7px;
  32.         position: absolute;
  33.         color: #1F527B;
  34.         font-weight: bold;
  35.         background-color: #f8f0db;
  36.         overflow: hidden;
  37.         white-space: nowrap;
  38.         line-height: 1.2em;
  39. }
  40. .ticker-content:focus {
  41.         none;
  42. }
  43. .ticker-content a {
  44.         text-decoration: none; 
  45.         color: #1F527B;
  46. }
  47. .ticker-content a:hover {
  48.         text-decoration: underline;    
  49.         color: #0D3059;
  50. }
  51. .ticker-swipe {
  52.         padding-top: 9px;
  53.         position: absolute;
  54.         top: 0px;
  55.         background-color: #f8f0db;
  56.         display: block;
  57.         width: 800px;
  58.         height: 23px;
  59. }
  60. .ticker-swipe span {
  61.         margin-left: 1px;
  62.         background-color: #f8f0db;
  63.         border-bottom: 1px solid #1F527B;
  64.         height: 12px;
  65.         width: 7px;
  66.         display: block;
  67. }
  68. .ticker-controls {
  69.         padding: 8px 0px 0px 0px;
  70.         list-style-type: none;
  71.         float: left;
  72. }
  73. .ticker-controls li {
  74.         padding: 0px;
  75.         margin-left: 5px;
  76.         float: left;
  77.         cursor: pointer;
  78.         height: 16px;
  79.         width: 16px;
  80.         display: block;
  81. }
  82. .ticker-controls li.jnt-play-pause {
  83.         background-image: url('../assets/images/controls.png');
  84.         background-position: 32px 16px;
  85. }
  86. .ticker-controls li.jnt-play-pause.over {
  87.         background-position: 32px 32px;
  88. }
  89. .ticker-controls li.jnt-play-pause.down {
  90.         background-position: 32px 0px;
  91. }
  92. .ticker-controls li.jnt-play-pause.paused {
  93.         background-image: url('../assets/images/controls.png');
  94.         background-position: 48px 16px;
  95. }
  96. .ticker-controls li.jnt-play-pause.paused.over {
  97.         background-position: 48px 32px;
  98. }
  99. .ticker-controls li.jnt-play-pause.paused.down {
  100.         background-position: 48px 0px;
  101. }
  102. .ticker-controls li.jnt-prev {
  103.         background-image: url('../assets/images/controls.png');
  104.         background-position: 0px 16px;         
  105. }
  106. .ticker-controls li.jnt-prev.over {
  107.         background-position: 0px 32px;         
  108. }
  109. .ticker-controls li.jnt-prev.down {
  110.         background-position: 0px 0px;          
  111. }
  112. .ticker-controls li.jnt-next {
  113.         background-image: url('../assets/images/controls.png');
  114.         background-position: 16px 16px;
  115. }
  116. .ticker-controls li.jnt-next.over {
  117.         background-position: 16px 32px;
  118. }
  119. .ticker-controls li.jnt-next.down {    
  120.         background-position: 16px 0px; 
  121. }
  122. .js-hidden {
  123.         display: none;
  124. }
  125. .no-js-news {
  126.         padding: 10px 0px 0px 45px;
  127.         color: #F8F0DB;
  128. }
  129. .left .ticker-swipe {
  130.         /*left: 80px;*/
  131. }
  132. .left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
  133.     float: left;
  134. }
  135. .left .ticker-controls {
  136.     padding-left: 6px;
  137. }
  138. .right .ticker-swipe {
  139.         /*right: 80px;*/
  140. }
  141. .right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
  142.     float: right;
  143. }
  144. .right .ticker-controls {
  145.     padding-right: 6px;
  146. }
  147.  
« Letzte Änderung: 06. Oktober 2014, 10:59:39 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #3 am: 29. September 2014, 23:35:37 »
Bindet nun die 4 benötigten Dateien als Assets in euer Projekt ein. Hierzu könnt ihr bei Bedarf die folgende Anleitung nutzen:  http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/

Im Normalfall publiziert NOF die eingebundenen js-Dateien in den Ordner Assets, die CSS-Datei in den Ordner html und die Bild-Datei in den Ordner Images, welcher sich im Assetordner befindet. Sollte diese aus irgendwelchen Gründen bei euch nicht der Fall sein, dann verschiebt die Dateien einfach von Hand an den richtigen Ort. Eine Anleitung findet ihr unter diesem Link: https://www.nof-community.de/publizieren-mit-nof-oder-ftp-programm/eigene-verzeichnisse-erstellen-und-den-ablageort-fur-publizierte-dateien-andern/
« Letzte Änderung: 30. September 2014, 10:41:45 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #4 am: 29. September 2014, 23:38:28 »
Im nächsten Schritt tragt ihr die Verlinkungen der benötigten Scripts zwischen den Head-Tags eurer Seite(n) ein. Denkt vorab darüber nach, ob der Ticker auf einer oder zwei Seiten laufen soll oder auf allen. Je nachdem wie ihr euch entscheidet, fügt ihr den Code ins Masterrahmen-html (alle Seiten) oder ins Layout-html (einzelne Seiten) ein.

Für den Fall, dass der Ticker auf allen Seiten laufen soll, müsstet ihr  für die Startseite einen eigenen Masterrahmen anlegen, da die Startseite andere Pfadangaben benötigt als die Unterseiten.

Code zum Einfügen zwischen den head-Tags bei Verwendung des Tickers auf der Startseite:
Code: HTML5
  1. <link href="./html/ticker-style.css" rel="stylesheet" type="text/css" />
  2. <script src="./assets/jquery.ticker.js" type="text/javascript"></script>
  3. <script src="./assets/site.js" type="text/javascript"></script>

Code zum Einfügen zwischen den head-Tags bei Verwendung des Tickers auf Unterseiten:
Code: HTML5
  1. <link href="./ticker-style.css" rel="stylesheet" type="text/css" />
  2. <script src="../assets/jquery.ticker.js" type="text/javascript"></script>
  3. <script src="../assets/site.js" type="text/javascript"></script>
« Letzte Änderung: 06. Oktober 2014, 11:01:05 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #5 am: 30. September 2014, 10:40:56 »
Nun benötigt ihr nur noch den Code für den Ticker selbst. Diesen fügt ihr nach folgender Anleitung in ein Textfeld ein.
Selbstverständlich müsst ihr den Code nach euren Bedürfnissen anpassen. Dort wo ihr jetzt Nachricht 1-7 lest, tragt ihr eure Newsmeldungen ein. Achtet dabei darauf, dass diese nicht zu lang werden, denn sonst werden sie abgeschnitten.
Code: HTML5
  1. <ul id="js-news" class="js-hidden">
  2.    <li class="news-item">Nachricht 1</li>
  3.    <li class="news-item">Nachricht 2</li>
  4.    <li class="news-item">Nachricht 3</li>
  5.    <li class="news-item">Nachricht 4</li>
  6.    <li class="news-item">Nachricht 5</li>
  7.    <li class="news-item">Nachricht 6</li>
  8.    <li class="news-item">Nachricht 7</li>
  9. </ul>


Da ich vermute, dass diese Frage ohnehin bald gestellt würde, habe ich getestet, ob sich die Nachrichten auch verlinken lassen um ggf. die Möglichkeit anzubieten, mehr zu den einzelnen Nachrichten lesen zu können.
Wer Interesse daran hat, nutzt den nachfolgenden Code für seinen Ticker und trägt zu den Nachrichten statt dem Wort "Link" den Link zur jeweiligen Seite in den Code ein.

Code: HTML5
  1. <ul id="js-news" class="js-hidden">
  2.    <li class="news-item"><a href="Link" target="_blank">Nachricht 1</a></li>
  3.    <li class="news-item"><a href="Link" target="_blank">Nachricht 2</a></li>
  4.    <li class="news-item"><a href="Link" target="_blank">Nachricht 3</a></li>
  5.    <li class="news-item"><a href="Link" target="_blank">Nachricht 4</a></li>
  6.    <li class="news-item"><a href="Link" target="_blank">Nachricht 5</a></li>
  7.    <li class="news-item"><a href="Link" target="_blank">Nachricht 6</a></li>
  8.    <li class="news-item"><a href="Link" target="_blank">Nachricht 7</a></li>
  9. </ul>
« Letzte Änderung: 01. Oktober 2014, 07:53:13 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: jQuery News-Ticker in NetObjects Fusion einbinden
« Antwort #6 am: 05. Oktober 2014, 22:14:31 »
Gutes Gelingen!  (fubar)

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion