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.

Why does my JQuery fading slider not work on any IE type?

My JQuery slider does not work in IE(in any documentmode). How could I fix this? My code slides down a div of text after a button is pressed(it fades in nicely too). The IE console gives me this error: "Object doesn't support property or method 'fadingSlideToggle'".
(function ($) {
$.fn.fadingSlideToggle = function ($el, options) {
var defaults = {
duration: 500,
easing: 'swing',
trigger: 'click'
};
var settings = $.extend({}, defaults, options)
$selector = $(this).selector;
return this.each(function () {
var $this = $(this);
$(document).on(settings.trigger, $selector, function (e) {
e.preventDefault();
if ($($el).css('display') == 'none') {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
} else {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
}
});
});
};
})(jQuery);
I wonder which part is not supported, and how to fix it. Thank you a lot!
EDIT:
Here is the code where I call the function(it works on firefox and chrome):
<button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span> </button></br>
<nav role="navigation" id="toggleEl">/*non relevant html*/</nav>
The rest of the javascript:
$(function(){
$('#clickedEl').fadingSlideToggle('#toggleEl');
});
The JSFiddle that does not work in IE: http://jsfiddle.net/3ymvv

The problem seems to come from jQuery 1.10.1 (#13936 #13980). Here's the error we got :
Access Denied - jQuery-1.10.1.js, line : 1513, column : 2
And the related lines :
// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) { // :1513
parent.attachEvent( "onbeforeunload", function() {
setDocument();
});
}
This happens early, and possibly prevent your script to be loaded.
Update jQuery to the 1.11.0 version (or more) and you'll see it works.

When I was testing in windows XP, ie8 and an old version of firefox exhibited the same behaviour (it suddenly appearing when #clickeEl first clicked) . Removing the <nav> element and just using the <ul> element seemed to fix it. Then I realized that the problem was the tag <nav> which is unknown to ie8 and firefox. As described in this article, the browsers do not know that <nav> is a block element. So adding
nav { display:block }
fixed the problem on me in ie8 in windows xp.
Demo
Actually, not sure how compatible this is, but it seems the plugin is doing some unnecessary stuff, since it's using jQuery. So I added it a bit below. (Mostly it bothered me you have to set display:none in CSS with an ID instead of the plugin itself.
Proposed Changes

Here we clearly do not know where the problem might be.
Your code looks fine.
Please show us the code where you use your plugin
There where you use your plugin, check if the plugin is defined console.log($.fn.fadingSlideToggle)
check that the object you are calling your plugin on is actually a valid jQuery Object.
console.log(obj instanceof jQuery) or (!!obj.jquery && typeof obj.jquery === "string")
a jquery object usualy has a property called jquery that has the current jQuery version in it. Also the jquery object is usually an instance of the jQuery Object itself. But keep in mind it is possible that using .noconflict() there is no global variable jQuery or $

The problem is the jQuery loading in the fiddle. Just load jQuery from a CDN and then initiate your plugin.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// your plugin
</script>
Now it works fine in IE 8+.

Do you by any chance have a html element with the id of fadingSlideToggle? That could be the issue as explained here: https://stackoverflow.com/a/14003088/561957

Issues with .mobile.loadPage and external page in Jquery Mobile

In my jquery mobile application I have one page that I want to load external content.
Trying to follow the docs, and my code doesn't produce any script errors, but my external content does not load.
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
//Initialize page container per docs
$("#staff-directory-container").pagecontainer({ defaults: true });
//Get external content into DOM
$.mobile.loadPage("http://another.domain.com/myContent.html", {
pageContainer: $('#staff-directory-container')
});
});
Thanks in advance for any help offered....
Chris

To bind events in jQuery Mobile, use pagecreate which is equivalent to .ready(). To load an external page, use .pagecontainer("load", "target", { options }) as .loadPage() is deprecated and will be removed in jQM 1.5.
In your case, $.mobile.pageContainer is $("#staff-directory-container"). And note that Ajax should be enabled.
$(document).on("pagecreate", "#pageID", function () {
$("#loadBtn").on("click", function () {
/* define new pagecontainer then load */
$.mobile.pageContainer = $("#staff-directory-container").pagecontainer();
$.mobile.pageContainer.pagecontainer("load", "myContent.html");
});
});

$(document).ready only firing once in IE but works in Firefox

this is driving me nutz. Just another issue that works fine in everything but IE -aaargh. Anyway, I have some script that should run everytime the page is loaded. Works fine in Firefox but in IE it only executes the first time I go the page. If I leave the page and then go back it will not execute.
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajaxSetup({ async: false });
var leftHeight = $('#Interface_Content').height();
$('#Interface_Nav').css({ 'height': leftHeight });
//This line calls the Controller and populates the corresponding MEssageDesc Drop down
$.get('#Url.Action("GetCompanyName","Company")', {}, function (data) {
$('#Interface_Header_CONAME').replaceWith(data);
});
$.get('#Url.Action("GetLoginStatus", "Company")', {}, function (data) {
if (data == 'True') {
$('#Nav_Links').show();
}
else {
$('#Nav_Links').hide();
}
});
});
</script>

If there is no compulsion on using JQuery-1.4.4, I suggest you replace it with JQuery-1.8.2 the least. With JQuery 1.8.2, I wrote a sample app and ran it on IE 8,9 and it worked fine.
P.S - Before you jump and download the latest JQuery 1.9, fair warning there are quite a few major changes they have made like replacing $.browser with feature detection, etc which might create an issue if you are using it.

Overlay pop up box using jquery1.6.1..?

I had a script for overlay popup box using jquery1.4.1 using modal, which returns some function in my page getting not working which are used by jquery1.6.1..
So, when I add jQuery 1.4.1 script for displaying pop up box.. the functions working through jQuery 1.6.1 got interrupted..
How can I get popup box using jQuery 1.6.1?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal();
}
function hideModal() {
$.modal.close();
}
</script>

Your problems may be
1) Certain functions in jquery 1.4.1 have been deprecated in 1.6.1
One solutions is , please upgrade the plugin to newer version , it may solve your problem
Otherwise you need to edit the plugin to accommodate the new functions ,its risky

jQuery latest is 1.7.1. Are you sure your page is loading 1.6.1? That's beside the point, though: what may be happening here is that your scripts are firing before the document is ready. No idea why it worked for 1.4.1 since that's so long ago (as duke mentions, deprecated functions?), but you should wrap this in a document ready function to see if it works:
$(document).ready( function() {
// your existing code
});

The code looks fine for versions 1.4+, so I don't think you've got a deprecation issue.
As Greg said, you haven't invoked the document ready method. You also haven't invoked the modalTest() function, so the simplemodal $('').modal method won't fire.
$(document).ready(function(){
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal({ /* Pass simplemodal config here*/ });
}
function hideModal() {
$.modal.close();
}
modalTest();
});