Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

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

Autor Thema: rotierender Top-Button mit Fading-Effekt  (Gelesen 5228 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 ( http://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 »
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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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: http://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 (http://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 »
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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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.  http://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 »
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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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.
http://www.nof-community.de/sonstige-tutorials-fuer-netobjects-fusion/so-publiziert-man-eine-nof-seite-unter-dem-doctype-loose/

Ich wünsche gutes Gelingen!
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... ;)