• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

JQuery einbinden klappt nicht

F

F_E_L_I_X

New member
Hallo,

ich hätte eine Frage zu JQuery: Ich versuche es einzubinden und habe mich dabei an das Tutorium aus diesem Forum gehalten. Leider kann ich keine JQuery-Funktionen aufrufen. Mein Header sieht wie folgt aus:
HTML: 
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>CirqueParadies</title>
	
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="shortcut icon" type="image/png" href="data/fav.png">
	<link rel="icon" type="image/png" href="data/fav.png">
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="js.js"></script>
	<script type="text/javascript" src="scrollIt.min.js"></script>
	<script>$(function() { $.scrollIt(); });</script>
</head>

Ich probiere seit gestern herum, aber es will mir einfach nicht gelingen. Ich bin für jeden Tipp dankbar!

Viele Grüße
Felix
 
Hallo Felix,

wie ScrollIt.js unter der Rubrik Usage zu ennehmen, wird das so eingebunden

Code: 
<html>
<head>
<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
<script src="./scrollIt.js" type="text/javascript"></script>
<script>
$(function(){
  $.scrollIt();
});
</script>
</head>

für das aufrufen der Scripte und

HTML: 
<body>
<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

als Referere (Ziele, wo hin gescrollt wird) bzw.

HTML: 
<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>
</body>

als Links, die den Scroll auslösen.

Das heißt dein Body müsste etwa so aussehen:

HTML: 
<div class='nav-container'>
<nav><ul>
<li><a class='active' data-scroll-nav='0'>About</a></li>
<li><a data-scroll-nav='1'>Usage</a></li>
<li><a data-scroll-nav='2'>Options</a></li>
<li><a data-scroll-nav='3'>Credit</a></li>
</ul></nav>
</div>

was die Links enthält.
und
HTML: 
<section data-scroll-index='0'>
<div class='content'>
Inhalt Sektion 0 (Usage)
</div>
</section>

<section data-scroll-index='1'>
<div class='content'>
Inhalt Sektion 1 (About)
</div>
</section>

<section data-scroll-index='2'>
<div class='content'>
Inhalt Sektion 2 (Options)
</div>
</section>

<section data-scroll-index='3'>
<div class='content'>
Inhalt Sektion 3 (Credit)
<a data-scroll-goto='0'>Back to top</a>
</div>
</section>

hier ist der Link
Code: 
<a data-scroll-goto='0'>Back to top</a>
dafür zuständig, dich wieder nach oben zu bringen.
 
Zuletzt bearbeitet:
Hallo,

vielen Dank für die schnellen Antworten. Ja, die Fehlerkonsole habe ich verwendet. Die Dateipfade stimmen und die Dateien können geladen werden.
Auch wenn ich den Header so umstelle, wie folgt, funktioniert es nicht.
HTML: 
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>CirqueParadies</title>
	
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="shortcut icon" type="image/png" href="data/fav.png">
	<link rel="icon" type="image/png" href="data/fav.png">
	
	<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
	<script src="scrollIt.js" type="text/javascript"></script>
	<script>
		$(function(){
			$.scrollIt();
		});
	</script>

	<script type="text/javascript" src="js.js"></script>
</head>

Ich benötige JQuery jedoch nicht alleine für ScrollIt.js sondern auch zum ein- und ausblenden eines Frames:
Code: 
function showpopframe(b){
	if (b){
		//document.getElementById('popframe').style.visibility='visible';
		//alert("test");
		$('#popframe').fadeIn();
	} else {
		document.getElementById('popframe').style.visibility='hidden';
	}
}

Auch hier kann ich nicht auf die JQuery-Funktionen zugreifen.

===================================================================
EDIT:
Entschuldigt die Verwirrung. Es liegt wohl eher daran, dass visibility=hidden nicht kompatibel ist mit der fadeIn() und fadeOut() Funktion von JQuery.
Tatsächlich habe ich jetzt nur noch Probleme mit ScrollIt.js.

Schonmal danke für eure Denkanstöße!
 
Zuletzt bearbeitet:
Zeige doch bitte auch mal den Body-Teil deines Dokumentes.

Auch könnte die hier

<script type="text/javascript" src="js.js"></script>
Zum Vergrößern anklicken....

zu Problemen führen.
Da müssten wir mal den code dieser js.js sehen, oder beinhaltet die nur dies:

Code: 
function showpopframe(b){
	if (b){
		//document.getElementById('popframe').style.visibility='visible';
		//alert("test");
		$('#popframe').fadeIn();
	} else {
		document.getElementById('popframe').style.visibility='hidden';
	}
}
Zum Vergrößern anklicken....

?

Wenn ja, warum kommendierst du das Einblenden dann aus?
Code: 
//document.getElementById('popframe').style.visibility='visible';

Außerdem verwendest du doch eh JQuery, da könntest du sinnvoller auch so einblenden:

Code: 
$('#popframe').css('visibility','visible');

oder besser noch:

Code: 
$('#popframe').css('display','inline');
 
Zuletzt bearbeitet:
Was steht in der Konsole, wenn du z.B. ein console.log($('#popframe')); machst?
 
F_E_L_I_X schrieb:
Entschuldigt die Verwirrung. Es liegt wohl eher daran, dass visibility=hidden nicht kompatibel ist mit der fadeIn() und fadeOut() Funktion von JQuery.
Zum Vergrößern anklicken....

darum ja

Code: 
$('#popframe').css('display','inline');

oder da du ja mit Fade arbeiten willst

Code: 
$('#popframe').('display', 'inline').hide().fadeIn();

-------- UPDATE ------------

Code: 
$("#popframe").fadeIn().css("display","inline");

sollte wohl auch gehn (ungetestet)


Aber eigentlich reicht meiner Meinung nach
Code: 
$('#popframe').css('display','inline');
auch, um das Frame sichtbar zu machen.

Ansonsten, bitte gesamtes Dokument als Code posten.
 
Zuletzt bearbeitet:
Wow, danke für eure umfassende Hilfe!
Das war bereits das ganze "js.js". Mehr passiert da nicht.
Ich habe es jetzt alleine mit JQuery und diesem Code umgesetzt: Mit jQuery scrollen – gewusst wie und mit wenig Aufwand. ? Pixelbar GmbH Eupen - Webdesign - Digitale Medien - Webentwicklung
Es funktioniert gut so.

Das Problem mit der Sichtbarkeit habe ich wie folgt gelöst:
HTML: 
<script>
		$(function(){
			$('#popframe').fadeOut(1);
			document.getElementById('popframe').style.visibility='visible';
		});
	</script>
Gemeinsam mit voreingestellter visibility: hidden; im CSS.

Ich danke euch sehr für eure Bemühungen. Solltet ihr weiterhin Tipps für mich haben, freue ich mich.
 
F_E_L_I_X schrieb:
Solltet ihr weiterhin Tipps für mich haben, freue ich mich.
Zum Vergrößern anklicken....

Wie gesagt, da du bereits Jquery verwendest würde ich anstelle von
Code: 
 document.getElementById ('popframe').style.visibility='visible'

eher mit
Code: 
$('#popframe').css ('display','inline');

arbeiten oder mir eventuell sogar das ganze Frame via
Code: 
 $('#popfrane').html ( [code des franes] );
ins Dokument schreiben lassen.

Außerdem brauchst du das nicht in einer externen JS-Datei extra einbinden, sondern könntest das gleich oben, wo du ScrollIt initialisierst, einbauen.
 
Zuletzt bearbeitet:
rico2009 schrieb:
Dem Script-Tag fehlt m.M. das Attribut type="text/javascript"
Zum Vergrößern anklicken....
HTML < 5: stimmt, fehlt.
HTML5: passt so, wird nicht mehr benötigt.

dbarthel schrieb:
Code: 
<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
<script src="./scrollIt.js" type="text/javascript"></script>
<script>
$(function(){
  $.scrollIt();
});
</script>
Zum Vergrößern anklicken....
Ich sehe da keinen Unterschied zu
HTML: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="js.js"></script>
	<script type="text/javascript" src="scrollIt.min.js"></script>
	<script>$(function() { $.scrollIt(); });</script>
 
j-l-n schrieb:
Ich sehe da keinen Unterschied zu
[...]
Zum Vergrößern anklicken....

[Mit Augenzwinkern]
Dann kannst du deine Brille reklamieren. :) ;)
[/Augenzwinkern]



1. Versionsnummer von jquery ist eine andere (1.10.2 zu 1.10.1) (macht zwar technische sicher keinen Quantensprung, aber...)

2. Hatte ich die js.js ausgespart (testweise)
 
Zuletzt bearbeitet:
dbarthel schrieb:
1. Versionsnummer von jquery ist eine andere (1.10.2 zu 1.10.1) (macht zwar technische sicher keinen Quantensprung, aber...)

2. Hatte ich die js.js ausgespart (testweise)
Zum Vergrößern anklicken....
Ja, ist schon klar. :)
Macht aber eigentlich keinen Unterschied (außer in der js.js würde wieder Erwarten „$” überschrieben werden) - das meinte ich.
 
j-l-n schrieb:
HTML < 5: stimmt, fehlt.
HTML5: passt so, wird nicht mehr benötigt.
Zum Vergrößern anklicken....
Ok. Ich finde aber sowohl in HTML5 als in allen anderen HTML Versionen gehört das rein. Das grenzt den Inline JS-Teil wunderbar vom restlichen HTML ab und man sieht auf Anhib was es ist.
 
rico, das ist wohl Geschmackssache. Aber was sollte es im <script> Block sonst ausser Javascript sein, weshalb dieses Attribut jemals sinnvoll war?
 
j-l-n schrieb:
Es gab zwar mal JScript und dieses ganze Zeug
Zum Vergrößern anklicken....
Keine Ahnung, hab ich wohl ausgelassen. OK, wenn es mal was anderes gab ist es ja doch schon sinnvoll gewesen. Aber es ist auch gut, dass es nun mit HTML5 stirbt. Hätte man das Ganze von Anfang an <code> getauft, hätte man nicht die ganzen Ableger wie <applet>, <embed>, <bgsound> und Konsorten gebraucht. Dann hätte man nämlich alles was nicht HTML ist in ein Tag mit entsprechenden Attributen und <param> Ästen verpackt. Na ja, jeder hat halt so seine Logik.
 
mikdoe schrieb:
hätte man nicht die ganzen Ableger wie <applet>, <embed>, <bgsound> und Konsorten gebraucht.
Zum Vergrößern anklicken....

Ich denke, die werden auch heute noch eingesetzt.

Gibt es zu <applet> eigentlich ein Html5 Gegenstück? (Ich wüsste jetzt auf die schnelle nicht, wie ich ron java-applet in html5-syntax einbau?)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben