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);
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 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.
I had an blog using WordPress. I got an jQuery code to make some div fixed after some scroll, got it here:
http://jqueryfordesigners.com/fixed-floating-elements/
Someday ago, I got an plugin to make and "Recent Post Slider" for WordPress. But when I activate it, the fixed div jQuery stop working. I think that can be an conflict, but really don't have sure yet.
What is the best move to know what's happening?
You can use jQuery.noconflict() for this. For example:
$j = jQuery.noConflict();
$j("your_div").css("position", "fixed");
Here you have the code explanation. jQuery.noConflict
Get a browser with JavaScript debugger console and make it print you the $ variable. jQuery returns : function (a,b){return new e.fn.init(a,b,h)}. The $ variable is sometimes used by other libraries, and if you use it directly in your jQuery it may get overwritten. To avoid this, encapsulate your jQuery code:
(function($) {
your code with $
})(jQuery)
This may break some of your global variables though, it depends on how you wrote your code.
I don't think that jQuery does not work anymore as #nicowernli said. But it is possible that the plugin changed the html of the page.
The best move is to disable the "Recent Post Slider" plugin and check if the fix starts working again. Then you will know what where problem is.
make sure that you've included Jquery once but no more
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).