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

$.cookie working only inside jquery events and not inside javascript function

$.cookie function is working fine when I am trying to use it inside $(document).ready() but when I am trying to use the same logic inside a custom javascript method it shows "$.cookie is not a function" in the web console. I have installed and included the plugin inside my code.
Please help! :)

"$.cookie is not a function" this is because 3 reasons
Just check
jquery plugin included ?.
jquery cookie plugin included ?.
Above order is maintained ?.

Your jQuery <script src= is in a different scope in the first $(document).ready() call compared to the second. Not much else we can say since we can't see your code.

Setting up infiniteScroll in angularjs with default code

here is the link to the full code.
http://binarymuse.github.io/ngInfiniteScroll/demo_async.html#
I copied the code from infiniteScoll's website and it is still not working. The error I am receiving is "$window is not a function". Could someone direct me to a tutorial or maybe something better? Also it fails to instantiate when I add 'infiniteScroll' to angular.module('starter', ['infiniteScroll'])
What am I doing wrong? I tried using my own customized code but that doesn't work. I copy and paste the code from the sample they have there and even that doesn't work.

You can try using this script:
http://binarymuse.github.io/ngInfiniteScroll/

Infinite scroll uses Jquery as dependency. You will need to include Jquery and it will work.

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 files conflicts how to detect?

Q:i have a general problem ,when i wanna to do some thing and i find the jquery file which can do exactly what i wanna to do . after a while i need another case and i find that another jquery file serve me and fix my problem .after i add set of jquery files i find conflicts among those files and some features does not work or work in awkward manner ..and when i try to find which file exactly the source for those problems i find myself in closed circle cannot modify this file or cannot delete this file or cannot find that file itself at all.sometimes the file like this:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
cannot modify it.
the problem has many faces,and i cannot really know how to handle the whole matter from the beginning.
can any one give me instructions ,advices,notes, or explanation to prevent the problem from the beginning and how to fix it if it was happened.

Please have only one instance of Jquery Library.
The library has the capability to solve the issues.
Seperate instances or files will confuse the code.
I hope this helps.

If you point your browser at http://jqueryjs.googlecode.com/files/jquery-1.3.js it will give you the JS file for you to download and save as your own copy. You can then change it as you want and link it in your website rather than use the one located at googlecode.com.

http://api.jquery.com/jQuery.noConflict/
This link suggests few of the ways to avoid the jQuery conflict. Please check that as it could give you some more idea to resolve your problem.
Regards,
Lakxman Kumar C