Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom JavaScript #1504

Closed
Andy-ABTec opened this issue Jan 28, 2018 · 8 comments
Closed

Custom JavaScript #1504

Andy-ABTec opened this issue Jan 28, 2018 · 8 comments
Labels
Status: Feedback Needed Type: Support

Comments

@Andy-ABTec
Copy link

Hi again, sorry to be a pest, hopefully this will be the last time for a while...

BTW slugify worked like a charm for generating menu id tags, so many thanks for that

I've created a custom .js file containing my jQuery code in /assets/js/ which also works...

The problem I'm having is finding the best place to load the script.

https://mmistakes.github.io/minimal-mistakes/docs/javascript/ says: -

You can also add scripts to the <head> or closing </body> elements by adding paths
to following arrays in _config.yml.
Example:
head_scripts:
  - https://code.jquery.com/jquery-3.2.1.min.js
  - /assets/js/your-custom-head-script.js
footer_scripts:
  - /assets/js/your-custom-footer-script.js

So I created a head_scripts array in _config .yml viz:

# Custom JavaScript
head_scripts:
  - /assets/js/tvRenameSpecific.js

And NOTHING happens. The code needs to be available on every page including the splash and manual pages.

I've obviously done something silly like put the array in the wrong place - any help/advice gratefully received!
@mmistakes
Copy link
Owner

Link to a public repo so I can debug or it didn't happen 😝

@mmistakes
Copy link
Owner

mmistakes commented Jan 28, 2018 •
edited
Loading

Also you may be having more of a "web development" and JavaScript issue which I can't really help much with.

"And NOTHING happens" is extremely vague.

  • Nothing happens as in your script isn't being loaded (verify this by looking at your HTML source) or nothing
  • Or nothing happens as in your script loads but it's faulty and doesn't do what you expect?

Sounds like you wrote some custom jQuery. And for that to work it needs to execute after jQuery has loaded.. which happens right before the closing </body> element near the footer.

You'll need to load your custom script after jQuery, so either squash it all together with the other scripts into a new main.min.js, or add a footer script array that has it.

If you add the array you'll need to include all of the scripts as using the array will override the use of main.min.js. You'll need to load jQuery first, then all of the plugins the theme uses, followed by main.js, and finally your custom stuff.

Note: If you assign footer_scripts the theme’s /assets/js/main.min.js file will be deactivated. This script includes jQuery and various other plugins that you’ll need to find replacements for and include separately.

It's really up to you how you want to handle it.

@Andy-ABTec
Copy link
Author

Andy-ABTec commented Jan 28, 2018 •
edited
Loading

Apologies michael, my jquery works if I put a script block at the end of /_includes/scripts.html to load it, but I was trying not to customize the existing files and use the "approved solution".

Unfortunately this is only on my local build at the moment (until I get it working properly.

You can see the hacked version described above live at http://test.ab-tec.co.uk, repo is https://github.com/Andy-ABTec/minimal-mistakes. It's processing all the download links and the version number on the splash screen

Thank you for the quick reply BTW...

@mmistakes
Copy link
Owner

You have a typo in your scripts.html include. Missing a > on your closing script tag on the custom stuff you added.

@Andy-ABTec
Copy link
Author

Andy-ABTec commented Jan 28, 2018 •
edited
Loading

oops... Thanks, fixed that at least...

@mmistakes
Copy link
Owner

And if you want to load your script without having the include see my notes above. You have to execute your scripts after jQuery loads or else it will fail.

That's what happens when you tried to put it in the head.

@Andy-ABTec
Copy link
Author

Right, I'll go try again, thanks for your time...

@Andy-ABTec
Copy link
Author

Michael, you're a STAR,.. Thank you,!

@mmistakes mmistakes mentioned this issue Mar 12, 2018
Closed
6 tasks
@mmistakes mmistakes mentioned this issue Mar 26, 2018
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Feedback Needed Type: Support
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mmistakes @Andy-ABTec