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: rotierender Top-Button mit Fading-Effekt  (Gelesen 11636 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
rotierender Top-Button mit Fading-Effekt
« am: 05. Mai 2014, 12:49:39 »
Ein Top-Button der sich erst kurz vor Seitenende einblendet und bei Mausover rotiert ist eine nette Spielerei für eine Website, so baut man ihn ein...

Wie das in einer NOF-Seite aussieht und funktioniert, könnt ihr in diesem Demo-Projekt testen. http://demos.nof-community.de/rotierender-top-button-mit-fading-effekt/demo.html

Bei diesem Tutorial gehe ich davon aus, dass ihr unter der Publizierungsstruktur "nach Assettyp" publiziert. Solltet ihr eine andere Publizierungsstruktur festgelegt haben, müsst ihr diese entwede umstellen ( https://www.nof-community.de/index.php/topic,1540.0) oder sämtliche Pfadangaben in diesem Tutorial eurer Struktur entsprechend anpassen.
« Letzte Änderung: 30. Juni 2014, 19:07:16 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: rotierender Top-Button mit Fading-Effekt
« Antwort #1 am: 05. Mai 2014, 12:54:29 »
Speichert euch zunächst die Buttongrafik mit einem Rechtsklick von der Quellseite und bindet die Grafik als Asset in euer Projekt ein.

Eine Anleitung dazu findet ihr bei Bedarf hier: www.nof-community.de/index.php/topic,11.0
« Letzte Änderung: 05. Mai 2014, 13:00:49 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: rotierender Top-Button mit Fading-Effekt
« Antwort #2 am: 05. Mai 2014, 12:55:30 »
Im nächsten Schritt bindet ihr folgenden Code zwischen den Headtags eurer Seite ein. Eine Anleitung hierzu findet Ihr bei Bedarf hier: https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/code-zwischen-den-head-tags-der-seite-einfugen/

Da ihr den Button vermutlich nicht nur auf einer Seite verwenden werdet, bietet sich das Einbinden des Codes im Masterrahmen an. Beachtet jedoch, dass ihr dann für die Startseite einen eigenen Masterrahmen anlegen müsst (https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/einen-neuen-masterrahmen-anlegen/) da sich die Pfadangaben für die Startseite von denen für die Unterseiten unterscheiden.

Eben aus diesem Grund ist für die Startseite eine kleine Anpassung der Pfandangabe im nachfolgenden Code nötig. Entfernt hierzu den ersten Punkt des Pfades in der gelb markierten Zeile.

Für alle Unterseiten verwendet ihr den Code ohne Änderung.

Code: HTML5
  1.  
  2. <style type="text/css">
  3. #smoothup {
  4.    height: 40px;
  5.    width: 40px;
  6.    position:fixed;
  7.    bottom:50px;
  8.    right:100px;
  9.    text-indent:-9999px;
  10.    display:none;
  11.    background: url("../assets/images/gototop.png");
  12.    -webkit-transition-duration: 0.4s;
  13.    -moz-transition-duration: 0.4s;
  14.    transition-duration: 0.4s;
  15. }
  16. #smoothup:hover {
  17.    rotate(360deg);
  18.    -moz-transform: rotate(360deg);
  19.    -ms-transform: rotate(360deg);
  20.    -webkit-transform: rotate(360deg)
  21. }
« Letzte Änderung: 05. Mai 2014, 14:18:19 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: rotierender Top-Button mit Fading-Effekt
« Antwort #3 am: 05. Mai 2014, 12:56:25 »
Damit das Ganze auch funktionieren kann, müssen wir nun eine zweite Code-Einfügung vornehmen.
Den  nachfolgenden Code fügt ihr nun am Body-Ende ein.
Auch für diesen Code bietet sich die Einfügung im Masterrahmen-HTML an.

In älteren NOF-Versionen kann man an der Aufschrift der Reiter im Codefenster unschwer erkennen, wo die Einfügungen für das Body-Ende hingehören..In den neuen NOF-Versionen befinden sich am oberen Fenstrand eine Reihe von Icons. Fahrt ihr mit der Maus über diese Icons wird euch in einem kleinen Tooltipp angezeigt, für welchen Bereich das entsprechende Icon steht. Sucht euch auf diese Weise das Icon für das Body-Ende, klickt es an und fügt nun dort, wo der Cursor zu blinken beginnt den kopierten Code ein. Mit einem Klick auf OK schließt ihr den Vorgang ab.


Code: HTML5
  1. <script type="text/javascript">
  2. jQuery(document).ready(function($){
  3.         $(window).scroll(function(){
  4.         if ($(this).scrollTop() < 200) {
  5.                         $('#smoothup') .fadeOut();
  6.        } else {
  7.                         $('#smoothup') .fadeIn();
  8.        }
  9.    });
  10.         $('#smoothup').on('click', function(){
  11.                 $('html, body').animate({scrollTop:0}, 400);
  12.                 return false;
  13.                 });
  14. });
« Letzte Änderung: 05. Mai 2014, 14:46:49 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: rotierender Top-Button mit Fading-Effekt
« Antwort #4 am: 05. Mai 2014, 12:57:50 »
Zum guten Schluss müssen wir nun noch den Code für den eigentlichen Button einfügen. Hierzu fügt
Ihr in eurer Arbeitsansicht ein kleines Textfeld ein und platziert den nachfolgenden Code nach dieser Kurzanleitung in diesem Textfeld.  https://www.nof-community.de/index.php/topic,47.0
Wo ihr das Textfeld platziert spielt eigentlich keine Rolle, da die Position des Buttons durch die Vorgaben im CSS geregelt wird. Am besten legt ihr ihn irgendwo unten ans Seitenende.

Code: HTML5
  1. <a href="#top" id="smoothup" title="Back to top"></a>
« Letzte Änderung: 05. Mai 2014, 15:02:18 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: rotierender Top-Button mit Fading-Effekt
« Antwort #5 am: 05. Mai 2014, 15:10:02 »
Nach dem Publizieren solltet ihr euren Top-Button nun bewundern können. Sollte der Button in einzelnen Browsern Probleme bereiten, könnte eine Publizierung der Seite unter dem Doctype LOOSE Abhilfe schaffen. Unter diesem Doctype funktionierte der Button in den von mir getesteten Browsern.
https://www.nof-community.de/sonstige-tutorials-fuer-netobjects-fusion/so-publiziert-man-eine-nof-seite-unter-dem-doctype-loose/

Ich wünsche gutes Gelingen!

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion