Javascript not working in Joomla article

Question

I'm trying to implement this (dannyvankooten dot com/jquery-plugins/mapz/) image panning script into a Joomla article. I tested it outside Joomla (http://tylypahka.tk/karttatesting/) and it's working perfectly. However, when I tried it inside a Joomla article, the panning doesn't work (http://tylypahka.tk/kartta).

I put the same exact code into Joomla template's head that I had on the test version:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js" type="text/javascript" ></script>
<script src="http://tylypahka.tk/js/jquery.mapz.js" type="text/javascript"></script>
<script type="text/javascript" src="http://tylypahka.tk/js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#map").mapz({
    zoom : true,
    createmaps : true,
    mousewheel : true
  });
});
</script>
<script type="text/javascript">$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });</script>
<style>
.map-viewport{ position:relative; width:860px; height:883px; overflow:hidden; background-color:black;}
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;}
</style>

And the same exact code to the article:

<div class="map-viewport">
  <div id="map">
    <img src="http://img42.imageshack.us/img42/8954/tylypahkanportit.png" width="1297" height="883" usemap="#html-map" class="current-level level map" />
  </div>
  <map name="html-map">
    <area id="squidhead" shape="rect" coords="311,494,434,634" href="http://www.image-maps.com/" alt="" title=""/>
  </map>
</div>

jQuery automatically loads in Joomla site so it shouldn't be the problem. Any ideas what I'm doing wrong here?

All suggestions and help will be much appreciated!

please check if your template is actually loading jQuery and not MooTools. MooTools also uses the $() function name, which may cause your code to stop working. — Hazzit, Mar 02 '13 at 15:23
Yes, it's loading jQuery. I don't use MooTools at all on my site, but thanks :) — Ilari, Mar 02 '13 at 17:56
The fact that you don't use MooTools doesn't mean that it isn't loaded, and by default it will prevent you from using jQuery with `$`. Check error console in firebug — Marko D, Mar 02 '13 at 18:00
Thanks, I'll try to get rid of loading MooTools when it's unnecessary — Ilari, Mar 02 '13 at 22:57

Riccardo Zorn · Accepted Answer · 2013-03-02T22:47:27.580

You are using $ which is the shorthand code for jQuery, but Joomla also loads mootools, which is assigned the very same selector: so just change all $() to jquery() and you should get it working. You only need to do this at the outer level, then pass $ as a param:

jQuery(function($){
  // inside this handler you can use the $ since you passed it as a parameter to the function:
  // btw, this is nicer than jQuery(document).ready...
  $('#someid').show();
});

score 0 · Answer 2 · answered Mar 02 '13 at 15:54

It would be best to include the code in your head using Joomla coding standards also also check that it's has not been importedd already as this will cause conflicts.

So, firstly, download Sourcerer, which will allow you to add code to your articles.

Then, add the following using Sourcerer:

$document = JFactory::getDocument();
if(!JFactory::getApplication()->get('jqueryui')){
     JFactory::getApplication()->set('jqueryui',true);
     $document->addScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js");
}
$document->addScript("https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js");
$document->addScript("http://tylypahka.tk/js/jquery.mapz.js");
$document->addScript("http://tylypahka.tk/js/jquery.maphilight.js");
$document->addScriptDeclaration('
$(document).ready(function() {
  $("#map").mapz({
    zoom : true,
    createmaps : true,
    mousewheel : true
  });
});
');
$document->addScriptDeclaration('
$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });
');

$document->addStyleDeclaration(.map-viewport { position:relative; width:860px; height:883px; overflow:hidden; background-color:black;}
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;});

Hope this works and helps

Thanks for your answer, but the result is same. It looks like the Javascript doesn't see for some reason that there is a div called map. And also, the styling didn't apply when it was set via Javascript. So it's clearly something wrong with Javascript and Joomla. — Ilari, Mar 02 '13 at 17:40

Javascript not working in Joomla article

2 Answers2