Develop Reference

Javascript not running in WordPress

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');
});

jQuery isn't working in Wordpress, although plugins which use it are working fine [duplicate]

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');
});

Reuters news feed conflicts with use of jQuery's '$'

Hi guys having an issue with the reuters news feed. It is preventing my jquery from working. From what I have found googling it seems there is a library conflict or loading issue. The error the console gives is as follws :
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
From googling it seems if you change the $ to jquery things are fine but is there another solution for this? Loading the news feed script after? I don't really want to do a sitewide change.
I have setup a jiddle here: http://jsfiddle.net/Jjj6g/23/
If you remove the div with id=annoying you will see the test div growing and shrinking but not when the reuters feed is put in.
I know this is a bit off the wall but any advice/help would be appreciated.

You can wrap your code within an anonymous function and evaluate it right away. That way you can overwrite a variable only within this function.
Example:
(function($) {
$('.something')...;
}(jquery));

This is very common mistake. Usually it means not conflict but just you forgot to add some library. Please check carefully, if all the used libraries included and what is important too, could be found by browser:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>

jQuery conflict with an plugin?

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

JQuery code in another file

before this I wrote all jquery-code into main fail. Now I want to move it into another js-file. The problem is that it doesn't want work correctly.
Here is an error by FireBug:
$ is not defined
$(document).ready(\n
So, as I understand, I have to initialize $-var... But how?
Thanks.

Include jQuery before the file that uses it.