LinkBack URL
About LinkBacks
ZitierenTeste mal ob das Deine Probleme behebt.
Mehrere Javascript Anwendungen
Ich habe folgendes Problem,
ich möchte auf meiner Website Bilder mit Lightbox einbinden und habe ein Navigationsmenü mit javascript, wenn ich aber beide Codes in meine HTML Website einfüge funktioniert immer nur eines, also entweder Lightbox oder das Menü...
Der Html Code sieht so aus:
<head>
<!--lightbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!--lightbox-->
<!--Navigation-->
<link rel="stylesheet" type="text/css" media="screen" href="css/all-examples.css">
<noscript>
<style type="text/css">
#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }
</style>
</noscript>
<script src="js/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/stack-1.js"></script>
<script type="text/javascript" src="js/stack-other.js"></script>
<!--ende Navigation-->
</head>
<body>
</body>
</html>
Kann mir jemand sagen wie beides funktioniert, ich hab schon im Internet gesucht, aber ich versteh da überall nur Bahnhof...
Teste mal ob das Deine Probleme behebt.
Hallo Gemeinde
Ich hoffe es kann mir da jemand helfen.
Ich habe auch eine Page welche mit JS animiert ist. Menu und ganzer Seitenaufbau.
Jetzt möchte ich noch einen slider mit jQuery einbauen.
Egal wo ich die Scripts im Head bereich einbaue, läuft der slider aber die Page hängt sich auf, oder die Page läuft, aber der slider animiert nicht.
Komme da irgendwie nicht weiter....
Das sieht bei mir so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<title>page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Oswald_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script type="text/javascript" src="js/content_switch.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/cScroll.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->
</head>
Für Eure Hilfe bedanke ich mich jetzt schon.
Dodu
Du bindest 2mal jQuery ein:
1mal sollte reichen<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
...
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
Wo kämen wir denn hin, wenn wir keine Träume mehr hätten? ™
Medienagentur shark-design :: Internet, Druck & Kommunikation für Braunschweig und Hamburg
Wo kämen wir denn hin, wenn wir in Besprechungen keinen Spaß mehr hätten?
Projektmanagement für IT und Medien in Hamburg
Hallo,
ich habe dieses problem auch, und oben genante lösung getestet, da es bei mir nicht funktioniert gehe ich davon aus dass ich was falsch mache, vieleicht kann mir einer von euch sagen was?
mein fraglicher code:
<head>
<script type='text/javascript' src='PrototypeFishEye/includes/prototype.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/effects.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/EventDispatcher.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/FishEye.js'></script>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/s3Slider.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 2000
});
});
</script>
</head>
<div>
<script type="text/javascript">
var PrototypeFishEye = function(e){
var ele = Event.element(e);
window.location = ele.getAttribute("href");
}
var PrototypeFishEyelinkRelay = new FishEyeToolBar("PrototypeFishEye");
PrototypeFishEye.addEventListener("itemClick", PrototypeFishEyelinkRelay);
</script>
</div>
so und mein Problem ist es funktioniert immer nur der im <head> bereich unten stehende script, also in diesem fall der:
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/s3Slider.js'></script>
oben genante lösung:
dummerweise sprechen sowohl jQuery, als auch Prototype die internen Funktionen und Selektoren mit Hilfe des Shortcuts “$” an und genau da liegt dann auch das grundlegende Problem der parallelen Einsatzweise.
Um diese unerwünschten Namenskollisionen zu vermeiden, wäre es also notwendig, dass einer der beiden Libraries den internen Shortcut z.B. auf “jQuery” oder “Pro” etc. ändert und da die Entwickler des jQuery-Frameworks hier bereits mitgedacht haben, wird diese Änderung automatisch durch die interne Methode .noConflict() realisiert.
Damit das Ganze aber auch fehlerfrei funktioniert, müsst Ihr zwingend darauf achten, die Prototype – Bibliothek vor der jQuery Bibliothek zu laden, denn ansonsten erzielt Ihr durch den Einsatz von jQuery.noConflict() keinerlei Wirkung.
Der folgende Beispielcode verdeutlicht nochmals die korrekte Anwendung der Methode:
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
// Benutze jQuery über jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Benutze Prototype über $(...), etc.
$('someid').hide();
//]]>
</script>
</head>
heißt für mich meinen code so zu schreiben:
<head>
<script type='text/javascript' src='PrototypeFishEye/includes/effects.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/EventDispatcher.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/FishEye.js'></script>
<script type='text/javascript' src='js/s3Slider.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/prototype.js'></script>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
// Benutze jQuery über jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Benutze Prototype über $(...), etc.
$('someid').hide();
//]]>
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 2000
});
});
</script>
</head>
<div>
<script type="text/javascript">
var PrototypeFishEye = function(e){
var ele = Event.element(e);
window.location = ele.getAttribute("href");
}
var PrototypeFishEyelinkRelay = new FishEyeToolBar("PrototypeFishEye");
PrototypeFishEye.addEventListener("itemClick", PrototypeFishEyelinkRelay);
</script>
</div>
wenn ich das aber mache, ist nach activierung javascripte im browser mein fenster schwarz, was vieleicht daran liegt, dass schwarz meine background color ist, jedoch werden semtliche backgound images (zb.logo=kein java) auch ausgeblendet, doch kann das doch nicht sinn und zweck des noConflicts sein! also was mache ich falsch?
folgende möglichkeit habe ich auch mit dem selben ergebnis getestet:
<head>
<script type='text/javascript' src='PrototypeFishEye/includes/prototype.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/effects.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/EventDispatcher.js'></script>
<script type='text/javascript' src='PrototypeFishEye/includes/FishEye.js'></script>
<script type='text/javascript' src='js/s3Slider.js'></script>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
// Benutze jQuery über jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Benutze Prototype über $(...), etc.
$('someid').hide();
//]]>
</script>
Danke schonmal.
Geändert von Magnetic (16.05.2012 um 13:29 Uhr)
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)