jQuery slider not "sliding" because of differing jQuery/UI versions - javascript

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/

Related

Get easy commenter and Bootstrap to work with same version of jQuery?

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 $.

Pure Basic JQuery Camera Plugin - Does Not Work

I need a help in jquery camera plugin. I downloaded the plugin from
http://www.pixedelic.com/plugins/camera/
And I placed all the necessary JavaScript files downloaded from the site in the same location :
My php program is (it does not have any php scripts although the extension is .php) in the same folder as "js" This is the html code :
<script type="text/javascript" src="js/jquery/jquery-1.10.2.js"></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/camera.min.js'></script>
<script>
$('#camera_wrap').camera();
</script>
<div id="SlideWrapper">
<div id="camera_wrap">
<div data-src="images/slider/01.jpg"></div>
<div data-src="images/slider/02.jpg"></div>
<div data-src="images/slider/03.jpg"></div>
</div>
</div>
And when I run the program it does not show the images. I have done exactly how its instructed in the website. I have not added any features and changed any parameters.
I have placed the program in the webserver and it can be viewed at :
http://store.touchmedia.ca/mytest/TestCamera01.php
Please help me to make it work...
thanks,
Isaac
I found the answer in the following link:
https://groups.google.com/forum/#!topic/camera-slideshow/AgVzZjjJ75Y
Looks like the newer JQuery version(s) do not support JQuery Camera slider, must be because of certain functions/APIs required for the slider were removed in the newer version as mentioned by Nouphal (Thank You).
I downloaded the fixed version from the above link and you can see that in
http://store.touchmedia.ca/mytest/TestCamera02.php
From this, I doubt how far can we trust the plugins which were developed by somebody whom we don't know, and when newer version(s) of JQuery is/are released then the plugin would stop working, imagine we develop a website for a customer and after a few months it stops working and we don't know how to fix the plugin and will end up throwing questions at all the forums found in the internet.
Call function when DOM gets ready.
Write:
$(document).ready(function(){
$('#camera_wrap').camera();
});
It seems that the problem is due to inconsistency between your plugin and the jQuery source file. In your example you are using the latest jQuery version i.e 1.10.2. You should always keep in mind that with each new version some of the older and inconsistent api's are removed and new ones are added. I think this plugin may be using some of the removed or deprecated methods. This plugin is however compatible till jQuery version 1.8.3. You can find the jQuery change log here or here. i have created a working example of your problem in JSBIN
I updated this plugin. It is now compatible with jquery-1.10.2 and bug free
Latest version as of 01/29/2014 available at: http://www.orangecountyseomarketing.com/projects/slider.html
http://www.orangecountyseomarketing.com/assets/js/slider/camera.js
BUGS FIXED:
Resolved latest jQuery version with .on() instead of .live();
Can still include iFrame with Video, extended size of video to 100%, video can play with any host not just vimeo or youtube
Working Pause and Play buttons.
Hope this helps.
-Yamenator-

jquery noconflict breaks some of the javascript

I know that this question has been asked earlier, I've looked and can't solve my problem with
<script type="text/javascript">
$.noConflict(true);
</script>
when I insert this code, the "jquery-latest.min.js" stops working
this are the line that are in conflict
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
and
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
I may be me putting the code in the wrong place...
You only need one reference to jquery. 1.4.2 is a very old version, is there a reason you are including that version as well as the latest version?
Remove one of your references and you're done.
Try with migrate:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
and remove the older one.
From the docs:
jQuery Migrate plugin
We have created the jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on jQuery 1.9 and later. Use the uncompressed development version to diagnose compatiblity issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.
Read More Here

Nivo Slider have javascript error

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 .

Does Uploadify support jQuery 1.4?

Does uploadify supports jQuery 1.4?
The site states that it needs:
jQuery v1.2.x or greater
... but the demo runs on 1.3.2 and I don't feel like trying to get everything to work just to realize that it's some feature I want later is not compatible with my version of jQuery.
I am using jQuery 1.4.2 and uploadify 2.1.0 in two pages with no problems, this being copied from the <head> of one of those pages (as, you know... proof):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
So: yes, it does work fine.
yes 1.4 > 1.2 so it fits in the "greater" condition
Edit:
Don't be afraid if it was designed for 1.2 then it will work, has for what I know, no feature was removed that can affect compatibility
It should work with 1.4.
And if it doesn't you can still download jQuery's official Backwards compatibility for jQuery 1.3: http://github.com/jquery/jquery-compat-1.3
I use it with 1.4.2

Categories