Javascript not getting loaded - javascript

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.

Related

Jquery on Wordpress Frontend not woorking

Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js

Javascript conflict in Wordpress between Theme and Gallery Javascript

I have been working on a specific justified gallery for more time than I care to admit, but I have finally managed to get the gallery looking how I need and all the javascript working.
I did all my testing in Dreamweaver but when it finally came to moving what I had into my Wordpress website there seems to be a conflict with some of the javascript already on the site and the javascript I need to make my gallery work.
I have included all my custom javascript into the footer as follows:
JAVASCRIPT
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">
<script>
jQuery(document).ready(function($) {
$('.x-nav > li.current-menu-item').removeClass("current-menu-item");
});
</script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
<script>
$('#liveDemo').justifiedGallery({
rowHeight : 190,
sizeRangeSuffixes: {
'lt100':'_t',
'lt240':'_m',
'lt320':'_n',
'lt500':'',
'lt640':'_z',
'lt1024':'_b'
}
}).on('jg.complete', function () {
$(this).find('a').colorbox(colorboxConf);
});
</script>
I have figured out What is causing the conflict is the jquery.min.js It is stoping Revolution Slider from working and also causing a problem with a testimonial slider (it shows all the slides at once), and my fixed nav-bar is no longer fixed.
Is there a way to find out what is causing the conflict?
Website in question is www.dangoodeofficial.co.uk
Thank you,
Dan
You shouldn't include Javascript libraries like jquery.justifiedGallery.min.js and jQuery in the footer by a link; you need to correctly enqueue Javascript in WordPress in the theme's functions.php file. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script
As a result, you have two copies of the main jQuery library being loaded.
The jQuery document ready functions can be added in the header or footer with <script type="text/javascript">**</script> tags.
You've got lots of Javascript errors in the console. Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see what javascript is loading on your site and the errors.
The cause of the conflict could be the inclusion of the jquery.js file. You don't need to include jquery separately in your plugin. By default, WordPress is shipped with a jquery file and it is available for use off the shelf.

Troubleshoot jquery error with dropdown menu

There is some sort of jquery conflict that I can't get my head around. I have a script that's working by itself here:
http://www.pitestiretailpark.ro/working.html
When the same script is inserted into a Joomla page (along with html/css code), the dropdown menus don't work.
http://www.pitestiretailpark.ro/test/
I am not a programmer, I know my HTML but have little knowledge of jquery. The standalone script has been copied from another page, stripped bare (but working!) and when I try to insert into Joomla, it stops working.
there is another lib using the $ sign as a function.Use the jQuery.noConflict() method like this;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// your code
});
replace $ in your scripts with jQuery, also call it on document ready :
jQuery(document).ready(function() {
jQuery('.div_btn_menu').hover(
function() {
jQuery(this).children('.div_sous-menu').css('top',$(this).children('.btn_menu').height()+'px')
jQuery(this).css('z-index',10000000)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeIn(200)
},
function() {
jQuery(this).css('z-index',1)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeOut(200)
}
);
})

Script works only on homepage

I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.
Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.

Javascript works in HTML but not javascript file

my javascript code works withing a my html file but when I move it to a javascript file of its own, it doesn't work. I checked and it is not an issue with the file location. And it doesn't work in any browser. Please help. Thank you.
My HTML calling the file:
<script type="text/javascript" src="js/click-dropdown.js"></script>
Here is my javascript code:
$(document).ready(function() {
$('.prospectus-click').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
//$('.prospectus-form > div').parent().removeClass('on');
$('.prospectus-arrow').removeClass('prospectus-arrow-up');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.table-wrap').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.prospectus-click').next().is(':hidden') == true) {
//ADD THE IMGON CLASS TO THE IMAGE
//$(this).find('.accimge').addClass('imgon');
//ADD THE ON CLASS TO THE BUTTON
$('.prospectus-arrow').addClass('prospectus-arrow-up');
//OPEN THE SLIDE
$('.prospectus-click').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.prospectus-click').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.table-wrap').hide();
$('.live-consult').click(function() {
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.live-consult-div').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.live-consult').next().is(':hidden') == true) {
$('.live-consult').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.live-consult').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.live-consult-div').hide();
});
The Javascript file you have written is using the jQuery library. In order for this to work you must load the jQuery library prior to your script.
You can download jQuery from here http://jquery.com/
I would also suggest for performance that you use the minified file and make your scripts load at the bottom of your html page before the closing body tag.
<script type="text/javascript" src="js/jquery-min-1.11.0.js"></script>
<script type="text/javascript" src="js/click-dropdown.js"></script>
As Nevett and David mentioned suspected that you might be including/loading your 'click-dropdown.js' file prior to inclusion of jquery library. But if you are not sure in which order you have the included your script, then simple way to detect is either check you dev console for error "ReferenceError: $ is not defined" or just simply write
alert('my $ is '+typeof $);
as the very first line of your script. If alert says undefined then include your script after jquery. If alert says function then please describe what is the exact problem you are facing; any error, warnings.

Categories