Develop Reference

JQuery# Live Filter conflict with Fancy Box

Live filter, source: [jsfiddle/M2mUF/][1] is in conflict with fancy Box`s libraries(jquery live filter library in conflict with fancy libraries fancyapps/fancybox/. I need a popup iframe script which no conflict with live filter library.
Other multi filter testing is tommyp.github.io/multifilter/ , but this is in conflict with fancy box or other popup script.
Please, help me!

use jquery's method - jQuery.noConflict(), it is specifically designed for preventing jquery from conflicting with any other scripts . Here is its Documentation for further refrence
on how to use it..

2 JS functions with same name conflict

Short
Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:
jQuery UI very important for me because nearly all UI things built based on it
Twitter Bootstrap only for split button with dropdown menu functionality.
Now, the problem is both libraries has same named functions which conflicts with each other:
Detailed
Here is example of conflict between jQuery UI and Twitter Bootstrap button functions
Please enter to this website. Press Recommend button on table
jQuery UI modal window will appear. I used jquery ui combobox inside modal window. The problem is, there is no down arrow button as shown on jquery ui combobox demo.
I tried to find what causes the problem: Looked through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js.
As you see it's proof of conflict between 2 js libraries.
Btw, Here is jsFiddle where it works well without bootstrap.
Problem
I have multiple ways to solve this conflict problem (WITHOUT TOUCHING FUNCTIONALITY OF THE WEBSITE) I need to get exactly same functionality as split button with dropdown menu (Twitter Bootstrap):
if possible in jQuery-UI (something like this but with dropdown menu)
else in CSS + HTML only
and get rid off Twitter Bootstrap. Any solutions greatly appreciated. I'm ready to give 200 reps to good answer (as bounty). Thx in advance

The current version of bootstrap (v2.2.2) now has a noConflict option. Just insert this some place after your bootstrap and jquery script tags but before any usage of the button() function.
<script type='text/javascript'>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
Alternatively, you can use $(document).ready(handler), but you still have to make sure substitution occurs before button() is called.
Once that line of code is executed, button() will be JqueryUI's button, and bootstrapBtn() will be Bootstrap's version.

To fix the collision between Bootstrap and jQuery UI functions, rename one of them:
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
And then you can call each function at will:
<script type="text/javascript">
$(".button-one").button() // jQueryUI button
$(".button-two").bsbutton() // Bootstrap button
</script>
You can use this technique for any function you need.
Remember the order include A -> rename A -> include B.

If you are only using the dropdown plugin of Twitter Bootstrap, you don't need the .button() plugin.
Go to the customize bootstrap page and unselect all jQuery plugins, then choose only the dropdown one. You could also unselect some of the CSS if you want.
If you need both implementations (Twitter Bootstrap and jQuery UI), you could rename all .button to something like .bsButton in the bootstrap-button.js file (or find this section in a non-minified version) - not tested.

All other answers fixing conflict between jQuery UI button and bootstrap button but you can't use bootstrap data-api for renamed button() function. Only manually using new-named bootstrapBtn() function.
I find a solution:
Find and replace all occurences of regex (\$[.\w]+\.)button to \1btn in bootstrap.js file.
Or use this sed script:
#!/bin/bash
# Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js
After that you can use bootstrap data-api for button binding and also manually use btn() function in place of button() for Bootstrap while still use jQuery UI button() function.

I suggest to do custom jQueryUI, or Bootstrap build - both offer this possibility on websites.
I use custom build of jQueryUI with core, effects, interactions, but without widgets, which often causes conflicts.

Is there a way to make a colorbox object draggable?

Is there a jQuery script that will make colorbox windows draggable?
I found a one called easydrag that works but it gets sticky once the colorbox is dragged to the outer boundaries of the page. See my easydrag sample page.
I am looking to get the easydrag script working properly OR find an alternative script that works well with colorbox.

You can use jQuery UI Draggable for that - if draggable is the only function you seak, UI may be overkill, but it works:
$('#colorbox').draggable();

Javascript lightbox component that works with arbitrary HTML

Is there a Javascript component that allows me to simply pass it a string made up of arbitrary HTML (any HTML I wish to use) and will show that HTML in a lightbox?
I've been scouring the internet, searching for examples, but it seems like there simply isn't any component capable of doing this.
Even LightWindow, which claims to be all-purpose, still requires me to attach it to an tag with the href set to an element ID.
This isn't what I want. I want to be able to call a function and pass in the HTML myself.
(Another issue with LightWindow is that it requires scriptaculous as a dependency. The project already uses jQuery, and I'd rather not include two frameworks at once.)
Any ideas?

colorbox is great. It relies on JQuery.
To use it with an html string, you would call it like this:
$.colorbox({html:'<p>Hello</p>'});

You can use jqModal or jQuery UI dialog.

SLaks is correct. You should definitly use JQuery UI dialog. Here is an example of using the JQuery dialog as a modal, very similar to using lightbox.
$("#dialog-message").dialog({modal: true});

Fancybox is not a function

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};

I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).

I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.

Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.

You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.

If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.

In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.

If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.

I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.