Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

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

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

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

Offline nettesekel

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

Offline nettesekel

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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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!

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion