Jquery clash because of -jquery-1.10.2.min.js - javascript

My Menu does not seem to function properly on photogallery page :-http://www.vancha.in/Photogallery.aspx
However its seems to function on the home page.
If I remove jquery-1.10.2.min.js file on photogallery page ,then it functions properly.
I'm using lightbox script.
There is some clash that's happening.
Please Help !
Regards,
Vancha
I have tried something like this since now I'm using pretty Photo:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $jq161 = jQuery.noConflict();
</script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();});
</script>
Its still not working :(

try something like this,Use the library you required
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script type="text/javascript">
var jq_4 = jQuery.noConflict();
jq_4(function () {
jq_4('#gallery a').lightBox({ fixedNavigation: true });
})
</script>
http://interface88.blogspot.in/2012/07/using-multiple-version-of-jquery-on.html
http://api.jquery.com/jQuery.noConflict/

I can see that Jquery is referenced multiple times on this URL
http://www.vancha.in/Photogallery.aspx
You may need to fix that.

Related

Javascript, jquery error TypeError: $(...).autocomplete is not a function

I have looked around at questions similar to the above and none of them have helped.
Here are my scripts
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="network.json"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<link type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<body>
<link href="ajs_network1.css" rel="stylesheet" type="text/css" />
<script src="ajs_network1.js" type="text/javascript"></script>
</body>
Here is the function trying to call JQuery
$(function () {
$("#search").autocomplete({
source: optArray
});
});
For some reason its bringing up the error
TypeError: $(...).autocomplete is not a function.
I am guessing ive done something wrong with the scripts ?
by just adding this link reference my issue was resolved
<script async src="//code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
Try adding those links into your code as you are missing those
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
The links were correct i was using. But because i was retrieving links online i didnt put in http at the beginning. So the links would now be :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>‌​
Also, there were hidden characters for some reason when i copied the link over so the link wasnt working. When working with this make sure your browser is retrieving the links. FireBug help me with this. Click 'net' and it will tell you what scripts the browser is importing.
Thankyou to all that helped :)

Uncaught TypeError: undefined is not a function

I have checked a lot of forums, but i did't find a solution.
site -> http://dszerszen.pl/domi/
and this code
<script type="text/javascript">
$(document).ready(function(){
$(".info").tytabs({
tabinit:"1",
fadespeed:"fast"
});
});
</script>
icon switcher dosent work
Simply rearrange your scripts in this order:
<script type="text/javascript" src="jquery.min.js"></script>
<script src="modernizr.custom.63321.js"></script>
<script type="text/javascript" src="tytabs.jquery.min.js"></script>
<script src="scrolltop.js" type="text/javascript"></script>
<script async src="analytics.js"></script>
The jQuery core library should be included first followed by the other plugin code.
You have defined scrollTop.js in two places.
One is at the top of css files. And jquery is not loaded before that. That's why you are getting error.
<title>Smykke Galleriet</title>
<link type="text/css" rel="stylesheet" href="stylesheet.1.css" />
<script src="scrolltop.js" type="text/javascript"></script>
Remove that line and it will work properly.

Javascript html header strange behaviour

Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

carouFredSel in conjunction with pretty Photo

I am trying to place Pretty photo into CarouFredSel but I am having problems with what I think is conflicting jquery. Everything is working ok, but when I implement Pretty photo in the caraouFredSel collapses looking as if each li has no width or height.
I have very basic knowledge of javascript and I am currently trying to resolve the problem but would really appreciate it if I could get a hand as the deadline is closing in.
Here is the page, http://www.grahamwilsdon.com/stoves/grants.html
Also here are the scripts I am using also inline with the Libraries that are downloaded
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.6.4-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
auto: false
});
});
</script>
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/pretty_photo/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

Mootools is not defined

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.

Categories