I've got a cool javascript-driven animation that I'd like to use as the background for all of my theme's h1 tags. How would I go about automatically inserting the js into the tags?
Kimber
I am not sure your users will thank me for helping you add a "cool animation" everywhere, but ...
The general technique in http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer can be used to change how Moodle outputs h1s (modify the $OUTPUT->heading method).
Alternatively, you could write some JavaScript that runs in the browser and attaches the admination to every h1. (Y.all('h1').each(...)). Then you would just need to get that JavaScript run on every page ($PAGE->requires->js_init_call somewhere in your layout template.)
What Tim says is the best way, however, I would like to know why Javascript? What exactly does this animation do and how much script is involved?
Cheers
Mary
It's an animation of balls that move away from the user's mouse. The user will have to deliberately interact with them to create any movement, and I promise it's appropriate for the context. The script is approximately 30 lines.
My question was probably oversimplified. I really only want to target h1s in the #region-main section, and probably only on the course main page. Can I be that specific when overriding a renderer?
I can call the Javascript from within the label containing the h1 when I create the course, but I can't expect the teacher to be able to do the same thing if she adds another h1. That's why I'd like to build it in if it's practical. Thanks for your help!
Hi Kimber,
Try this...
In the theme you are using or want to use, add a directory and name it javascript and then add the javascript to it providing the javascript is just that and NOT the <script></script> tags as those are not needed. You just need the raw code itself. If your Javascript code does not have a name well make one up, call the file animate.js
That done you need to tell Moodle that you want to use a Javascript file called 'animate' and call it from the footer of the page. To do this you need to add this line to your theme's config.php
like so...
$THEME->javascripts_footer = array('animate');
That done, next you need to tell Moodle where you want the animate script to be triggered. It's this part that could be easy or difficult depending on the way the script works.
I need to know more about the script to explain more.
Mary
30 lines does sound like a lot.
You can implement this without overriding the renderer, and this might be preferable if you want to easily upgrade your site in the future.
You need to add the script to your theme (footer), along with any image files used by the animation. See http://docs.moodle.org/dev/Themes
When you init the script, you need to first select the correct header tags, and you should use body tags to do so, such that you are only selecting, for example, .pagelayout-frontpage #region-main h1.
As Tim mentioned, simpleYUI is now enabled in Moodle 2.4, so if you have a 2.4 install you can use YUI to select from the DOM within your theme JS, without loading it in a module: http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/
If you have something before M2.4, you'll need a different way to select the correct nodes. You can load jQuery or another JS lib in the theme, or write old-fashioned JavaScript selectors.
If you're using images in the animation, then one of your hurdles will be providing the script with correct links to the image files in the theme. You can use the M JavaScript object to get the wwwroot you need, and then add on the path to the image file in your theme's /pix dir. As in, var imagePath = M.wwwroot + "/theme/pix/myImage.png";
Be sure to test your implementation with Theme Designer Mode turned off, using Purge All Caches to clear the theme cache, or manually deleting the theme's cached files from /moodledata/cache/themes/. Use the developer console provided by your browser, and watch for JavaScript errors.
You can implement this without overriding the renderer, and this might be preferable if you want to easily upgrade your site in the future.
You need to add the script to your theme (footer), along with any image files used by the animation. See http://docs.moodle.org/dev/Themes
When you init the script, you need to first select the correct header tags, and you should use body tags to do so, such that you are only selecting, for example, .pagelayout-frontpage #region-main h1.
As Tim mentioned, simpleYUI is now enabled in Moodle 2.4, so if you have a 2.4 install you can use YUI to select from the DOM within your theme JS, without loading it in a module: http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/
If you have something before M2.4, you'll need a different way to select the correct nodes. You can load jQuery or another JS lib in the theme, or write old-fashioned JavaScript selectors.
If you're using images in the animation, then one of your hurdles will be providing the script with correct links to the image files in the theme. You can use the M JavaScript object to get the wwwroot you need, and then add on the path to the image file in your theme's /pix dir. As in, var imagePath = M.wwwroot + "/theme/pix/myImage.png";
Be sure to test your implementation with Theme Designer Mode turned off, using Purge All Caches to clear the theme cache, or manually deleting the theme's cached files from /moodledata/cache/themes/. Use the developer console provided by your browser, and watch for JavaScript errors.
You are going to have trouble calling JS from a label. JavaScript is often stripped from HTML content. Or filters mess with it, inserting emoticons where there should be a parens and a semicolon. You're better off externalizing your init.