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: Slide Down Box Menu...  (Gelesen 3078 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Slide Down Box Menu...
« am: 16. August 2014, 12:11:17 »
Hallo zusammen,

es ist Wochenende, also Bastelzeit bei NOF  (nod)

Meine Begeisterung für CSS3 kennt im Moment keine Grenzen, also habe ich mir eine schicke neue Aufgabe herausgesucht: Ich möchte meine Navigationsleiste auffrischen. Als Vorlage dient mir diese Demo

So weit, so gut...irgendwo versteckt sich aber der Fehlerteufel bei mir, denn bei mir tut sich nichts mit den Bildern usw.

Ich habe mich dann im QT bei mir schlau gemacht, da steht was von "verirrtes start script" in rot - also vermute ich mal, dass ich irgendwo einen Fehler gemacht habe.

http://www.anwalt-marx.de/html/test

Wenn jemand die Zeit findet und einen Blick riskiert, freue ich mich über Vorschläge.

Beste Grüße


Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #1 am: 16. August 2014, 12:33:22 »
Du hast die Scripts ans Seiten-Ende eingefügt, richtig wäre jedoch das Body-Ende...

Also Zeile 5-71 gehören zwischen zeile 1 und 2...
Code: HTML5
  1.  </div>
  2. </body>
  3. </html>
  4.                
  5.                 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  6.                 <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  7.         <script type="text/javascript">
  8.             $(function() {
  9.                 $('#sdt_menu > li').bind('mouseenter',function(){
  10.                                         var $elem = $(this);
  11.                                         $elem.find('img')
  12.                                                  .stop(true)
  13.                                                  .animate({
  14.                                                         'width':'170px',
  15.                                                         'height':'170px',
  16.                                                         'left':'0px'
  17.                                                  },400,'easeOutBack')
  18.                                                  .andSelf()
  19.                                                  .find('.sdt_wrap')
  20.                                              .stop(true)
  21.                                                  .animate({'top':'140px'},500,'easeOutBack')
  22.                                                  .andSelf()
  23.                                                  .find('.sdt_active')
  24.                                              .stop(true)
  25.                                                  .animate({'height':'170px'},300,function(){
  26.                                                 var $sub_menu = $elem.find('.sdt_box');
  27.                                                 if($sub_menu.length){
  28.                                                         var left = '170px';
  29.                                                         if($elem.parent().children().length == $elem.index()+1)
  30.                                                                 left = '-170px';
  31.                                                         $sub_menu.show().animate({'left':left},200);
  32.                                                 }      
  33.                                         });
  34.                                 }).bind('mouseleave',function(){
  35.                                         var $elem = $(this);
  36.                                         var $sub_menu = $elem.find('.sdt_box');
  37.                                         if($sub_menu.length)
  38.                                                 $sub_menu.hide().css('left','0px');
  39.                                        
  40.                                         $elem.find('.sdt_active')
  41.                                                  .stop(true)
  42.                                                  .animate({'height':'0px'},300)
  43.                                                  .andSelf().find('img')
  44.                                                  .stop(true)
  45.                                                  .animate({
  46.                                                         'width':'0px',
  47.                                                         'height':'0px',
  48.                                                         'left':'85px'},400)
  49.                                                  .andSelf()
  50.                                                  .find('.sdt_wrap')
  51.                                                  .stop(true)
  52.                                                  .animate({'top':'25px'},500);
  53.                                 });
  54.             });
  55.         </script>
  56.                
  57.     <script type="text/javascript">
  58.     jQuery(document).ready(function($){
  59.             $(window).scroll(function(){
  60.             if ($(this).scrollTop() < 200) {
  61.                            $('#smoothup') .fadeOut();
  62.           } else {
  63.                            $('#smoothup') .fadeIn();
  64.           }
  65.       });
  66.            $('#smoothup').on('click', function(){
  67.                    $('html, body').animate({scrollTop:0}, 400);
  68.                    return false;
  69.                    });
  70.    });
  71.    </script>
« Letzte Änderung: 16. August 2014, 12:35:18 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #2 am: 16. August 2014, 13:06:53 »
Das letzte Script muss auch noch vom Seitenende weg.
Die eingebundene style.css solltest du umbenennen, weil es bereits eine style.css gibt.
Die posts.css wird noch benötigt.
Das verlinkte Javascript wird nicht gefunden. (jquery.easing.1.3.js)  (fubar)

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #3 am: 16. August 2014, 13:24:41 »
Ok, ich glaube, ich muss mich mal kurz sortieren... (nod)

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #4 am: 16. August 2014, 13:51:59 »
Also, das letzte script habe ich wegbekommen  (nod)

Zitat
Die eingebundene style.css solltest du umbenennen, weil es bereits eine style.css gibt.
Da verstehe ich nur Bahnhof, sorry  (wasntme)

Ich sehe auf dem server nur eine style.css... 8-)

Zitat
Die posts.css wird noch benötigt.

...post.css - ich habe keinen Plan, worum es da geht  :-S

Und das verlinkte Javascript macht mir Kopfschmerzen (jquery.easing.1.3.js) - ich habe das auf den Server geschoben, warum findet der das nicht  (facepalm)

Zurück auf Start, auf gehts  (nod)

Ist das script jetzt eigentlich an der richtigen Stelle? Ich weiß nicht so recht...

Beste Grüße

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #5 am: 16. August 2014, 16:19:42 »
Du hast eine Datei namens style.css aus dieser Navi-Demo entnommen und bei dir eingebunden. Eine der 3 nof-eigenen Styledateien heißt aber ebenfalls style.css. Heißt, in deinem Projekt gibt es zwei gleichnamige Style-Dateien, was nicht so gut ist.
Siehe gelb markierte Zeilen im Auszug aus deinem QT.

Code: HTML5
  1. <link rel="stylesheet" href="../assets/style.css" type="text/css" media="screen"/>
  2.                
  3.    
  4.      
  5.     <style type="text/css">
  6.     #smoothup {
  7.        height: 40px;
  8.        width: 40px;
  9.        position:fixed;
  10.        bottom:150px;
  11.        right:100px;
  12.        text-indent:-9999px;
  13.        display:none;
  14.        background: url("../assets/images/gototop.png");
  15.        -webkit-transition-duration: 0.4s;
  16.        -moz-transition-duration: 0.4s;
  17.        transition-duration: 0.4s;
  18.     }
  19.     #smoothup:hover {
  20.        rotate(360deg);
  21.        -moz-transform: rotate(360deg);
  22.        -ms-transform: rotate(360deg);
  23.        -webkit-transform: rotate(360deg)
  24.     }
  25.     </style>
  26. <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
  27. <script type="text/javascript" src="../js/custom.js"></script><script type="text/javascript" src="../js/smoothscroll.js"></script>
  28. <style type="text/css">
  29.       *{margin:0px;padding:0px;}
  30.       #homebutton
  31.       {
  32.         background:transparent url(../assets/images/home-button.png) no-repeat scroll 0px 0px;
  33.         height:170px;
  34.         left:0;
  35.         position:fixed;
  36.         top:190px;
  37.         width:40px;
  38.       }
  39.       div#homebutton:hover
  40.       {
  41.         background-position:-41px 0px;
  42.       }
  43.       #homebutton a
  44.       {
  45.         display:block;
  46.         height:170px;
  47.         width:40px;
  48.       }
  49.  
  50. <script type="text/javascript">
  51. <!--
  52. function F_loadRollover(){} function F_roll(){}
  53. //-->
  54. <script type="text/javascript" src="../assets/jquery.js">
  55. <script type="text/javascript" src="../assets/modernizr-custom.js">
  56. <script type="text/javascript" src="../assets/jquery-ui.js">
  57. <script type="text/javascript" src="../assets/polyfiller.js">
  58. <script type="text/javascript" src="../assets/jquery.jcarousel.js">
  59. <script type="text/javascript" src="../assets/rollover.js">
  60. <link rel="stylesheet" type="text/css" href="../html/fusion.css">
  61. <link rel="stylesheet" type="text/css" href="../html/style.css">
  62. <link rel="stylesheet" type="text/css" href="../html/site.css">
  63. <link rel="stylesheet" type="text/css" href="../html/general_en.css">
  64. <link rel="stylesheet" type="text/css" href="../html/nof_jcarousel_skin.css">
  65. <link rel="stylesheet" type="text/css" href="../html/MLR.css">

Wegen der js-Datei... auf den Server schieben ist eine Sache, der im QT hinterlegte Pfad ist die Andere. Stimmt beides nicht überein, gibts Probleme.
Gehe in den QT deiner Seite, suche dir den Link zur js-Datei, gehe mit einem Rechtsklick auf den Link (FF), wähle Link-Adresse kopieren. Füge diese Adresse in die Adresszeile deines Browsers ein und schau sie dir an. Dort sucht der Browser das Script. Liegt es dort? Nein! Den Rest schaffst du allein.  (nod)  (fubar)


Die posts.css befindet sich als Style-Datei in der von dir verlinkten Demo und scheint für die Funktionalität des Effekts unabdingbar zu sein... also müsstest du diese ebenfalls in dein Projekt einbinden.
« Letzte Änderung: 16. August 2014, 16:26:36 von nettesekel »

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #6 am: 16. August 2014, 17:18:00 »
Also, tief Luft holen  (chuckle)

 - style.css abgeändert  (nod)
 - post.css geregelt, schätze ich mal  (chuckle)
 - bei dieser js Datei bin ich am  :-& - das Problem habe ich erkannt, aber der Lösung bin ich kein Schritt näher gekommen  :-x ich muss das austauschen, aber wie?

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #7 am: 16. August 2014, 17:58:22 »
style.css passt
posts.css passt

Wegen der js-Datei denkst du vermutlich komplizierter als nötig und stehst dir deshalb selbst im Weg.

Nochmal langsam. "Die Seite" benötigt das Script zur korrekten Darstellung der Navi.
Deshalb bindest du das Script in deine Seite ein, indem du eine eine relative Pfadangabe zum Ablageort des Scripts einbindest. Parallel platzierst du das Script auf deinem Server, vorzugsweise dort, wo du es in der Verlinkung platziert zu haben angibst. ;)

Code: HTML5
  1. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Relativ heißt, der angegebene Pfad steht in Bezug zum Ablageort des Dokuments in welchem dieser eingebunden ist.
Das Dokument in dem sich der Link befindet ist eine html-Seite, welche im Ordner "html" auf deinem Server liegt. Dein Pfad sagt src="jquery.easing.1.3.js" >> das Script liegt im selben Ordner wie die html-Seite. Tut es aber nicht, denn es liegt im Root-Verzeichnis. Deine Pfadangabe wäre somit ausschließlich für die Startseite korrekt.

Da wir uns aber aktuell auf einer Unterseite befinden, müsste die Pfadangabe so getsaltet sein, dass der Browser aus dem Ordner html eine Ebene Höher ins Rootverzeichnis geht um dort das Script zu finden src="../jquery.easing.1.3.js".

Alternativ kannst du eine Kopie des Scripts zusätzlich im html-Ordner platzieren, dann ist der Pfad korrekt, wobei ich ihn dann trotzdem um ./ ergänzen würde, also src="./jquery.easing.1.3.js".

Ein reines Pfadproblem... wenn der Knoten mit den relativen Pfaden einmal geplatzt ist, wirst du bei solchen Problemen nur noch lächeln.  (fubar)
« Letzte Änderung: 16. August 2014, 18:02:06 von nettesekel »

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #8 am: 17. August 2014, 12:27:49 »
Da schreibe ich in meinem Tutorial selber über die richtige Zuordnung bei der Pfadangabe, und dann setze ich mich wieder in dieses Nest (angry). Aber aus Fehlern lernt man ja bekanntlich, und du hast Recht, dass Ding wird in naher Zukunft mit einem Lächeln abgespeist  :-D

Jetzt klappt es! Besten Dank!

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #9 am: 17. August 2014, 13:10:37 »
Na das sieht doch mal richtig flott aus...

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #10 am: 11. Oktober 2014, 20:07:33 »
Hallo zusammen,

weil ich mal wieder munter am basteln bin, hat sich irgendwo bei mir ein Fehler eingeschlichen. Mein tolles Drop Sown Menü ist auf den Unterseiten dahin...und ich frage mich seit 2 Tagen, woran das liegt, ich bekomme das Ding nicht zum laufen.

Hier ist das "kaputte" Ding:

Testseite

Hier schnurrt die Katze...

...läuft

Bin für jeden Hinweis dankbar  ;-) Beste Grüße


Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #11 am: 11. Oktober 2014, 20:20:32 »
Muss ich mir mal in Ruhe ansehen. Im Moment erschlägt mich der Code ein wenig den ich da vergleichen muss. Du hast mit der Zeit sehr viele externe Anwendungen in deiner Seite. Du solltest dir vielleicht angewöhnen, deine Einfügungen zu kommentieren, damit man/du besser erkennen kann/st, was wofür eingefügt wurde. :)

Also z.B. so:
Code: HTML5
  1. <!-- Beginn Menü-Scripts -->
  2. Hier deine Einfügung
  3. <!-- Ende Menü-Scripts -->
  4.  
  5. <!-- Beginn Galerie-Scripts -->
  6. Hier deine Einfügung
  7. <!-- Ende Galerie-Scripts -->

Ich melde mich, wenn ich fündig bin... werds vermutlich aber erst morgen schaffen. :)

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #12 am: 11. Oktober 2014, 20:25:13 »
Ich danke dir...und aufräumen muss ich auf jeden Fall, es wird alles zu unübersichtlich. Ich suche mal weiter, vielleicht erspare ich dir die Arbeit  ;-)

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Slide Down Box Menu...
« Antwort #13 am: 11. Oktober 2014, 20:26:40 »
Ich suche mal weiter, vielleicht erspare ich dir die Arbeit  ;-)
Zu spät...  (rofl)


Code: HTML5
  1. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Der dazu gehörenden Link...
also, da wird das Script gesucht... http://www.anwalt-marx.de/html/jquery.easing.1.3.js

Und hier liegt es... http://www.anwalt-marx.de/jquery.easing.1.3.js

Versuchs mal damit:
Code: HTML5
  1. <script type="text/javascript" src="../jquery.easing.1.3.js"></script>

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Slide Down Box Menu...
« Antwort #14 am: 11. Oktober 2014, 20:38:11 »
...eine Pfadproblem  (angry) - es ist nur eine Frage der Zeit, bis ich das endlich raffe  (facepalm)

Ich danke dir vielmals, läuft jetzt wieder. Nun mache ich mich mal ans aufräumen der HP.

Schönes Wochenende  (fubar)

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion