JavaScript JS in externe Dateien auslagern

knollo_dd · 20. August 2010

Hi, will bei meiner Homepage den Java-Script-Code auslagern. Habe auf der Seite 3 verschiedene Scripte laufen und es funktioniert solange ich den Code in der HTML-Datei lasse. Sobald ich es aber in ext. Dateien auslagern will, funktionieren nicht mehr alle Scripte.

HTML:

<script type="text/javascript">
            $(function() {
                /* position of the <li> that is currently shown */
                var current = 0;

                $('#bg1,#bg2,#bg3,#bg4,#bg5').mouseover(function(e){

                    var $this = $(this);
                    /* if we hover the current one, then don't do anything */
                    if($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3 or bg4 or bg5, depending where we are hovering */
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first <li> or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                     */
                    if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5'))
                        $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-480px 0)"},300,function(){
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(480px 0)"},300,function(){
                            $(this).find('li').hide();
                        });

                    if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5')){
                        /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({backgroundPosition:"(-702px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(1,item);
                    }
                    else {
                        /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({backgroundPosition:"(702px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(0,item);
                    }

                    /*THE FOLLOWING LOGIC, FROM THE ORIGINAL SCRIPT IS NO LONGER NEEDED*/

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                     */
/*
                    if(current == 2 && item == 'bg1'){
                        $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                    }
                    if(current == 0 && item == 'bg4'){
                        $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                    }
*/


                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                        $(this).find('li').fadeIn();
                    });
                });
                /*
                dir:1 - move left->right
                dir:0 - move right->left
                 */
                function move(dir,item){
                    if(dir){
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},400);
                        $('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},500);
                        $('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        });
                    }
                    else{
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg5 bg4 bg3 bg2 bg1').addClass(item);
                        });
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},400);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},300);
                        $('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},200);
                        $('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},100);
                    }
                }
            });
            $(function() {

            $("#tabelle").organicTabs();

            $("#tabelle").organicTabs({
                "speed": 200
            });

        });

        $(document).ready(function(){
            $('#slides1').bxSlider({
                prev_image: 'btn_arrow_left.jpg',
                next_image: 'btn_arrow_right.jpg',
                wrapper_class: 'slides1_wrap',
                margin: 70,
                auto: true,
                auto_controls: true
            });
        });
</script>

So habe ich es dann in externe Dateien aufgeteilt:

menu.js

<script language="JavaScript" type="text/javascript" src="menu.js"></script>

HTML:

$(function() {
                /* position of the <li> that is currently shown */
                var current = 0;

                $('#bg1,#bg2,#bg3,#bg4,#bg5').mouseover(function(e){

                    var $this = $(this);
                    /* if we hover the current one, then don't do anything */
                    if($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3 or bg4 or bg5, depending where we are hovering */
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first <li> or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                     */
                    if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5'))
                        $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-480px 0)"},300,function(){
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(480px 0)"},300,function(){
                            $(this).find('li').hide();
                        });

                    if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5')){
                        /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({backgroundPosition:"(-702px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(1,item);
                    }
                    else {
                        /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({backgroundPosition:"(702px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(0,item);
                    }

                    /*THE FOLLOWING LOGIC, FROM THE ORIGINAL SCRIPT IS NO LONGER NEEDED*/

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                     */
/*
                    if(current == 2 && item == 'bg1'){
                        $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                    }
                    if(current == 0 && item == 'bg4'){
                        $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                    }
*/


                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                        $(this).find('li').fadeIn();
                    });
                });
                /*
                dir:1 - move left->right
                dir:0 - move right->left
                 */
                function move(dir,item){
                    if(dir){
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},400);
                        $('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},500);
                        $('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
                        });
                    }
                    else{
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg5 bg4 bg3 bg2 bg1').addClass(item);
                        });
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},400);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},300);
                        $('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},200);
                        $('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},100);
                    }
                }
            });

tab.js

<script language="JavaScript" type="text/javascript" src="tab.js"></script>

HTML:

      $(function() {

            $("#tabelle").organicTabs();

            $("#tabelle").organicTabs({
                "speed": 200
            });

        });

slider.js

<script language="JavaScript" type="text/javascript" src="slider.js"></script>

HTML:

 $(document).ready(function(){
            $('#slides1').bxSlider({
                prev_image: 'btn_arrow_left.jpg',
                next_image: 'btn_arrow_right.jpg',
                wrapper_class: 'slides1_wrap',
                margin: 70,
                auto: true,
                auto_controls: true
            });
        });

Stecke leider nicht so tief in der Materie drin, und weiß nicht worin der Fehler liegt. Hoffe mir kann jemand dabei helfen.

Grüße

ManOki · 20. August 2010

hast du mal mit firebug oä durchgebuggt, ob die dateien überhaupt richtig gefunden/geladen werden?

auf den ersten blick alles ganz normal. auf den zweiten würde ich tippen, du hast noch weitere javascript-bibliotheken verwendet, die werden hoffentlich zuerst geladen.

schonmal probiert, einfach alles in eine .js datei zu werfen?

Fleshgrinder · 20. August 2010

Belasse den gesamten Code in einer Datei, birgt verschiedene Vorteile. Dein JavaScript ist jQuery-Code, also benötigst du auch die jQuery-Bibliothek. Diese muss im HTML-Dokument vor deiner Datei referenziert werden. Das dürfte auch der Grund sein, weshalb es funktioniert wenn du es im HTML-Dokument drinnen hast. Vielleicht hast du einen Link zum HTML-Dokument oder kannst das gesamte HTML einmal hier posten.

moquai · 20. August 2010

Hallo,

wo hast Du den Code untergebracht?

- Unter Head die externe JavaScript-Datei?
- Im Body die Funktion?

Stimmen die Pfade?

src=script.js
src=../script.js
src=verzeichnis/script.js

Die Anführungszeichen und der Rest sind mit Absicht nicht vorhanden.

knollo_dd · 20. August 2010

Danke Fleshgrinder, es war nur die Reihenfolge. Ich wusste nicht das zu erst die jQuery-Bibo. geladen werden muss. Jetzt funktionieren auch die Scripte einzeln ausgelagert.

Danke für die Hilfe

Fleshgrinder · 20. August 2010

Die Reihenfolge ist immer entscheidend. jQuery ist ja nichts anderes als JavaScript, nur dass eben Funktionen, Selektoren, uvm. umgeschrieben wurden. Um also von der vereinfachten jQuery-Syntax Gebrauch zu machen, muss die Bibliothek vor den eigentlichen Skripten geladen werden.

Ich empfehle dir trotzdem das auslagern in eine Datei und die Minimierung vom JS. Warum? Ganz einfach, Performance. Durch das verwenden einer JavaScript-Datei mindern sich die HTTP-Anfragen und durch das minimieren vom JavaScript-Code kann der Code vom Webbrowser schneller geparst und ausgeführt werden.

Folgende Dinge möchte ich dir in diesem Zusammenhang empfehlen:

JSLint, The JavaScript Code Quality Tool, eine Art Validator für JavaScript, allerdings sollte nicht blind allen Anweisungen gefolgt werden.
YSlow Add-on für Firefox, für Performance-Tipps (gibt auch noch das Page-Speed Add-on von Google, YSlow ist aber einfacher).

knollo_dd · 20. August 2010

Fleshgrinder schrieb:
Die Reihenfolge ist immer entscheidend. jQuery ist ja nichts anderes als JavaScript, nur dass eben Funktionen, Selektoren, uvm. umgeschrieben wurden. Um also von der vereinfachten jQuery-Syntax Gebrauch zu machen, muss die Bibliothek vor den eigentlichen Skripten geladen werden.

Ich empfehle dir trotzdem das auslagern in eine Datei und die Minimierung vom JS. Warum? Ganz einfach, Performance. Durch das verwenden einer JavaScript-Datei mindern sich die HTTP-Anfragen und durch das minimieren vom JavaScript-Code kann der Code vom Webbrowser schneller geparst und ausgeführt werden.

Folgende Dinge möchte ich dir in diesem Zusammenhang empfehlen:

JSLint, The JavaScript Code Quality Tool, eine Art Validator für JavaScript, allerdings sollte nicht blind allen Anweisungen gefolgt werden.

YSlow Add-on für Firefox, für Performance-Tipps (gibt auch noch das Page-Speed Add-on von Google, YSlow ist aber einfacher).

Danke das werde ich mal durchgehen.

Suche

JavaScript JS in externe Dateien auslagern

knollo_dd

Cadet 3rd Year

ManOki

Lt. Commander

Fleshgrinder

Lt. Junior Grade

moquai

Banned

knollo_dd

Cadet 3rd Year

Fleshgrinder

Lt. Junior Grade

knollo_dd

Cadet 3rd Year

Ähnliche Themen