Antworten auf deine Fragen:
Neues Thema erstellen

Script auslagern - was mach ich falsch

T

TommiH

Nicht mehr ganz neu hier

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: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
        </script>
habe nun wie folgt ausgelagert
eine main.js erstellt und im gleichen Verzeichnis wie html abgelegt
Inhalt:
Code: 
<!-- The JavaScript -->


            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
und im
HTML: 
<head>
 .......
       <script language="JavaScript" type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
Bestimmt ein Anfängerfehler.

Sorry

Danke und Grüße

tommih
 

cebito

cebito

undefined

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...
 
hub

hub

nicht ganz neu hier

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
 
jaderbass

jaderbass

Noch nicht viel geschrieben

Kreativ-Flatrate-User
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: 
<script language="JavaScript" type="text/javascript" src="js/main.js"></script>
Richtig:
HTML: 
<script language="JavaScript" type="text/javascript" src="main.js"></script>
Gruß
Jörg
 
T

TommiH

Nicht mehr ganz neu hier

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
 
hub

hub

nicht ganz neu hier

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
 
M

manfred_hst

Nicht mehr ganz neu hier

AW: Script auslagern - was mach ich falsch

@hub
was erschließt sich nicht?
in meinem link ist alles genau beschrieben.
gruß
Manfred
 
T

TommiH

Nicht mehr ganz neu hier

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
 
hub

hub

nicht ganz neu hier

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
 
S

sensations

Guest

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 von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 52 (Mitglieder: 1, Gäste: 51)
Robots: 881

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben