I have problem with 2 sliders on one page, because first use jQuery 1.9.1 and second 1.5.1, I found how to fix this problem, but it doesn't want to work.
I do it right that:
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script>
$(document).ready(function(){
console.log($().jquery); // This prints v1.5.1
console.log($j().jquery); // This prints v1.9.1
});
</script>
<script src="js/jquery.slides.min.js" type="text/javascript"></script>
<script type="text/javascript">
$j(function() {
$j('#slides').slidesjs({
width: 950,
height: 364,
navigation: {
effect: "fade",
active: false
},
pagination: {
active: false,
effect: "fade"
},
effect: {
fade: {
speed: 1500
}
},
play: {
effect: "fade",
auto: true,
pauseOnHover: true
}
});
});
</script>
<link type="text/css" href="jquery/css/blitzer/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<div id="main">
<script type="text/javascript">
$(function() {
$( "#dateFrom" ).datepicker({ dateFormat: 'dd.mm.yy',minDate: +0, maxDate: '+8M +10D',monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],dayNamesMin: [ 'Nd','Po', 'Wt', 'Śr', 'Cz', 'Pt', 'So']});
});
$(function() {
$( "#dateToo" ).datepicker({ dateFormat: 'dd.mm.yy',minDate: +1, maxDate: '+8M +10D',monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],dayNamesMin: [ 'Nd','Po', 'Wt', 'Śr', 'Cz', 'Pt', 'So']});
});
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Anyone knows why it doesn't work?
When I tried alert with version of jQuery it shows property, but when I use it in sliders, it doesn't
Use <script>jQuery.noConflict();</script> above one of your jquery and replace the $ with jQuery
Like
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script>jQuery.noConflict();</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> //Now replace this jquery's $ with jQuery
Related
I am getting below error...
Uncaught TypeError: $(...).datepicker is not a function
Here is my Code:-
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
function date_chng(id) {
$('#' + id).datepicker({
dateFormat: 'dd/mm/yy',
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == id) {
var dateMin = $('#' + id).datepicker("getDate");
}
}
});
}
</script>
<input required type="text" id="ifs_dd_1" onMouseOver="date_chng(this.id);" name="ifs_dd1"/>
You load Jquery-ui before Jquery itself like this
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
You get error in the ui file because it is hasn't loaded Jquery yet. Simply switch it up:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Working example with your code, you don't load Jquery correctly.
http://jsfiddle.net/Lopj0y93/
I check all my included popup files...& fix it...It's because of including two times Jquery mins files.
http://www.codeproject.com/Questions/512301/jQueryplusdatepickerplusissue-aplusUncaughtplusTy
jQuery datepicker() Uncaught TypeError: undefined is not a function
I am working on a responsive layout using javascript, responsive-menu and javascript, responsiveslides.
When I have only one javacript at a time on the page, they work fine, but together the responsive-menu doesn't work. If I put the javascript for the responsive-menu at the bottom of the page, the menu works fine but the slide show doesn't work. Any suggestions would be appreciated.
Here is my javascript call out:
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="menu_files/responsive-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="menu_files/jquery.responsive-menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#JQResponsiveMenu1").fdResponsiveMenu({windowMinWidth:1000,autoHighlightCurrentPage:false,subMenuOpenOnClick:false,subMenuTransitionEasing:"easeOutSine",subMenuTransitionDuration:300});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="responsiveslides.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript"> // You can also use "$(window).load(function() {"
jQuery(window).load(function() {
// Slideshow 1
jQuery("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
jQuery("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
jQuery("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
jQuery("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
jQuery('.events').append("<li>before event fired.</li>");
},
after: function () {
jQuery('.events').append("<li>after event fired.</li>");
}
});
});
</script>
It's not advisable to load more than one version of jQuery on a site. I'd remove v1.8 and see how that does. If it fails, remove 1.10 instead. Some changes in 1.10 might break your plugins.
When I incorporate the Scrollorama plugin into my webpage, the Cycle plugin stops functioning. I tried incorporating jQuery.noConflict but it still doesn't work. Am I implementing the jQuery.noConflict() wrong or is it something else?:
Links:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Scrollorama Plugin:
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
</script>
Cycle Plugin:
<script>
$(function(){
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
});
</script>
I've tried doing different options from different questions in the past but none of them work. Could this be an issue with the plugins and not how I implement them into my site?
I had the same problem with superscrollorama and for weeks I could not crack it, until I discovered console. Console allowed me to track all the JS errors.
If you embed the files in this order:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Then put all your code in:
(function($){
})(jQuery);
Example:
(function($){
$(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
})(jQuery);
It should work fine.
For superscrollorama, the example has the jQuery is embedded in the body. For extra jQuery plugins on the page, TweenMax and jquery.min need to be moved into the head in the following sequence:
<head>
... Your Meta, CSS files, ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
... Your other jQuery files, mootools, ...
</head>
Your CSS files may appear above or below the jQuery.noConflict(); but all your jQuery MUST appear after TweenMax.
jquery.lettering-0.6.1.min.js and jquery.superscrollorama.js may remain in the body. Just remember to add (function($){ ... })(jQuery); around all your code:
(function($){
$(document).ready(function() {
// set rotation of flash
TweenMax.set("#newversion", {rotation: 15});
... and so on ...
})(jQuery);
I have 3 jquery scripts on my page. The 2nd script for the menu is interfering with the 3rd script, the carousel. When I take out the 2nd script, the carousel works again. I tried putting in noConflict, but maybe I'm putting it in the wrong place because it breaks even more things. Here's my code:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#main-menu').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.0-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
visible: {
min: 6,
max: 6
}
}
});
});
</script>
I have these scripts for my website but only one function works at a time, whichever code is close to head tag works fine. what is a solution to work both function with out any conflict.
CODE IS GIVEN BELOW:
<script type="text/javascript" src="demo_files/jquery.js"></script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
$.colorbox({opacity:0.3, href:"offer.html"});
});
});
</script>
Long Answer: It's because you are including jQuery twice, once right at the top, and again about half way down (a minified version).
The second time you include the library, the $ object will be redefined, overriding the existing instance. Any code attached the $ object when this happend, such as events and plugins, will be lost.
Short Answer: Remove the second copy of jQuery, it should work then.