I'm using this basic template with a slider in the home but when I add a simple fancybox script for a single image, the fancybox doesn't work.
What of these js is overlapping fancybox?
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mp-slider').cycle({
pager: '#mp-pags',
timeout:7000,
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(index, slide) {
var titles = []
titles[0] = $("#mp-pags-cont li:eq(0)").text()
titles[1] = $("#mp-pags-cont li:eq(1)").text()
titles[2] = $("#mp-pags-cont li:eq(2)").text()
return '<li>'+(titles[index])+'</li>';
};
$(document).ready(function() {
$(".fancybox").fancybox();
});
});
</script>
Best way to find out with something like this is to comment out one script at a time until you find the one causing the issue. Then you can look more closely at that script and figure out where the conflict is.
pagerAnchorBuilder: pagerFactory
may be problematic. don't you want to call:
pagerAnchorBuilder: pagerFactory(a,b)
with parameters?
Related
I'm making a credit card info forms for a webpage and the scripts I found online only work with Safari to make the style I want.
This is what I copied and pasted into the head of my html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Start BounceX tag. Deploy at the beginning of document head. -->
<script>
(function(d) {
var e = d.createElement('script');
e.src = d.location.protocol + '//bounceexchange.com/tag/426/i.js';
e.async = true;
d.getElementsByTagName("head")[0].appendChild(e);
}(document));
</script>
<!-- End BounceX Tag-->
<!--Optimizely -->
<script src="//cdn.optimizely.com/js/191337197.js"></script>
<!-- ClickTale Top part -->
<script type='text/javascript'>
document.write(unescape("%3Cscript%20src='" +
(document.location.protocol == 'https:' ?
'https://clicktalecdn.sslcs.cdngc.net/' :
'http://cdn.clicktale.net/') +
"www11/phc/e9344b9e-32db-42a2-989b-468e39690d0a.js'%20type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- ClickTale end of Top part -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
http://jsfiddle.net/gxyhkd3j/
Here is how it looks in Safari vs Chrome.
What I want, in Safari: http ://imgur.com/dOl03G1
What I am getting in Chrome: http ://imgur.com/nYwAcMO
You should only be placing this in your header. Only one jquery, one jquery mobile, and one jquery mobile css. You used duplicates and there will be conflict problems.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
jQuery(document).ready(function () {
//alert("HIQ");
$('.mySelectCalendar').datepicker({ firstDay: 1, dateFormat: "dd.mm.yy" });
$.validator.addMethod(
'date',
function (value, element, params) {
if (this.optional(element)) {
return true;
};
var result = false;
try {
$.datepicker.parseDate('dd.mm.yy', value);
result = true;
} catch (err) {
result = false;
}
return result;
},
''
);
});
I get error as "Uncaught TypeError: Cannot read property 'addMethod' of undefined"
_layout as this
#ViewBag.Title
<!-- jQuery -->
<script src="~/App_Themes/ThemeBlue/assets/js/jquery203.js"></script>
<script src="~/App_Themes/ThemeBlue/assets/js/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_2_0_3 = $.noConflict(true);
</script>
<!-- Picker UI-->
<script src="~/App_Themes/ThemeBlue/assets/js/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--Validation -->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<link href="~/App_Themes/ThemeBlue/css/validation.css" rel="stylesheet" />
<script type="text/javascript">
var jQuery_1_7_0 = $.noConflict(true);
</script>
<!-- Bootstrap -->
<link href="~/App_Themes/ThemeBlue/dist/css/bootstrap.css" rel="stylesheet" media="screen" />
<link href="~/App_Themes/ThemeBlue/assets/css/custom.css" rel="stylesheet" media="screen" />
<!-- bin/jquery.slider.min.js -->
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jshashtable-2.1_src.js"></script>
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.numberformatter-1.2.3.js"></script>
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/tmpl.js"></script>
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.dependClass-0.1.js"></script>
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/draggable-0.1.js"></script>
<script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.slider.js"></script>
<!-- Javascript -->
<script src="~/App_Themes/ThemeBlue/assets/js/initialize-loginpage.js"></script>
<script src="~/App_Themes/ThemeBlue/assets/js/jquery.easing.js"></script>
<script src="~/App_Themes/ThemeBlue/assets/js/customTravel.js"></script>
<!-- Load Animo -->
<script src="~/App_Themes/ThemeBlue/plugins/animo/animo.js"></script>
<script src="~/App_Themes/ThemeBlue/dist/js/bootstrap.min.js"></script>
<!-- Carousel -->
<link href="~/App_Themes/ThemeBlue/examples/carousel/carousel.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,400,300,300italic' rel='stylesheet' type='text/css'>
<!-- Font-Awesome -->
<link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/assets/css/font-awesome.css" media="screen" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/assets/css/font-awesome-ie7.css" media="screen" /><![endif]-->
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/rs-plugin/css/settings2.css" media="screen" />
<!-- Picker UI-->
<link rel="stylesheet" href="~/App_Themes/ThemeBlue/assets/css/jquery-ui.css" />
<!-- bin/jquery.slider.min.css -->
<link rel="stylesheet" href="~/App_Themes/ThemeBlue/plugins/jslider/css/jslider.css" type="text/css">
<link rel="stylesheet" href="~/App_Themes/ThemeBlue/plugins/jslider/css/jslider.round.css" type="text/css">
<!-- Animo css-->
<link href="~/App_Themes/ThemeBlue/plugins/animo/animate_animo.css" rel="stylesheet" media="screen">
<!-- end -->
I write web application in MVC and could not solve this problem.
COuld you help me?
Your error:
Uncaught TypeError: Cannot read property 'addMethod' of undefined
It simply means that JavaScript cannot find the addMethod method, which is built into the jQuery Validate plugin. jQuery or jQuery Validate was not included properly... the file(s) cannot be found or jQuery is broken...
Your head section is a mess with multiple versions of jQuery and .noConflict() applied inconsistently.
Notice how you've define .noConflict() just after this particular version of jQuery is included?
<!--Validation -->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
....
<script type="text/javascript">
var jQuery_1_7_0 = $.noConflict(true); // <- this
</script>
So for the validation section, the name jQuery_1_7_0 must replace every instance $ just within your validation code.
jQuery_1_7_0(document).ready(function () {
jQuery_1_7_0.validator.addMethod( ....
I've only pointed out one example. You've also included a version of jQuery without .noConflict() just above your validation section.
These multiple versions of jQuery need to be resolved, either by removing the duplicates and leaving one version or by properly using .noConflict() after each version is included.
IMO, it's best to only use one version of jQuery.
Documentation: Using jQuery .noConflict()
Add jquery.validate.js file and jquery.min.js if you have not included and then write your code of js for add 'addMethod' method.
for me it was fixed when i put $.validator.addMethod method out of $(document).ready(function(){ !
and there was no need to use noConflict() method...
if you use Webpack(or Laravel mix like me) check the order of compiled js which sometimes it put validator before jquery and that causes this error
Please, I need some help with this.
This is the code piece that is failing
<!-- Begin Photofolio library -->
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="scripts/jquery-coin-slider.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#portfolioslider').coinslider({
width: 480,
height: 280,
navigation: false,
links: false,
hoverPause: true
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<!-- End Photofolio -->
<!-- Begin REDX -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
And when I load the page, it shows me this error:
TypeError: $(...).coinslider is not a function
I have tried to use "jQuery" identifier, but it didn't work. I don't know if I did ir right, since I just replaced all "$" with "jQuery" and didn't do more than that.
What is wrong in my code?
Regards
When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict api.jquery.com/jQuery.noConflict/
I would suggest to check your src="scripts/jquery-coin-slider.min.js" to check what function makes it work. Maybe .coinslider is not inside that js file.
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
});
});
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a. lightbox').lightBox();
});
</script>
</script>
The problem: When i use the code in separate files files, it works just fine, but when i add the lightbox to the carousel script or vice versa. Both of them stop working.
I just started using jQuery and plugins. Ran into a problem and i don't quite know how to fix it, or whats wrong. I want to have a carousel and a lightbox in my website, but whenever i add the script, it goes, it stops working.
Got the source files for the lightbox from http://leandrovieira.com/projects/jquery/lightbox/ and the jquery library from the jquery website. for both the carousel and the lightbox.
Reply will be much appreciated.
Now the lightbox only works but not the carousel
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
// choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<script type="text/javascript" src="js/jquery.js"></script><script
type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
My understanding is that to use the plugin I need to insert this code into the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
I did that and then I put the form in the html:
self.response.out.write("""
API Reference: <input id="example" /> (try "C" or "E") """)
but nothing is happenning. What am I missing?
I'd recommend using the newer jQueryUI Autocomplete via the Google CDN.
To include it in your application, use something like this
<!-- in your <head> section -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
The smoothness string in the URL refers to the jQueryUI theme. You can change this to whatever you want. See http://jqueryui.com/themeroller/#themeGallery
<!-- just before the closing </body> tag -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var data = [
"Core",
"Selectors",
"Attributes",
"Traversing",
"Manipulation",
"CSS",
"Events",
"Effects",
"Ajax",
"Utilities"
];
$("#example").autocomplete({
source: data
});
});
</script>
The 1 references in these URLs refer to the version number. Just using 1 means use the latest version from the 1 branch