I've got this 2 codes returning "script error alert" to me on Internet Explorer 8. What is wrong please (or missing)?
<script>
$(".alert").alert('close');
</script>
<script type="text/javascript">
var $j = jQuery.noConflict()
$j(function(){
SyntaxHighlighter.all();
});
$j(window).load(function(){
$j('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
The second I know that is because of this (but I dont know why?):
SyntaxHighlighter.all();
and this:
$('body').removeClass('loading');
If SyntaxHighlighter.all(); is causing a problem then you've probably forgotten to load the JavaScript that defines SyntaxHighlighter or perhaps the case is different than you're trying to use.
This:
$('body').removeClass('loading');
will be a problem because you've called noConflict and that will return $ to whatever it was before jQuery tried to take it over. You should use the $j that noConflict gave you:
$j('body').removeClass('loading');
i am not sure if this is the issue but you don't have a semi-colon at the end of the following line:
var $j = jQuery.noConflict()
Related
I have this short code,
$("#contact").click(function(){
$("#contact").addClass("clicked");
});
And it is not working, returning me
"Uncaught TypeError: $ is not a function"
, ref to the 2nd line
$("#contact").addClass("clicked");
So, jquery is working cause he is recognizing the first line, and the element $("#contact") is correctly named cause he is detecting the click function. I can´t guess why is that line failing.
After seeing all your comments,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contact").click(function(){
$("#contact").addClass("clicked");
});
});
</script>
My code is just like that. I think jquery is well inserted, and its all in the head of the page
If you have included jQuery but $ is undefined, you may run jQuery in noConflict mode. Than you can wrap your code like this:
jQuery(function($) {
$("#contact").click(function(){
$("#contact").addClass("clicked");
});
});
I'm issues getting JQuery to work with Mootools, and I've tried just about every thing I've found on resolving the conflict, so I'm thinking I'm just doing it wrong, and not realizing it.
Here's the code without the libraries listed:
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
})(jQuery);
<script type="text/javascript">
(function($){
window.addEvent('domready', function() {
var status = {
'true': 'HIDE',
'false': ''
};
var myVerticalSlide = new Fx.Slide('vertical_slide').hide();
$('v_toggle').addEvent('click', function(event){
event.stop();
myVerticalSlide.toggle();
});
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('text', status[myVerticalSlide.open]);
});
});
})(document.id);
Use jQuery instead of $
jQuery('.slideShow')
$ is a reference to jQuery so they're interchangeable
I don't know anything about mootools but they both use the $ identifider. I believe you need to reassign the $ to one of them.
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
</script>
So now when you want to use jQuery you do
$j('selector').show();
And you use the same syntax as before for Mootools.
Ok Guys please forgive my ignorance. I'm new to javascript so all help is well received. I've been trying to implement these solutions but it's not working. This is what I have on my revised code:
<script type="text/javascript">
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
</script>
When i do this it makes all of the above stop working.
Also, I still have the other statement
function $(id) {
return document.getElementById(id);
}
Which Im not sure if I understand what to do with it since if I take it off the element that goes with it stops working (it's a dual slider)
Thanks Again
I'm a javascript novice so my apologies :0)
I'm using this javascript on a website:
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
$('a.fancybox').fancybox();
$('textarea, select').uniform();
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'});
});
</script>
There is another script that contains this at the beginning which is making everything else to stop working. As soon as I delete it everything works again. Is there a way to unite these? or do they need to stay separate?
function $(id) {
return document.getElementById(id);
}
Thanks in advance...
Use noConflict to release $ and the use jQuery() instead of $() for jQuery operations:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Now $('x') uses the custom $ function.
</script>
The problem is you have declared a function called $ which now overwrites the jquery reference that is created by jquery.
thus when you do $('#slider1').tinycarousel(); you are now expecting a method tinycarousel defined on the object returned by your function.
if you still want to continue using jquery and your function you will have to use
jQuery("something").tinycarousel()
It's good practice to "shield" your code from this kind of problem by never using the $ function directly, instead create a new scope where you explicitly define $ = jQuery:
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
Alternatively, jQuery passes itself to the DOMReady short form:
jQuery.noConflict()
jQuery(function($){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
Make this a standard practice and you'll avoid the issue in the future.
You should probably remove the second script because jQuery itself contains ID selector which will select elements from dom using id as requirement.
Remove this
function $(id) {
return document.getElementById(id);
}
Do this from now to select with ID
$(document).ready(function(){
$("#myCarousel").fadeIn();
});
I have a website using the prootype framework and I am looking to use a jquery plugin. Everything works just not in IE8. It works in ie7 which amazes me. Any idea what maybe wrong?
IE8 gives me object doesnt support this property or method where line jQuery.noConflict(); is
<script src="/my/docs/jquery.js" type="text/javascript"></script>
<script src="/my/docs/jquery.simplyscroll.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.noConflict();
function OpenUp(sURL){
window.open(sURL,null,'height=560,width=820,status=yes,toolbar=yes,menubar=yes,location=yes,resizable=yes,scrollbars=yes',false);
}
jQuery(document).ready(function($) {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/my/docs/jquery.simplyscroll.css"
});
$("#scroller").simplyScroll({
autoMode: 'loop',
framerate: 1,
speed: 1
});
});
</script>
I also tired the following: var $j = jQuery.noConflict(); var j = jQuery.noConflict();
everythig works just not in IE8 alone.
I've run into this also using jQuery-1.4.4.js. Everything works fine except in IE8. IE8 does not recognize jQuery() anything. I was able to resolve the problem by loading jQuery and running $.noconflict() prior to loading Prototype and it all runs fine on all my test browsers including IE8. This sequence is contrary to the jQuery documentation and therefore I'm nervous about it. Can't find anything on the jQuery site about it.
t22harris
The only way I was able to fix this, for IE8 (which was the only one with the problem) and other browsers was to put jQuery and the noConflict() call in the head immediately after initializing the other library. Like so:
<script type="text/javascript" src="/path/to/prototype.js"></script>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict(); </script>
... followed by any other scripts that use either jQuery or Prototype.
I've been having a similar problem. The solution that I'm currently using is to save the $ variable in a temporary variable, loading jquery(I'm loading jquery from js code), running jquery dependent code (with jQuery.noConflict), the setting the $ variable back.
It's dirty, but it seem to have done the trick for me.
My function which adds jquery (if necessary) is:
function getJQueryAndGo(callback) {
var thisPageUsingOtherJSLibrary = false;
var tempDollar = $;
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
thisPageUsingOtherJSLibrary = true;
}
loadToHead('script','http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
//alert('Super failsafe - still somehow failed...')
} else {
jQuery.noConflict();
(function($) {
callback($);
})(jQuery);
}
});
}
else
{ // jQuery was already loaded
jQuery.noConflict(); // This may not be necessary
(function($) {
callback($);
})(jQuery);
}
$ = tempDollar;
}
The loadToHead simply loads the script into the head tag somewhere and runs the callback function when the script is loaded.
Most of this code I have found online and tweeked it. Unfortunately I don't remember where to give the credit as of now.
Ive had a simular problem in the past and worked around it by using the emulate ie7 meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Im not sure if this is the best work around though.
Just had the same problem. IE 8 does not like:
var jQuery = jQuery.noConflict();
changed it to:
var jq = jQuery.noConflict();
worked fine.
I've had strange problems in the past with IE8 on machines with multiple versions of IE installed. In my case an error was popping when I tried to open a link in a new window via javascript. The same code worked fine on IE6 and 7, and a machine with only IE8 installed ran it fine as well.
This is an issue I also discovered. The way I fixed it was to upgrade my jQuery to 1.4. Version 1.3.2 fails with newer prototype on IE8. Sorry this answer is late.
I have the exact same error with 1.4.4 and 1.4.3 loading jquery after prototype and only in IE8, not even in Ie7 or Ie6
Jquery 1.4 solved this for me.
I use
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
to load jquery and then load an external script that contains these :
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
and also use a mootools plugin of course.
MY QUESTION IS THAT how should I use var $j = jQuery.noConflict(); in the above script to prevent conflicting
Wrap all the JavaScript that relies on jQuery in a closure to prevent namespace conflicts, like so:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
It looks weird, but the syntax is right (yes, the first line starts with a semicolon). This automatically substitutes jQuery for the $ object, which both jQuery and mootools make use of. Since you're using both, you should wrap all of your jQuery code in a closure like this (one for each .js file or script tag).
If the problem is just, you load MooTools, and then you load jQuery, and then MooTools doesn't work because jQuery has taken over the dollar function, then you probably just need code like this:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
That should get jQuery to relinquish $(). The code you have in your question already does the other handy thing, which is use the parameter to the ready event handler as a way to locally use a shorter name for the jQuery object.
I'd strongly recommend reading the jQuery page on working with other libraries and maybe the documentation for the noConflict() function.