I am fairly new to web developing, but I believe I have a conflict with my jQuery / javascripts (am not entirely sure which one). My site has a drop-down menu and an image selector. When both scripts are in there together they will not work. Whichever one comes first, is overide by the latter. I believe the 2 scripts that are actually causing the problem are "js/jquery-1.js" and "js/global-perf-minified.js" but here are all the scripts being used within my page:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<script src="js/jquery_007.js" type="text/javascript"></script>
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
I saw some posts about adding a '.noconflict()' style but didn't seem to have much luck. I am willing to accept that I could just be inserting it wrong / picking up the wrong code for this. Any help is greatly appreciated! Thank you.
Possible duplicates:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
Declaring jquery many times....better check those and see if they are duplicates ;)
-----------------EDIT---------------------------
Now your code should looks like, with just one jquery:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
If you keep with problems then try putting just, two or three js, like this:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
If works with this two, then adding the others until you find the one that is creating bugs or problems(conflicts) with the rest of your js ;)
Saludos.
Related
So i added SSL with cloudfare to my site but all the JS no longer works. I have set all links in the source code to https but that didnt work.
The server is running apache2 on debian 7
I get this error however, maybe someone will understand it?
Error Pic 1,
Error Pic 2
<script type="text/javascript" src="/template/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/template/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/template/js/socket.io-1.4.5.js"></script>
<script type="text/javascript" src="/template/js/jcanvas.min.js"></script>
<script type="text/javascript" src="/template/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/template/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/template/js/bootbox.min.js"></script>
<script type="text/javascript" src="/template/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="/template/js/tinysort.js"></script>
<script type="text/javascript" src="/template/js/expanding.js"></script>
<script type="text/javascript" src="/template/js/notify.js"></script>
<script type="text/javascript" src="/template/js/plot.js?v=<?=time()?>"></script>
<script type="text/javascript" type="text/javascript" src="/template/js/graph.js?v=<?=time()?>"></script>
<script type="text/javascript" src="/template/js/settings.js"></script>
<script type="text/javascript" src="/template/js/app.js?v=<?=time()?>"></script>
If you can provide littel more detail. Path of one of your JS(not loading) may be.
I'm developing project with AngulaJS , Flask , Apache2.
My index page can't find css styles,jsscripts ,images and other sources.
That is from my head tag in HTML:
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"
type="text/javascript"></script>
<script src="/js/app.js"></script>
<script src="/js/services.js"></script>
<script src="/js/script.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="text/javascript" src="/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
What's going on? I'm noobie in development. So don't be mad.
Thanks for you attention!
I am working in a JQuery Mobile App and Phonegap.
I declare a File1.js file in the header, as the last file in the header.
So, I have a little function within the js file:
$('#SendMailButton').bind('tap',function(e){
alert("Hello");
});
When the user press the button, everything works ok.
Latter, I move this function from the File1.js file to a new File2.js file
and I declare File2.js below the File1.js as following:
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
But it doesn't works.
The complete header is as:
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
What am I wrong?
You are loading two jquery.mobile, also you are loading jquery after load jquery mobile, try with this head:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};(function(){var a={language:"en-US",languages:{"en-US":{}},cascades:["en-US"]};
-->mootools is not defined in firebug.
I am making a contact Us formchecker.
<script language="javascript" type="text/javascript" src="js/mootools/mootols-1.js"> </script>
<script language="javascript" type="text/javascript" src="js/mootools/mootools-1.2.4-core-yc.js"></script>
<script language="javascript" type="text/javascript" src="js/formcheck/lang/en.js"> </script>
<script language="javascript" type="text/javascript" src="js/formcheck/formcheck.js"> </script>
<link rel="stylesheet" href="js/formcheck/theme/blue/formcheck.css" type="text/css" media="screen" />
<script type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('myform');
});
</head>
Try fixing the spelling of "mootols" in the first line.
If this is your mootools core:
js/mootools/mootools-1.2.4-core-yc.js
Then what is this?
js/mootools/mootools-1.js
Could it be mootools more? You need to load the core first.
MooTools-More code depends on MooTools-Core code to be loaded first.
Make sure that MooTools-Core is loaded before MooTools-More.
I have the following code in the header of a website that I'm working on but they both seem to be in conflict with each other.
<link href="tq.css" rel="stylesheet" type="text/css" media="screen" />
<script src="framework/mootools.js" type="text/javascript"></script>
<script src="slideshow/js/slideshow.js" type="text/javascript"></script>
<script src="slideshow/js/slideshow.kenburns.js" type="text/javascript"></script>
<link href="slideshow/css/slideshow.css" rel="stylesheet" type="text/css" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
The Sideshow stops working whenever I add the lines below while the lightbox works. How can I fix it?
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Use jQuery noConflict. Information about which can be found at: http://docs.jquery.com/Using_jQuery_with_Other_Libraries