squashdynamics

Last attempt….

I checked the console and I found an error in red…

Uncaught TypeError: Cannot read property 'style' of null
    at reset_text (custom.js?ver=1.0.0:112)
    at custom.js?ver=1.0.0:58

Does this help understand what’s going wrong at all?

Many thanks again

Martin

Hi Ben

I wish I had. That’s an SVG with the js included inside it – if you scroll to the bottom of that same page you’ll see the SVG that doesn’t have js in it.

Should I just give up on the recommended method (that we’re trying just now) and just use the combination file? I was under the impression that it was better to use the two file method.

Best

Martin

It feels like I have the things in place that are needed, and its almost there, but the thing that I CAN’T get my head around is…. how does it know to connect to the Javascipt when someone mouses over the SVG image on the page? The code has no mention of the filename, or anything connected with it. I’m missing something in my logic. I’m sorry, this is doing my head in.

Martin

Hi there,

This is what I was afraid of – I knew I wouldn’t get it to work. This is where I am:

1. I’ve got a folder named “js” in my child theme and the .js file inside it, as below;

my_site_name/wp-content/themes/u-design-child/js/custom.js

2. I’ve included the following code as instructed, underneath where it says “Begin adding your code below”.

/***************** BEGIN ADDING YOUR CODE BELOW: *****************/

/**
 * Enqueue Scripts and Styles
 */
add_action( 'wp_enqueue_scripts', 'squash_theme_enqueue_scripts_styles' );
function squash_theme_enqueue_scripts_styles() {

	// Include and enqueue your custom JS file
	wp_enqueue_script( 'squash.svg', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0.0', true );

}

3. My SVG is embedded in the page with the following tage;

<img class="style-svg" src="https://my_site_name/wp-content/uploads/2020/12/squash-Copy.svg" />

4. The SVG support settings are set to advanced mode.

When I go to the page, the image displays, but it is not interactive at all. However, it does work fine when I open the SVG and the js file is in the same folder as the SVG.

I can’t think of anything else and I’ve spent hours googling and playing around with it, but to no avail. I’m pulling my hair out.

Do I have to pay someone to fix this?

Martin

Does the code in the functions.php need the filename of the .svg file at all?

Thanks again

Martin

That was so quick! I’ve amended the functions.php but it still isn’t working. The image is showing but just not interacting with the js.

In SVG support settings I’ve enabled advanced mode – should there be anything else enabled?

Also, what should the href in the svg file be?

I can feel its close but I’m at a dead end I think..

Best

Martin

Hi!

Apologies for not having been back to you – I’ve had a lot on lately and have only just had a chance to get to this ?? I’ve tried what you advised but I’m still not getting it to work so far, but I think I’m not far away…

Through my hosting provider I went into my file manager, and went to the child theme and added the folder js, and copied the custom.js file into it.

I’ve already got a child theme installed and that’s what I’m using, so I don’t need to create one. I went to apprearance – theme editor – and selected the theme functions (functions.php). I scrolled down in that file to the line that says “Begin adding your code below” and entered the following code as given by you;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Enqueue Scripts and Styles
 */
add_action( 'wp_enqueue_scripts', 'squashmodel_theme_enqueue_scripts_styles' );
function squashmodel_theme_enqueue_scripts_styles() {

	// Setup Parent Theme Stylesheet
	$parent_style = 'parent-style';
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

	// Include and enqueue your custom JS file
	wp_enqueue_script( 'squash', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );

}

It didn’t work.

The svg file had the following line at the end;

xlink:href=”custom.js”

It didn’t work so I amended the href to the correct full file address for the custom.js, but it still didn’t work.

I hope this makes sense…. If you can see where I’ve went wrong that would be fantastic. I really appreciate your trying to help me!

Best regards

Martin

Hi Benbodhi,

Thank you so much for coming back to me so quickly! I never realised I’d have to code a bit to get this to work.

The problem is that I’m not a developer and I pretty much google issues to find a solution – So when you say include the custom.js file in the child theme I have no idea really how to do that. I can however find the functions.php section to edit – its how I code the next bit I’m stuck on, as I have no knowledge of php or js.

When I googled it I have found this code:
————————————————————————-
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( ‘style-name’, get_stylesheet_uri() );
wp_enqueue_script( ‘script-name’, get_template_directory_uri() . ‘/js/example.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpdocs_theme_name_scripts’ );
————————————————————————-
I’m going to ask some stupid questions now ??

1. Easy one I thnk… I start underneath the section that says “/***************** BEGIN ADDING YOUR CODE BELOW: *****************/”?
2. my theme is called u-design… so the first line would actually be:
function wpdocs_u-design_scripts() { ?
3. Where does the actual code from the .js file go? Do I copy and paste the text from the javascript file, or do I upload it somehow/ somewhere?
4. What is script-name? Is that the name of my .svg file?
5. Do I need to change the xlink:href script tag in the .svg file?

If this is too much help then just say – it’s just I need my hand held a little to get through this. Thanks again for at least reading!

Best regards

Martin