We Keep Coding

Javascript not getting loaded

I added a custom jquery function to my wordpress site. The code was to open a popup window on every alternative clicks. This doesn't work if I add to my wordpress theme header.php
This is what I added <script src="/alternateclicks.js"></script>
The js file was added to the wordpress root location public_html. I don't see any popup whatsoever.
jQuery(document).ready(function( $ ){
var canClick = 2;
$("body").click(function () {
if (canClick%2==0) {
window.open("https://example.com/").blur();
window.focus();
canClick = canClick+1;
}
else {
canClick=canClick+1;}
});
});
The solutions I tried, I tried adding the code to footer.php. Didn't work. I added them using wp_enqueue. Didn't work.
UPDATE
In console am seeing that jquery is not defined. But I added the code only in footer.

Seems like, a Plugin interfered with my loading. The plugin disabled jquery.
Found that the code worked in some pages and didn't work in some pages.
Found out using the console.
Then later when disabling the plugin perfmatters, jquery worked fine.

jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax

I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!

If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!

Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!

Javascript code for Div slide down effect?

I've been trying to create a Div 'slide down' effect for quite a while now and I found this JS Fiddle which gives an example of exactly what I want; http://jsfiddle.net/L5P2Y/368/ . It uses this code:
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.content').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab)');
var h = ($cont.height() === 0) ? tgl_conts() : ( $cont.stop().animate({height: 0},1200) );
});
});
I've copied all the code, including the HTML and CSS into my own document in the hope that I can just manipulate that into what I want. All I have is this exact code that is on the JS Fiddle, but I still cannot get the JavaScript to work despite it working fine in this example. I've pasted it between the head tags between two script tags but it still does not function. Why isn't it working? Is it in the wrong place? I'm very new to JavaScript.
Thanks

You need to load your code snippet after jQuery 1.7 is loaded on the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
// you're code
</script>

Wordpress : Remove JavaScript code from search result page

I’m using a slideshow on a wordpress site (Layerslider).
It creates some javascript code inside the source code (like :
<script type="text/javascript">
var lsjQuery = jQuery;</script><script type="text/javascript">
lsjQuery(document).ready(function() {
// code from the slider
}
});
</script>
The issue is that when i search something on the website with the native search field, the javaScript is visible in the result. I've tried with a native theme (Twenty Fourteen) and the issue is still here.
See screenshot :
Do you know how to remove this code from the result ?

Modernizr.load()/yepnope : Error when loading JQuery before JS plugins

I'm using Modernizr to load all of my JS and CSS scripts in a specific order with callbacks functions to manage the dependences. But I meet a problem with the loading of Bootstrap witch need JQuery. I have 3 levels of loading :
1) JQuery lib
2) scripts using JQuery but not needing that the document is loaded
3) scripts using JQuery AND needing document loaded
I get the following error in Firbug :
TypeError: l is not a function bootstrap.min.js (ligne 4)
It seems that JQuery does not have time to load before Bootstrap.
Does anybody have an idea please? (to resolve this problem or to purpose another solution to make the same thing) Thanks for your help.
The code in head :
<script type="text/javascript" src="js/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
Modernizr.load([{
load: 'http://code.jquery.com/jquery-1.10.2.min.js',
complete: function(){
Modernizr.load([
//scripts using JQuery but not needing that the document is loaded
'bootstrap/js/bootstrap.min.js',
'js/plugins/respond/respond.min.js',
'js/plugins/jquery-ui/jquery-ui-1.8.23.custom.min.js',
'js/plugins/easing/jquery.easing.1.3.js',
'js/plugins/parallax/js/jquery.stellar.min.js'
]);
$(function(){
//scripts using JQuery AND needing document loaded
Modernizr.load([
{
test : Modernizr.touch,
yep : 'js/plugins/toucheeffect/toucheffects.js'
},{
test : $('.camera_wrap').length,
yep : {
'js':'js/plugins/camera/camera.min.js',
'css':'js/plugins/camera/css/camera.css'
},
complete : {
'js': function(){
$('.camera_wrap').camera();
console.log("plugin loaded!");
}
}
}
]);
});
}
}]);
</script>
[EDIT] alert(jQuery) at the beginning of the first callback function is OK so I don't understand why Bootrstarp don't run correctly...