3

I want to create a custom module to insert this .js javascript into my joomla site; joomla 3.x version

http://bigspaceship.github.io/shine.js/

how can I do to create my custom text to appear into a module into joomla?

thanks for your help folks!

  • 1
    What are you asking for here, to inject the Javascript file on to every page or to add custom text to a module? – Lodder Aug 11 '14 at 17:59
3

There are several ways to achieve this in Joomla:

1. You might want to take a look at a plugin called Sourcerer from NoNumber:

Sourcerer enables you to place PHP and any kind of HTML style code (including CSS and JavaScript) right into your content! Not only in your articles, but also in sections, categories, modules, components, META tags, etc.

Then you can add javascript directly in the WYSIWYG editor (like TinyMCE), and the plugin will parse the code as needed. Example:

{source}
<script src="http://bigspaceship.github.io/shine.js/"></script>
{/source}

Other similar extensions can be found here: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content

2. Another option is to install a custom module from http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules. These are special modules that won't remove your code.

Edit:

For your specific requirements, I created a very quick n' dirty module to display the MouseFollow demo included in the package. You can find the module here: http://dospuntos.no/extensions/mod_addShine.zip. Simply install it like any other Joomla module and publish it to any page. (Provided as is, feel free to modify the code if needed).

Here's the code from the default.php file:

<?php
/**
* @package    Add Shine.js
* @author     Dos Puntos Design
* @copyright  Copyright (C) 2014 Dos Puntos Design
* @license    http://www.gnu.org/licenses/gpl-3.0.html
**/

// No direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('script', JUri::root() . 'media/mod_addShine/js/shine.min.js');       // For JS files
$text = $params->get('shine_text');
?>
<style>
.demo-text {
  margin: auto;
  width: 100%;
  color: #fcfcfc;
  text-transform: uppercase;
  text-align: center;
  font-size: 8em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
</style>
    <h1 id="headline" class="demo-text"><?php echo $text ?></h1>
    <script type="text/javascript">
      // use new shinejs.Shine(...) if Shine is already defined somewhere else
      // var shine = new shinejs.Shine(document.getElementById('headline'));
      var shine = new Shine(document.getElementById('headline'));
      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }
      window.addEventListener('mousemove', handleMouseMove, false);
</script>
  • thanks for your answer @johanpw, how should I do to insert this javascript bigspaceship.github.io/shine.js into a module? It also has header /css and /js... – dhacohen Aug 12 '14 at 16:46
  • I want this bigspaceship.github.io/shine.js to be a "banner" in the frontpage of a webpage, but I want it to be a module, so I can choose so where to enable it and where not to. – dhacohen Aug 12 '14 at 16:51
  • Thanks for te job @johanpw... will try it and let you know... thanks a lot for your time and effort.. and for your quick response! – dhacohen Aug 12 '14 at 17:44
  • Hi @johanpw , that was exacly what I wanted to do... question? 1) could you add the second text line in the module, so I can add text like in the example where it says "A library for pretty shadows." in bigspaceship.github.io/shine.js 2) could you teach me how you did the module? if so, how can I get in touch with you? – dhacohen Aug 12 '14 at 23:19
  • @dhacohen I'm glad it worked :) I'll see if I can update the module, but I can't promise anything. Feel free to contact me on Skype: dospuntosdesign – johanpw Aug 13 '14 at 3:33
3

I Assume that your current html editor is TinyMCE.

Go to Administrator -> Extensions -> Plugin Manager -> Editor - TinyMCE

Delete the word script if it is listed in the "Prohibited Elements" field and save the plugin.

Then create a new "Custom HTML Module" by Going to Administrator -> Extensions -> Module Manager -> +New -> Custom HTML

Click on the Toggle Editor and Add the code like this:

<style>
    /* In HTML5 you can use style tag inside the body. */
</style>

<script type="text/javascript" src="path/to/shine.min.js"></script>
<script type="text/javascript">
    var shine = new Shine(document.getElementById('my-shine-object'));
    window.addEventListener('mousemove', function(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
    }, false);
</script>

Then fill the "Title" field, select the "Position" and enable the module. You can select a desired module assignment as well. Then save it.

  • thanks for your answer @Fari, how should I do to insert this javascript bigspaceship.github.io/shine.js into a module? It also has header /css and /js... – dhacohen Aug 12 '14 at 16:45
  • I want this bigspaceship.github.io/shine.js to be a "banner" in the frontpage of a webpage, but I want it to be a module, so I can choose so where to enable it and where not to. – dhacohen Aug 12 '14 at 16:50
  • I edit my answer. Yes, a Custom HTML module is a module and you can assign it to specific pages. – Farahmand Aug 12 '14 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.