I'am using the javascript code below to get vertical tabs displayed. In the first line I loaded the jquery library from https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js. Then follows the code below. So far so good but I was told by the admin to remove the first line from the content as the library is going to be loaded by drupal autmatically. Right now the 1.5.2 version is embeded into drupal, I removed the line where I was loading the library externally but my vertical tabs hover effect won't work any more. Any idea why this happened?
$(document).ready(function() {
$(".tabsnew .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabsnew .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
In Drupal 7 you can't use the $ function anymore (well, not out-of-the-box). The reason is that Drupal allows you to run more than one js library at once and $ is e.g. also used in prototype.
Instead, replace $(document) with jQuery(document) and so on.
Related
One bootstrap tab navigation panel is not working properly on my magento site because of the jQuery.noConflict() call that I have used in my custom JS file.
When I comment the jQuery.noConflict() line then my tab navigation works properly. However, I cannot comment that code because when I comment that line the main navigation doesn't work.
How can I make my tab navigation work without removing the jQuery.noConflict()? Thanks.
This is because Magento still uses prototype.js, change jQuery to $j
var $j = jQuery.noConflict();
For more details check this out
Using noConflict() should be fine, however I come across issues like this a lot with Magento.
I'm assuming you're definitely loading jQuery prior to your own jQuery script, etc.
I tend to find the most watertight way of ensuring your jQuery scripts don't cause issues is to wrap your scripts in an anoymous function:
(function($) {
// Your jQuery script
})(jQuery);
As you can see, we're passing the jQuery object as an argument to our function. This means we can use $ locally within the function without it conflicting with other scripts / frameworks / libraries, etc...
I'm trying to run JS code in WordPress, using a plugin; but can't make it work.
Here on this Codepen page, you can see the element I'm trying to integrate on my site (i.e. a drag and drop feature)
http://codepen.io/galaxija737/pen/pHvEi
And here, this is working properly.
But then, I can't figure out how to integrate the JS code properly into WordPress; whatever plugin i'm using. And idem into JSFiddle, impossible to run properly the script, as you can see...
https://jsfiddle.net/szan6shz/)
For instance using "TC-custom-javascript" plugin; when I add the JS code, nothing is running (i.e the drag-drop feature is not working; like on the Fiddle) :
I'm really new at Javascript as you can see. If anyone can give me a hand on this. (I guess i miss something is the way JS needs to be written/integrated)
Thanks a lot!
Greg
WordPress runs jQuery in safe mode. This means that you need to call it with jQuery instead of $. You can call your initial onload function with jQuery and pass $ into the function to define its use throughout the function.
See this example:
jQuery(function($){
$('.theclass').fadeIn('slow');
});
I am trying to get two different jquery to run at the same time.
One thing (Design jQuery is how I'll refer to it) is related to a carousel and smooth scrolling, and automatically highlighting the current area in the navbar.
The second is a Konami code script which I would like to implement as an Easter egg.
When I remove the Design jQuery, the konami code works as it should in the browser.
However when it is added to the site, the konami code is unable to work.
Is there some way to getting them to both both at the same time?..
If you are not doing it already, define the Design jQuery and the Konami code script and run each of those using $(document).ready(varName);
You can run two jquery using jQuery.noConflict(). If you must refer to jquery as $, you can pass jQuery as a parameter to self invoking function. Example:
var jquery_one = jQuery.noConflict();
(function($){
//code that use jquery as $
})(jquery_one);
This question already has answers here:
jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function
(5 answers)
Closed 9 years ago.
So I've been trying to add a simple image slider into a page on my site. For some reason, it seems that jQuery isn't working at all when I try to call it.
Take a look at this page:
http://www.evanart.com/test/
Clicking the button brings up an alert, but that's just plain javascript. If you look in the source, i'm also trying to bring up an alert on pageload with jQuery, but nothing is happening. I'm running that script both in the post and in the head. There isn't anything wrong with the script itself- i've tried it on another site and it works fine.
So, jQuery isn't working. It seems like its linked just fine though. I also have some wordpress plugins running (a lightbox, a lazy loader, and an infinite scroll feature) which all work fine. What am i doing wrong??
The jQuery library in wordpress doesn't declare $ as the jQuery variable.
If you want to use $ you can write your code inside of a anonymous function using $ as parameter and jQuery as a value:
(function ($) {
// put the code that uses $ in here.
}(jQuery));
or, to match your code:
jQuery(document).ready(function($) {
// put the code here
}(jQuery));
WordPress loads jQuery in no conflict mode to prevent issues with other libraries.
So you must use jQuery instead of $ in your code.
For example, I saw this in your page:
$(document).ready(function() {
alert('hi');
});
For it to work, and still use the $ sign, you must use the jQuery noConflict Wrapper:
jQuery(document).ready(function($) {
alert('hi');
});
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.