Conflict between colorbox and bootstrap libs - javascript

There is a conflict between using ColorBox iFrame with the Bootstrap, from Twitter ..
I am trying to use the following coee to resolve the conflict ,, but the same problem :
including the required libs:
<script src="../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../js/colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
color box js:
jQuery(document).ready(function ($) {
// colorbox code here
});
and bootstrap js:
$(document).ready(function () {
// bootstrap twitter code here
});

Both functions do the same as long as jQuery === $ in the current scope (which is usually the case).
The first version is better though as it also works if noConflict was used.
jQuery(document).ready(function($) {
// both colorbox and bootstrap code here
});

Related

Jquery.min.js local copy not calling window load function

I am using jquery for focus of tabs. When i used :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in my jsp then the window.load function works good, but when i downloaded jquery.min.js and added in js folder.
<script type="text/javascript" src="jquery.min.js"></script> like this.
Now window.load function is not working.
<script type="text/javascript">
$(window).load(function() {
alert('Hello');
if($("#updatetemp").val()=="TRUE"){
$("#update_link").click();}
});
</script>
I found out the way to use JQuery locally..
jQuery(window).bind("load", function($) {
var msgtemp= jQuery("#updatetemp").val();
if(msgtemp=="TRUE"){
jQuery("#update_link").click(function() {
}).click();
}
});
Instead if $ symbol i just used jQuery attribute and it worked.

how to fix Conflicting Jquery sources 1.31 and 1.61?

I have a page with js source. I have to include two different jquery sources. If i take out one the countdown clock doesn't work.
how i work with js conflit ?
<script type="text/javascript" src="files/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="files/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="files/js/kivi.js"></script>
<script type="text/javascript" src="files/js/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
</script>
I think you should better find out how to fix the contdown clock instead of loading 2 versions of jquery on the page.
There is that noconflict method but i'm sure the plugin doesn't do it that way. You can edit the source of the plugin, wrap it in an annonymous self executing function that takes one parameter
(function($) {
// your plugin code here
})(JQ);
where JQ is the non conflict name you get from whatever version of jquery this plugin requires.
So safest way is to fix the clock plugin

Jquery library conflict with another jQuery library

I am using a lot of jQuery libraries in my application.
My application is based on a map, and the map is generated by my own server mapmyindia.com.
The problem is that there is a jQuery conflict that occurs when I use fancybox jQuery library, pagination jQuery library and drop-down checklist jQuery library, all work together.
My direction search API's don't work because of a jQuery library conflict.
However, if I remove all the jQuery libraries, I can use my direction search API
just fine.
With the jQuery libraries enabled, it gives me an error:
$.jsonp is not a function
My application is on app.mapmyindia.com/michelin please help me.......
<script>MIREO_RESOURCES_ROOT = "http://46.137.254.191/MapServer/";</script>
<script type="text/javascript" src="http://46.137.254.191/MapServer/MireoWebMap.js"></script>
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
<script type="text/javascript" src="jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen"/>
Try to use jquery noConflict() and download the latest version of jquery that resolve some problems conflict
try this :
use jquery noconflict and wrap your code in jQuery functions :
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
jQuery(function($){
// my code here each
});
good luck.
The order in which you have declared your javascript, that is importing your MapmyIndia Js first, using it
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
& then calling jQuery, I don't think so jQuery would be creating problem.
Also you should be using
var map=document.getElementById("id");
since you are calling jQuery after that so $() won't work.
EDIT : Or if the MayMyIndia Js also requires jQuery then you should call jQuery.Js on top.

Having a conflict while trying to use the jquery cycle plugin and the lightbox plugin

I am working on a website that has incorporated the jquery cycle plugin. It was all working fine until I tried to add the lightbox plugin. There seems to be an issue within the element that only allows the latter JS files to work. Any help would be great.
Here is the jquery code I am using in the element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
$('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
fx: 'fade',
timeout: 5000,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});
</script>
It works without any issue.
Here is the lightbox code in the element.
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
It also works alone without any issue. When I put them together, only the last one in the element works. The first one breaks.
I have checked the error console and this is the error:
Error: element.dispatchEvent is not a function
Source File: http://localhost:8888/rockymountainsports/rms/web/js/prototype.js
Line: 3972
That error does not appear when the cycle js is not there. Any ideas?
Thanks
I presume the error is due to the fact that you're using 2 Javascript Frameworks, jQuery and Prototype.
This usually isn't recommended unless you really need to use both frameworks.
I would consider using the jQuery alternative of lightbox or using jQuery in noConflict() mode. Something like:
var $j = jQuery.noConflict();
And then instead of using $("someelement") use $j("somelement");
But, my personal recommendation is to ditch one of the framworks and stick with just one.

Conflicts in Mootools & jQuery In Joomla

I read all the related post but I think I am missing something.
My page structure is:
1 - Load Motools library in Joomla. Code:
JHTML::_('behavior.tooltip');
JHTML::_('behavior.mootools');
JHTML::_('behavior.formvalidation');
2 - Then load the Jquery library code is:
<script language="javascript" src="<?=$this->baseurl;?>/includes/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?=$this->baseurl;?>/includes/js/jquery/customjsfile.js"></script>`
3 - Then there are few JS function which uses Jquery Functionalities. The code is:
function abc() { /* -.stuffs uses jquery */ }
function xyz() { /* ..another function which uses jquery */}
4 - Load body of the page
5 - At the end again few lines of JS code . Which again use Jquery. Code is:
<script language="javascript">
$("#dialog").html(newHTML);
</script>
This is how my page is.
Now I am getting the Conflict errors in Motools & Jquery.
How do I resolve it.
use jQuery instead of $ and
give
jQuery.noConflict();
jQuery.noConflict
Many JavaScript libraries use $ as a
function or variable name, just as
jQuery does. In jQuery's case, $ is
just an alias for jQuery, so all
functionality is available without
using $. If we need to use another
JavaScript library alongside jQuery,
we can return control of $ back to
the other library with a call to
$.noConflict():
Please see:
Using JQuery with other libraries.
jQuery.noConflict(), this is what you need.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
source: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
See this page. It seems to be answered there
http://groups.google.com/group/jquery-en/browse_thread/thread/3dabd31a8ab60505?pli=1

Categories

Resources