Getting jQuery to work in new build WordPress theme - javascript

I am new to jQuery and have tried to get scripts to work to no avail. I would like to simplify my script to just see that my theme is in fact recognizing my scriptfile.js
My js file is just:
var success = 'SUCCESS!';
jQuery('nav .home a').hover(function()
{
echo(success);
});
my functions.php file has this:
<?php
function add_my_script() {
wp_enqueue_script(
'preview',
get_template_directory_uri() . '/js/scriptfile.js',
array('jquery')
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
?>
My header.php contains:
<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery(document).ready(function(jQuery){
});
//--><!]]></script>
I am not getting any errors in firebug, but no output either.

Not sure if this is the problem but first of all your selector is not exactly right.
var success = 'SUCCESS!';
jQuery('nav .home a').hover(function(){ ... });
nav should be .nav for class or #nav for id
echo(success);
Unless echo() is a function somewhere it will not work. If you want to show an alert message use alert(success)

I believe what's happening is that your script file is being included fine but the way it's written the hover event attachment will happen before the DOM is ready. Try this, simply say alert(success); in your js file and see if the alert pops up. If it does, then wrap the hover event handler in a function in your script file and call that function from the document.ready function handler in your header.php. By the way, what's the echo function? Probably you are looking for alert.

Related

Call JS function in Wordpress, noob question?

I have simple JavaScript function
function hide()
{
document.getElementById('div_sc_1').style.display = "none";
}
in my themefolder/js file I put
function add_scripts(){
wp_enqueue_script( 'quest',
get_stylesheet_directory_uri().'/js/quest.js',
array('jquery'),
'1.0.0',
false
);
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
in my function.php.
I can call my function from an <input type="submit" onClick="hide();">
BUT I want make something like that in my function.php
<?php
if(isset($_GET[xxx]))
{
<script>
hide()
</script>
}
?>
I don't understand why it doesn't work.
Since you are adding it directly in the dom, so It may run before the target element even exists, Javascript requires an element to available first in order to do its job.
You have to add it once the document is fully loaded so that it can work.
Maybe try this jQuery(document).ready(function($) { hide(); });
If you add it after the document is ready then Javascript will be able to find your element and execute related functions.

wordpress jquery not working even in no-conflict mode

i want to show an alert box when a div is clicked in wordpress
in functions.php i wrote the code
function load_script_files(){
wp_enqueue_script('myjs',get_stylesheet_uri().'/js/scripts.js',array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'load_script_files')
;
In scripts.js i wrote the following js code
jQuery(".click-div").click(function(){
alert("The div was clicked.");
})
But it is not showing any alert boxes. What could be the problem?
Try this code.
you need to use get_stylesheet_directory_uri() not get_stylesheet_uri()
get_stylesheet_uri() it return stylesheet url.
function load_script_files(){
wp_enqueue_script('myjs', get_stylesheet_directory_uri().'/js/scripts.js',array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'load_script_files');
If both files are really loaded (check network tab in your browser console) I suspect the problem is that you try to attach the event listener to an object that does not yet exists.
Simple solution to that is to execute your code when DOM is loaded completely:
jQuery(document).ready(function(){
jQuery(".click-div").click(function(){
alert("The div was clicked.");
})
});

Execute a document.ready in functions.php

I need to run a script after a hook is fired in my functions.php file. Im using a wordpress mailchimp plugin, I need to do some text inserts and display = "none", etc, in the html:
add_action( 'mc4wp_form_success', function() {
// do something
echo '<script type="text/javascript">',
'console.log("starting....");', // this works
'document.getElementById("mailchimp-is-subscribed").style.display = "none";',
'document.getElementById("mailchimp-success-form").style.display = "block";',
'console.log("end");',
'</script>';
});
The error I got was style is null. I assume the document is not ready? $ does not work. Am I doing this wrong? I need to run that code after that hook is called. Putting the code in .js file works great. Thanks
You can add your code as an on DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function () { ..your_code... }, false);
Check this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Why this simple jQuery 'addClass' is not working in this site?

I've tested the jQuery addClass : fiddle
That works fine.
The jQuery adds a class called lazy to the image.
Now I want to do the same in a wordpress site.
So I've added following code in my functions.php
function smart_magazine_scripts_styles() {
wp_enqueue_script('lazyloadscriot', get_template_directory_uri() . '/js/jquery.lazyload-any.min.js', array(), '1.0', true);
wp_enqueue_script('custom-by', get_template_directory_uri() . '/js/custom-by.js', array(), '1.0', true);
}
When I see the site source code I see both lazyload-any.min.js and custom-by.js are loaded fine.
custom-by.js has following line only :
jQuery('img').addClass('lazy');
But when I check the images there is no class called lazy is added to them.
Why is that?
Here is the site
Are you sure your document is ready? Try the following:
jQuery(document).ready(function() {
jQuery('img').addClass('lazy');
});
Have you tried this instead
$(function()
{
$('img').addClass('lazy');
});
If you are trying to target an element with the class img you need to use .img or if you are trying to target an element with the id img you need to use #img
To load jQuery from Google just put this line in your HTML file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
When your function is executed jQuery may no have not been loaded yet.
First, try to put your JavaScript inside a $(function() like this:
jQuery(function(){
jQuery('img').addClass('lazy');
});
Of course if you wait for the DOM to be ready and then add the class lazy to your images there is no point. The best would be to add the class in the static templates or with PHP.

Using a jQuery fullscreen image gallery in Wordpress

I have been trying to get malihu's Simple jQuery fullscreen image gallery ( http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery ) to work with my Wordpress theme, but for some reason I'm having trouble getting the script to run. I'm calling both the CSS and javascript normally as with other plugins in the functions.php file, but the javascript doesn't seem to be taking effect to make the gallery. I currently have the following code to call the CSS in the header and the javascript in the footer. Am I missing something?
function malihu_gallery() {
if (!is_admin()) {
// Enqueue Malihu Gallery JavaScript
wp_register_script('malihu-jquery-image-gallery', get_template_directory_uri(). '/js/malihu-jquery-image-gallery.js', array('jquery'), 1.0, true );
wp_enqueue_script('malihu-jquery-image-gallery');
// Enqueue Malihu Gallery Stylesheet
wp_register_style( 'malihu-style', get_template_directory_uri() . '/CSS/malihu_gallery.css', 'all' );
wp_enqueue_style('malihu-style' );
}
}
}
add_action('init', 'malihu_gallery');
I'm thinking that I may need to ready the script with something similar to the following, but not sure if I'm on the right track.
function gallery_settings () { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#container').malihu_gallery();
});
</script><?php
Any help greatly appreciated!
Thanks
If you want any event to work in jQuery you will want it inside document ready. This will load it after the DOM is loaded and before the page content is loaded.
$(document).ready(function() {
// your stuff inside of here
});
Not sure based on what you have shown above but try some basic debugging, see if you can call functions when you paste your code into the console. Or if you want to create a fiddle I will take a look.

Categories

Resources