JavaScript Aculo.us + JQuery

ClocxHD · 17. Juni 2015

Hallo,

ich versuche, Aculo.us + jQuery gleichzeitig zu verwenden.
Da es nicht funktioniert hat, bin ich auf JQuery no conflict gestoßen.
Jedoch funktioniert jQuery jetzt nicht mehr.
Mein Code:

HTML:

<!DOCTYPE html>
<html lang="de" ng-app>
	<head>
		<meta charset="utf-8" />
		<title>Modpack</title>
		<link rel="stylesheet" type="text/css" href="style/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<script src="scripts/nova-mono.js"></script>
		<script src="scripts/jquery.min.js"></script>
		<script>
			var $j = jQuery.noConflict();
		</script>		
		<script src="scripts/prototype.js" type="text/javascript"></script>
		<script src="scripts/scriptaculous.js" type="text/javascript"></script>			
		<script src="scripts/bootstrap.min.js"></script>
		<script src="scripts/script.js"></script>							
	</head>
	
	<body>

		<button onclick="$(this).switchOff()">Aculous Button (funktioniert)</button>
	
		<div class="container jumb">
			<h1 class="start">Modpack | Startseite</h1>
			<center><a class="anleitung"><img src="data/button.png"></a></center>
			<ul class="kontakt" align="center">
				<li><a href="mailto:modpack@clocxhd.de"><img src="data/mail.png"></a></li>
				<li><a href="ts3server://clocxhd.de"><img src="data/teamspeak.png"></a></li>
			</ul>			
		</div>

<div id="drag_demo_1" style="width:100px; height:100px; background:#7baaed; border:1px solid #333;">Ich funktioniere ebenfalls</div>
  <script type="text/javascript">
    new Draggable('drag_demo_1');
  </script>								
	</body>
</html>

Die Seite:
http://modpack.clocxhd.de/index.php

LG,
ClocxHD

NullPointer · 17. Juni 2015

Was funktioniert jetzt nicht? Ich hab auf der Konsole spaßeshalber mal ausgeführt:

Code:

$j('.container').hide()

und schon war er weg - also scheint jQuery durchaus zu gehen.

ClocxHD · 17. Juni 2015

z.B. der Button "Anleitung"

NullPointer · 17. Juni 2015

Wenn ich den Teil aus der script.js, der den Anleitung-Button aktiviert, auf der Konsole ausführe, dann funktioniert danach auch der Button.

Versuch doch mal, diesen Teil in die $j(document).ready(function() {}) mit hineinzuziehen. Vielleicht führt der Browser das ja aus, bevor das DOM fertig aufgebaut ist, und es kann dann das a.anleitung-Element nicht finden.

funkmasterflow · 17. Juni 2015

Das was NullPointer sagt.
Der Code wird ausgeführt, bevor der Button gerendert wird.
Wenn es geht JavaScript immer so spät wie möglich ausführen.

r15ch13 · 17. Juni 2015

Ich wuerde .on() fuer die "click"-Events nutzen. Dann braucht das nicht alles in die $j(document).ready() zu schreiben.

Code:

$j(".container").on("click", ".anleitung", function() {
    location.href = "index.php#anleitung"
    $j(".jumb").load("includes/anleitung.php");
});

Edit: jep, alle JavaScript Dateien kurz vor </body> laden.

ClocxHD · 17. Juni 2015

Funktioniert, danke

Suche

JavaScript Aculo.us + JQuery

ClocxHD

Lt. Junior Grade

NullPointer

Lt. Commander

ClocxHD

Lt. Junior Grade

NullPointer

Lt. Commander

funkmasterflow

Ensign

r15ch13

Lieutenant

ClocxHD

Lt. Junior Grade

Ähnliche Themen