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();
});
Related
I'm trying to function this code
But when I use it on my Angular app, I found some errors, and it seems to be jQuery
var element=$('.cds'); //the problem is right here (angular.element('.cds') is the same)
console.log(element.html()); //prints undefined,
// so, no animation
How can I fix it? Any ways to use jQuery edge?
index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bundle.js"></script>
As the code is in bundle.js, created with browserify, should I call jQuery too? Like var jQuery=require('jquery');? or something. Thanks for your help
Try this line in your code, after definition of done(). It will not work.
console.log($('.cds').html());
Now click the javascript button and select 'OnDomReady'
Now it works. You cannot use jQuery until domReady event.
EDIT
This is the most classic method for jQuery
$( document ).ready(function() {
/* The DOM is now loaded and can be manipulated*/
});
Try using angular's built-in jqLite first before anything ...
$scope.el = angular.element('.cds').html();
console.log($scope.el)
Or if you want to user pure jquery then try searching the parent for your element an store this in a variable :
var el = $('.container-class').find('.cds');
console.log(el.html());
Hope this helps
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.
As a javascript newbie, I am struggling to use a script with a variable that runs a bit of JQuery (and also struggling to use the right language here, I'm sure!)
The action I want to happen is to change the CSS class of a specific div, e.g. #det90, for which I have the following code (I have used the same on a $(window).load(function() and it works on a different set of divs):
$("#MYDIVIDHERE").switchClass("sdeth","sdet",50);
So I wrote the following:
<script type="text/javascript">
$(function revealCode(divID) {
$("#divID").switchClass("sdeth","sdet",50);
})
</script>
and called it from an anchor with:
onClick="revealCode('det90');"
I think the problem is that I don't know how to write the script and pass the variable in the brackets (divID) to the next line (where I've got "#divID"). Any help or pointers to tutorials gratefully received!
Solution
Thanks to all, but particularly to Caleb. I've scrapped the general function and the onClick, added an ID to the anchor and inserted the following for that anchor (and then repeated that for each anchor/div combination I want to use it on ... and it works :D
$("#linkID").click(function() {
$("#divID").switchClass("sdeth","sdet",50);
});
Change your code to: onClick="revealCode('#det90');"
$(function revealCode(selector) {
$(selector).switchClass("sdeth","sdet",50);
})
jQuery is powered by "selectors" -- similar to CSS syntax.
Don't quote your variable name. Just quote the "#" prefix.
<script type="text/javascript">
$(function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
})
</script>
Change to:
<script type="text/javascript">
function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
}
</script>
You don't need $() around the function
$("#divID") will look for an element with the ID divID, and not what was specified in your function parameter
This won't work. revealCode is local to that scope and not known outside. Also, you're not using the argument you've passed into your handler.
If you're using jQuery, use it to bind to the handler as well like this:
jQuery(document).ready(function() {
function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
}
jQuery("#divID").click(function() {
revealCode('det90');
});
});
Move your onclick event handler attachment into javascript code. You should try not to mix your functional code with your html.
Anonymous version:
$('#myDiv').click(function () {
$(this).switchClass("sdeth","sdet",50);
});
Normal version:
var myFunction = function (element) {
$(element).switchClass("sdeth","sdet",50);
};
$('#myDiv').click(myFunction, {element: this});
I have an application that requires the use of a mootools calendar, however, I use jquery for my main app structure.
As soon as I have mootools in with jquery, neither work, and when I have only one, they work fine. I did some research saying I could use a method called .noconflict, and while i've tried, I have not gotten it to solve my issue. Perhaps someone could better explain to me where to do the actual .noconflict calls, and perhaps help me get this working.
Thanks!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var fixHeight = function () {
var gutter = 50;
var newHeight = $(window).height() - (gutter*2);
$('#container').height(newHeight);
}
$(function(){
fixHeight();
$('ul#nav li.item').each(function(index) {
if ($(this).attr("name") == "media") {
$(this).attr("id","active");
}
});
$('input').focus(function() {
$(this).attr("value","");
}).blur(function() {
$(this).attr("value",$(this).attr("original-value"));
});
$(window).resize(function() {
fixHeight();
}).load(function() {
fixHeight();
});
});
</script>
<script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var smoothCalendar = new SmoothCalendar("calendar");
});
</script>
yes, the noConflict method should work, but if it doesn't or if you want to do it in another way, you should encapsulate the scripts in self-calling functions with the parameter being set as the main library object:
(function($){
// al your jquery logic here
alert($ instanceof jQuery);
})(jQuery)
after that, you should include the next library(in your case MooTools) and write the script normally , or - to be very sure - you can encapsulate the MooTools logic in a function as well.
You should be fine if you simply call:
jQuery.noConflict();
...before including the Mootools JS file.
You can then use jQuery functions by using jQuery instead of $. Example:
jQuery('.selector').hide(); // instead of $('.selector').hide();
You can also pass $ back in through the DOM-ready event:
$.noConflict();
// Non-jQuery code goes here
jQuery(document).ready(function($) {
// You can now use the dollar sign safely inside of this function
}
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.