I'm building a website which use Nivo Slider. At first, it worked nicely. But yesterday, when I tried again, it's suddenly stop moving. I haven't changed anything yet before I discovered this issue. I looked into the console and there is a javascript error which says:
Uncaught TypeError: Object [object Object] has no method 'live'
When I tried to look into jquery.nivo.slider.js, the error is on $('a.nivo-prevNav', slider) like below:
$('a.nivo-prevNav', slider).live('click', function(){
// function's content
});
Using google's inspect element feature, I search into the page and found there.
What is wrong with that? why it is suddenly stop moving? Any help would be appreciated.
The Nivo Slider needs jQuery to work. On your website you refer to jQuery like this
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
This is pretty dangerous, as the latest version constantly changes. As can be seen from the jQuery documentation at
http://api.jquery.com/live/
the live function is deprecated since jQuery 1.7. Looking at the unminified jQuery source at
http://code.jquery.com/jquery-latest.js
it seems like the function is not there anymore, which is why you get the error.
Solution: bind jQuery with a specific version - probably you can find out which version you need from Nivo Slider documentation. Some of the older versions of jQuery can be found here: http://jquery.com/download/
In jQuery version 1.9, which it looks like you're using, the live() function is actually deprecated: http://api.jquery.com/live/
I guess you may have to wait for Nivo to update their source to support the latest jQuery, you can go down to jQuery 1.7, or modify the Nivo source yourself.
There is now a new version of Nivo Slider (3.2) that uses .on instead of .live.
Or use an older version of jQuery (1.7.1 is working for us)
Replacing all the .live() with .on() in the nivo slider's js file worked for me. My jquery was version 1.9.1 .
Related
I'd like to such behavior to my project, but I use ember fastboot, so I cant use jQuery
is there some non-jquery plugins like fullPage.js?
Here is example what I need:
https://github.com/alvarotrigo/fullPage.js
As per the comments, you can always use the pure Javascript version of fullpage.js itself:
https://github.com/alvarotrigo/fullPage.js/tree/master/pure%20javascript%20%28Alpha%29
Demo online
It hasn't been as highly tested as the jQuery one, but it seems there are not many complains about it.
I'd like to use this multi-level push menu in my webapplication. But the problem with this plugin is that it needs an older version of jQuery. It will crash in combination with v2.x.x of jQuery.
The owner has done this on purpose, so that older browser versions are covered with the plugin as well.
So I'd like to convert/migrate this script to make it compatible with the latest version of jQuery, the only problem is, is that jQuery isn't my 'thing' (yet). I'm not sure where to start, what to remove of what to add in the script.
My question basically is, can someone point me into the right direction to get this script working with the latest version of jQuery?
I'd really really appreciate any help!
EDIT:
UPDATED ANSWER:
Use Version2 from the Multilevel Push Menu download page! ::link:: ...
I downloaded that version, and changed from jquery-1.10.2 to jquery-2.0.3 ... and it's working perfectly! Here's a jsfiddle: jsfiddle.net/vLrp51g3
PREVIOUSLY ANSWERED
As suggested by A. Wolf, you can use migrate jquery js file to handle the older jquery version. Since the remaining plugins/scripts of your webpage might require latest jquery, you could use the getScript() function to load the migrate jquery for only the pushmenu plugin! Therefore, you should probably use the code provided below for your requirement...
$(document).ready(function(){
$.getScript( "http://code.jquery.com/jquery-migrate-1.2.1.min.js", function() {
$.getScript('js/jquery.multilevelpushmenu.min.js', function() {
$('#menu').multilevelpushmenu();
});
});
});
I am using bootstrap 3 and jQuery version 1.10.2
I am also using easy commenter and they require jQuery version 1.5.2 I have tried to just keep version 1.10.2 , just keep version 1.5.2 and keep both of them. But in every case one of them does not behave as expected. With version 1.5.2 the collapsible menu in header stops working with version 1.10.2 easy commenter stops working. How should I deal with this problem?
Here is a link to the page I am working on http://8mags.com/lessons/php/phpcalendar.php
Use the newer JQuery plus the migrate plugin
The correct answer is: If the "easy commenter" plugin doesn't work with a current version of jQuery, rather than one from three years ago, you want to find a different plugin or take the existing one and modify it so that it works with the current jQuery. The differences between 1.5.2 and 1.11.2 (the current version as of this writing) aren't really all that big, and are easily updated.
If you don't want to do that (why not?), then you can use both versions of jQuery on your page, but it doubles the size of an already-large library, increasing page load time.
Here's how:
<script src="jquery-1.5.2.js"></script>
<script src="easy-commenter.js"></script>
<script>
var $old = jQuery.noConflict(true);
</script>
<script src="jquery-1.11.2.js"></script>
<!-- all your other plugins and such, including bootstrap -->
You load jQuery 1.5.2, load the easy commenter plugin, then use noConflict to release both the $ and jQuery symbols, and load jQuery 1.11.2.
When you want to use the easy commenter plugin, use $old rather than $.
I adapted the jQuery slider code from http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ into my website which is based on Twitter's Bootstrap v2.0.
The problem is that the slider from webdeveloperplus.com is using an older version of jQuery and jQueryUI (1.3.2 and 1.5.3 respectively). The slider works fine if I import the two specified versions of jQuery/UI but Twitter's Bootstrap JavaScript components doesn't seem to work with the those versions. And if I use the latest version of jQuery/UI the slider won't work.
On the webdeveloperplus.com page, the author said to change the following line of code for it to work with the "latest" version of jQueryUI
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
to:
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
but it still won't work. The article was probably last updated 2008 or 2009.
My guess was that the line of code above is using something deprecated and removed/changed in the current version of jQuery/UI but I checked jQuery UI's API and it seems to me that's not the case. I would appreciate it very much if someone could help me find out what's the show stopper here. Thanks.
You could use jQuery's noConflict() function to include two different versions of jQuery.
<script type="text/javascript" src="older_version_of_jquery"></script>
<script type="text/javascript">
//Do slider work
//...
$.noConflict();
</script>
<script type="text/javascript" src="newer_version_of_jquery"></script>
Documentation: http://api.jquery.com/jQuery.noConflict/
I am trying to make use of qTip JQuery plugin.
I have tried to implement it but I get an error reported by firebug.
f(window).scrollLeft is not a function
[Break on this error] (function(f){f.fn.qtip=function(B,u){var...asses:{tooltip:"qtip-blue"}}}})(jQuery);
Please have a look at my setup.
What am i doing wrong?
I viewed source on your page and it looks like the jQuery version your using is older than what qTip requires.
http://craigsworks.com/projects/qtip/docs/#requirements
jQuery version 1.2.6 and above
http://174.132.101.73/~dandy/tester/jquery.js
jQuery 1.2.3
update and you should be good.
You should wait until the DOM is loaded before trying to attach qtip to it, so wrap your code in:
$(function() {
// your code here
});
Also check the version requirements as Samuel points out.