Develop Reference

Migrating scripts from 1.7.1 to 1.9 jQuery (Bootstrap 3)

I have javascript scripts that work with jQuery 1.7.1, but don't with 1.11.1 that comes with Bootstrap v3.3.4
The code is across three scripts, but here is one part that toggles rows in a table:
$('#change-selection').click(function(e){
e.preventDefault();
$('.product-choice').toggle();
$(this).toggleClass('closed');
});
$('.compare th a').click(function(e){
e.preventDefault();
var className='tr.'+$(this).parent().attr('class');
$(className).toggle();
$(this).toggleClass('closed');
});
If I link the page to jQuery 1.7.1, toggling across the HTML table works, CSS works as well, but Bootstrap dropdown navigation stops working (fair enough, Bootstrap requires a higher jQuery version). If I use the jQuery that came with Bootstrap, toggling across the HTML table stops working, and CSS inside the table gets messed up. The code above should be a good start to fix the toggling at least. I read about what got deprecated with jQuery 1.9, but that was not enough for me to fix this. I replaced that one instance of attr with prop, but that did not make any change. Is this code troubling for that toggling function or I should look elsewhere?
Thank you

If you got to have, you can have 2 or more versions of jQuery on the same page. https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

jQuery conflicts using Content Carousel with Bootstrap 3 and Fancy Box

I am working on a site that is using the Circular Content Carousel from Tympanus in conjunction with FancyBox on a site built with Bootstrap 3. I've noticed however, that the collapsible mobile menu that is part of Bootstrap is not working on this page. I realized that Content Carousel is using jQuery 1.6.2 while Bootstrap uses 1.9 or higher. When I remove the link to jQuery-1.6.2 the mobile menu works but the Carousel breaks, and when I remove jQuery-1.11.1, the carousel works but the mobile menu is broken. Linking both results in the carousel working but the mobile menu not working. I've tried using the jQuery.conflict script to no avail (whoever built the site had already begun to implement this unsuccessfully).
I've tried changing lines 217 and 227 of the contentcarousel.js file from .live to .on as per the stack overflow link here and removing the older jquery file. Now everything almost works except when you click on the + sign to enter the lightbox and then exit out of the lightbox, the content carousel no longer works. I've also noticed that after this change, when you hover over the dropdown menu, it stays in an active 'mouseover' state.
The site is here http://smmcnyc.com/work/bnc/history.html with history2.html being the version with the modified contentcarousel.js file.
Suggestions? Advice? Please help!

Mobiscroll datepicker is hidden by jQuery Mobile modal

I have a jQuery Mobile site with some date inputs, I am using the Mobiscroll datepicker (in modal mode) for these. It works well on standard jQM pages, but it has a problem when I have a date input that is on a jQM modal.
The problem is the datepicker modal shows under the jQM modal and so the user can't see it, I want the datepicker to show over the top of the jQM modal. If I hide the jQM modal using Firebug, I can also see that the datepicker is under the jQM "dark" filter - where it makes everything dark except the jQM modal.
The code I'm using to setup the Mobiscroll datepicker is:
$('#mydate').scroller('destroy').scroller($.extend(
{
preset : 'date',
dateFormat: 'dd/mm/yyyy'
},
{
display: 'modal',
mode: 'scroller',
theme: 'default',
lang: 'en'
}));
I have tried modifying the elements in Firebug to see if some CSS would fix it, I tried setting the datepicker to a high z-index and the jQM modal to a lower z-index, also tried forcing it with !important but this didn't change anything. The other Mobiscroll display options: top, bottom, bubble have the same problem.
How can I get the datepicker to display on top of the jQM modal?
jQM version: 1.2.0 (latest), with jQuery 1.8.2
Mobiscroll version: 2.4.4 (latest)

Try this:
.dw-persp, .dwo {z-index:1051;}
.dw {z-index:1051;}
You'd better put it in the last css

I happened to have the same issue and here it my fix:
Check the css of the modal(the default z-index for jquery mobile modal is 1050).
Then go to mobicroller css and change the z-index to any value above it. As long as mobiscroller has a hinger z-index it should show on top modal without any problem.

jquery tipsy. trigger:focus not working on radio buttons

I'm using this plugin for displaying tooltips
Looking at this fiddle - http://jsfiddle.net/CmmUC/1/
You'll see that the tootip does not appear. It works if you change the javascript to
$('.tooltip').tipsy({ gravity: 'w' });
​Why does plugin hate 'focus'? Am I missing something obvious that's causing the issue?
I'm working in the latest stable Chrome.

see my updated version of your fiddle:
http://jsfiddle.net/CmmUC/7/
basically you need to add the option trgger: 'manual' upon instantiation and maually show/hide the tipsy using the jquery hover function.

jQuery UI Slider not shown for some reason

I use jQuery UI 1.8.16 incl. the "smoothness" theme on a text input field. In FF FireBug, I can see all necessary dependencies for the slider appear:
jQuery 1.7.1
UI Core
UI Widget
UI Mouse
The theme is also loaded and all sources are checked. When inspecting the form field, the slider seems to be attached. But for some reason the slider doesn't appear as "slider".
Screenshot including FireBug

make sure the slider css is there. That would be the only thing i can think of. Maybe you didn't check the slider option when downloading the theme.
Edit: Moved from the comments. Some will work because there is ui-widget. So sometimes thats all it uses. For certain ones it has it's own, like slider.