Anzeige

Script auslagern - was mach ich falsch

Script auslagern - was mach ich falsch | PSD-Tutorials.de

Erstellt von TommiH, 20.03.2013.

  1. TommiH

    TommiH Nicht mehr ganz neu hier

    Dabei seit:
    29.07.2010
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CS5 Web Suite
    Kameratyp:
    Nikon 3000
    Script auslagern - was mach ich falsch
    Hallo,

    ich habe eine html5 Seite erstellt zum üben und baue einige sachen ein. darunter auch eine Funktion.
    Wenn sie im html code steht - funktioniert es. nun wollte ich sie auslagern,aber irgend was mache ich falsch :)

    html Teil mit Funktion (welche funktioniert)
    HTML:
    1.  
    2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    3.         <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    4.         <script type="text/javascript">
    5.             $(function() {
    6.                 /**
    7.                 * for each menu element, on mouseenter,
    8.                 * we enlarge the image, and show both sdt_active span and
    9.                 * sdt_wrap span. If the element has a sub menu (sdt_box),
    10.                 * then we slide it - if the element is the last one in the menu
    11.                 * we slide it to the left, otherwise to the right
    12.                 */
    13.                 $('#sdt_menu > li').bind('mouseenter',function(){
    14.                     var $elem = $(this);
    15.                     $elem.find('img')
    16.                          .stop(true)
    17.                          .animate({
    18.                             'width':'170px',
    19.                             'height':'170px',
    20.                             'left':'0px'
    21.                          },400,'easeOutBack')
    22.                          .andSelf()
    23.                          .find('.sdt_wrap')
    24.                          .stop(true)
    25.                          .animate({'top':'140px'},500,'easeOutBack')
    26.                          .andSelf()
    27.                          .find('.sdt_active')
    28.                          .stop(true)
    29.                          .animate({'height':'170px'},300,function(){
    30.                         var $sub_menu = $elem.find('.sdt_box');
    31.                         if($sub_menu.length){
    32.                             var left = '170px';
    33.                             if($elem.parent().children().length == $elem.index()+1)
    34.                                 left = '-170px';
    35.                             $sub_menu.show().animate({'left':left},200);
    36.                         }  
    37.                     });
    38.                 }).bind('mouseleave',function(){
    39.                     var $elem = $(this);
    40.                     var $sub_menu = $elem.find('.sdt_box');
    41.                     if($sub_menu.length)
    42.                         $sub_menu.hide().css('left','0px');
    43.                    
    44.                     $elem.find('.sdt_active')
    45.                          .stop(true)
    46.                          .animate({'height':'0px'},300)
    47.                          .andSelf().find('img')
    48.                          .stop(true)
    49.                          .animate({
    50.                             'width':'0px',
    51.                             'height':'0px',
    52.                             'left':'85px'},400)
    53.                          .andSelf()
    54.                          .find('.sdt_wrap')
    55.                          .stop(true)
    56.                          .animate({'top':'25px'},500);
    57.                 });
    58.             });
    59.         </script>
    habe nun wie folgt ausgelagert
    eine main.js erstellt und im gleichen Verzeichnis wie html abgelegt
    Inhalt:
    Code (Text):
    1.  
    2. <!-- The JavaScript -->
    3.  
    4.  
    5.             $(function() {
    6.                 /**
    7.                 * for each menu element, on mouseenter,
    8.                 * we enlarge the image, and show both sdt_active span and
    9.                 * sdt_wrap span. If the element has a sub menu (sdt_box),
    10.                 * then we slide it - if the element is the last one in the menu
    11.                 * we slide it to the left, otherwise to the right
    12.                 */
    13.                 $('#sdt_menu > li').bind('mouseenter',function(){
    14.                     var $elem = $(this);
    15.                     $elem.find('img')
    16.                          .stop(true)
    17.                          .animate({
    18.                             'width':'170px',
    19.                             'height':'170px',
    20.                             'left':'0px'
    21.                          },400,'easeOutBack')
    22.                          .andSelf()
    23.                          .find('.sdt_wrap')
    24.                          .stop(true)
    25.                          .animate({'top':'140px'},500,'easeOutBack')
    26.                          .andSelf()
    27.                          .find('.sdt_active')
    28.                          .stop(true)
    29.                          .animate({'height':'170px'},300,function(){
    30.                         var $sub_menu = $elem.find('.sdt_box');
    31.                         if($sub_menu.length){
    32.                             var left = '170px';
    33.                             if($elem.parent().children().length == $elem.index()+1)
    34.                                 left = '-170px';
    35.                             $sub_menu.show().animate({'left':left},200);
    36.                         }  
    37.                     });
    38.                 }).bind('mouseleave',function(){
    39.                     var $elem = $(this);
    40.                     var $sub_menu = $elem.find('.sdt_box');
    41.                     if($sub_menu.length)
    42.                         $sub_menu.hide().css('left','0px');
    43.                    
    44.                     $elem.find('.sdt_active')
    45.                          .stop(true)
    46.                          .animate({'height':'0px'},300)
    47.                          .andSelf().find('img')
    48.                          .stop(true)
    49.                          .animate({
    50.                             'width':'0px',
    51.                             'height':'0px',
    52.                             'left':'85px'},400)
    53.                          .andSelf()
    54.                          .find('.sdt_wrap')
    55.                          .stop(true)
    56.                          .animate({'top':'25px'},500);
    57.                 });
    58.             });
    59.  
    60.  
    und im
    HTML:
    1.  
    2.  .......
    3.        <script language="JavaScript" type="text/javascript" src="js/main.js"></script>
    4.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    5. </head>
    6.  
    Bestimmt ein Anfängerfehler.

    Sorry

    Danke und Grüße

    tommih
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Die Reihenfolge... das könnte dir aber auch deine Fehlerkonsole sagen ;)

    Erstmal jQuery laden - machst du ja beim nicht ausgelagerten Script auch...
     
    #2      
  3. hub

    hub nicht ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    1.116
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    PS,Lr. VS Code, NP++, ...
    Kameratyp:
    Sony a 6000
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Moin moin,
    es ist die falsche Reihenfolge. Du musst erst jQuery laden und dann die Scripts, die jQuery brauchen, so wie deine main.js .

    Gruß Ulli
     
    #3      
  4. jaderbass

    jaderbass Noch nicht viel geschrieben

    Dabei seit:
    14.01.2010
    Beiträge:
    45
    Geschlecht:
    männlich
    Ort:
    Erfurt
    Software:
    Adobe CC / Corel X4
    Kameratyp:
    Canon EOS 500D
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Hallo,

    wie die Anderen bereits sagten - falsche Reihenfolge!

    Aber: Auch falscher Pfad! Du schreibst, dass sie main.js im selben Ordner wie die HTML-Datei liegt. In deiner Verknüpfung steht aber:
    HTML:
    1. <script language="JavaScript" type="text/javascript" src="js/main.js"></script>
    Richtig:
    HTML:
    1. <script language="JavaScript" type="text/javascript" src="main.js"></script>
    Gruß
    Jörg
     
    #4      
  5. manfred_hst

    manfred_hst Nicht mehr ganz neu hier

    Dabei seit:
    01.12.2010
    Beiträge:
    56
    Geschlecht:
    männlich
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    hi tommyH,
    du brauchst auch noch eine require.js.
    die richtige Syntax lautet: <script data-main="js/main.js" src="js/require.js"></script>.
    nachzulesen hier: http://requirejs.org/docs/start.html
    gruß
    Manfred
     
    #5      
  6. TommiH

    TommiH Nicht mehr ganz neu hier

    Dabei seit:
    29.07.2010
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CS5 Web Suite
    Kameratyp:
    Nikon 3000
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Danke für die Hilfe, werde es morgen gleich probieren.
    Im Moment hänge ich an einem anderen Problem.
    Wenn ich meine Seite größer ziehe, rutsch der Inhalt von darunter hinter mein Menü links.

    :(

    VG

    tommiH
     
    #6      
  7. manfred_hst

    manfred_hst Nicht mehr ganz neu hier

    Dabei seit:
    01.12.2010
    Beiträge:
    56
    Geschlecht:
    männlich
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    was heißt "größer ziehen"?
     
    #7      
  8. hub

    hub nicht ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    1.116
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    PS,Lr. VS Code, NP++, ...
    Kameratyp:
    Sony a 6000
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Moin moin,
    kurze Anmerkung:
    @Manfred: mag sein, das ich da etwas konservativ bin. Mir erschließt sich nicht der Sinn deines Vorschlags.
    @tommyH: Das hört sich danach an, als würdes du ein Problem mit float: left; in deinem Menü haben. Nach dem letzten Element mit float solltest du das mit clear: both; o.Ä. beenden (dazu gibt es mehrere Möglichkeiten ...).
    Für Näheres müsste man deinen Quellcode sehen ...

    Gruß Ulli
     
    #8      
  9. manfred_hst

    manfred_hst Nicht mehr ganz neu hier

    Dabei seit:
    01.12.2010
    Beiträge:
    56
    Geschlecht:
    männlich
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    @hub
    was erschließt sich nicht?
    in meinem link ist alles genau beschrieben.
    gruß
    Manfred
     
    #9      
  10. TommiH

    TommiH Nicht mehr ganz neu hier

    Dabei seit:
    29.07.2010
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CS5 Web Suite
    Kameratyp:
    Nikon 3000
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    Mhhh,

    also ich versuche mich gerade an eine html Seite, in der ich einzelne Tutorials zusammen bringe. Dabei versuch ich es zu verstehen, anzupassen usw.
    probieren - verstehen halt.

    Nun habe ich mir eine Seite gebastelt, welches ein horizontales Menü hat.
    Zeiht man die Seite nach links auf, gibt es Platz neben dem letzten Menü Eintrag - das ist OK.
    Nun wollte ich darunter einen Text hängen und habe mir einen neuen Container erstellt , mit einem vertikalen Menü und einem Text. Ziehe ich nun die Seite größer, wandert das vertikale Menü hinter das horizontale Menü.
    Jetzt werde ich bestimmt hören, lerne erst einmal alles :( Will ich ja.
    Aber ich lernen halt lieber, wenn ich es ausprobiere.
    Will auch niemanden die Zeit stehlen. Jeder fängt mal klein an.
    Wenn aber jemand ein Tip hat und sich nicht dran stört, das die Source noch formatiert werden muss, kann ich sie ja zu Verfügung stellen.
    Denke ein "alter" Hase findet den Fehler gleich.

    VG

    TommiH
     
    #10      
  11. hub

    hub nicht ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    1.116
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    PS,Lr. VS Code, NP++, ...
    Kameratyp:
    Sony a 6000
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    @Manfred: es geht hier um zwei kleine überschaubare Scripte, warum also mit Kanonen auf Spatzen schießen? Wenn ich über die Straße will, bestelle ich mir ja auch kein Taxi ...
    @TommyH: Wieso Zeit stehlen? Wenn jemand da ist, der dir helfen kann, wird er das sicher auch tun.

    Gruß Ulli
     
    #11      
  12. sensations

    sensations Noch nicht viel geschrieben

    Dabei seit:
    19.01.2013
    Beiträge:
    16
    Geschlecht:
    weiblich
    Ort:
    Elbflorenz
    Software:
    Gimp, Blender, Webdeveloper
    Script auslagern - was mach ich falsch
    AW: Script auslagern - was mach ich falsch

    In die externe JS schreibst Du (mit Beispielfunktion) : -----

    (function($){

    tile = function() {

    $("#Zelle2").css("background-color", "#ffff00");

    };

    })(jQuery);

    In deinen HTML-Kopf: (ready-Dokument-Funktion nie vergessen!)

    <script type="text/javascript" src="- dein dynapi-link"></script>
    <script type="text/javascript" src="- dein jquery-link"></script>
    <script type="text/javascript" src="- deine externe- js -link"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    tile()//Testfunktion



    });
    </script>
    Probiers mal....
     
    Zuletzt bearbeitet: 21.03.2013
    #12      
Seobility SEO Tool
x
×
×