Ciao a tutti,
sono nuovo nel forum e da poco mi sono addentrato nel mondo di Joomla. Mi presento: mi chiamo Francesco e sono di Roma
Avrei un problema da risolvere.
Sto creando un sito internet nella cui home page sto implementando un'animazione interattiva della mappa dell'Italia cliccabile sulle varie regioni per poi mostrare la regione selezionata ... utilizzo come javascript sia jQuery che kinetic-v4.3.3.min.
Ora la pagina web html contenente la sola mappa interattiva (non create con joomla) funziona correttamente. Ho riportato il codice html all'interno di joomla e non riesco più a far visualizzare la regione selezionata.
Ogni volta che passo col mouse su una regione, in debug su Chrome ricevo il seguente errore:
Uncaught TypeError: jQuery(...).tooltip is not a function(anonymous function) @ (index):28j @ jquery.min.js:2k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2
mentre se clicco su una regione ricevo questi altri due errori:
Uncaught TypeError: $ is not a function(anonymous function) @ (index):318Kinetic.Node._executeHandlers @ kinetic-v4.3.3.min.js:28Kinetic.Node.fire @ kinetic-v4.3.3.min.js:28Kinetic.Node._handleEvent @ kinetic-v4.3.3.min.js:28Kinetic.Stage._mousedown @ kinetic-v4.3.3.min.js:33(anonymous function) @ kinetic-v4.3.3.min.js:33
Uncaught TypeError: $ is not a function(anonymous function) @ (index):295Kinetic.Node._executeHandlers @ kinetic-v4.3.3.min.js:28Kinetic.Node.fire @ kinetic-v4.3.3.min.js:28Kinetic.Node._handleEvent @ kinetic-v4.3.3.min.js:28Kinetic.Stage._mouseup @ kinetic-v4.3.3.min.js:33(anonymous function) @ kinetic-v4.3.3.min.js:33
Avete qualche suggerimento da darmi?
Vi ringrazio
Qui di seguito il codice html utilizzato:
<html>
<head>
<script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="templates/myTemplates/js/InteractiveItalyMapData.js"></script>
<script type="text/javascript" src="templates/myTemplates/js/InteractiveLazioMapData.js"></script>
<script type="text/javascript" src="templates/myTemplates/js/InteractiveCampaniaMapData.js"></script>
<script type="text/javascript" src="templates/myTemplates/js/kinetic-v4.3.3.min.js"></script>
<link href="templates/myTemplates/css/mapStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="containerItaly"><>
<div id="containerLazio" style="display:none"><>
<div id="contextMenu" style="display:none">
<div id="contextMenuH"><>
<div id="contextMenuB"><>
<>
<script type="text/javascript">
function drawTooltip(tooltip, x, y, text) {
tooltip.setText(text);
var maxRight = 530;
if (x > maxRight) {
x = maxRight;
}
tooltipBackground.setPosition(x, y);
tooltipBackground.show();
tooltipBackground.getLayer().draw();
tooltip.setPosition(x, y);
tooltip.show();
tooltip.getLayer().draw();
//set background width
tooltipBackground.setWidth(tooltip.getWidth());
;}
var stageItaly = new Kinetic.Stage({
container: "containerItaly",
width: 800,
height: 600
});
var mapLayerItaly = new Kinetic.Layer({
x: -188,
y: -32,
scale:1,
opacity: 0.4
});
var stageLazio = new Kinetic.Stage({
container: "containerLazio",
width: 800,
height: 600
});
var mapLayerLazio = new Kinetic.Layer({
x: 0,
y: 0,
scale:1,
opacity: 0.4
});
/*
* throttle the tooltip layer down a bit
* so that the tooltip doesn't lag behind the
* mouse too much on redraw
*/
var tooltipLayerItaly = new Kinetic.Layer({
throttle: 50
});
var tooltipLayerLazio = new Kinetic.Layer({
throttle: 50
});
var tooltipBackground = new Kinetic.Rect({
height: 25,
fill: "white",
stroke: "black",
visible: false,
strokeWidth: 1,
opacity:1
});
// build tooltip
var tooltipItaly = new Kinetic.Text({
text: "",
textFill: "#fff",
fontFamily: "Calibri",
fontSize: 16,
padding: 5,
fill: "#000",
visible: false
});
var tooltipLazio = new Kinetic.Text({
text: "",
textFill: "#fff",
fontFamily: "Calibri",
fontSize: 16,
padding: 5,
fill: "#000",
visible: false
});
//background color
tooltipLayerItaly.add(tooltipBackground);
tooltipLayerItaly.add(tooltipItaly);
tooltipLayerLazio.add(tooltipBackground);
tooltipLayerLazio.add(tooltipLazio);
var previousK = "";
// get areasItaly data
var areasItaly = getItalyData();
// draw areasItaly
for (var key in areasItaly) {
(function () {
//alert(key);
var area = areasItaly[key];
var c = area.data;
var k = key;
var containerToShow="#container"+k;
var pathItaly = new Kinetic.Path({
data: c,
fill: '#fff',
stroke: '#555',
strokeWidth: .5
});
pathItaly.on("mouseover", function () {
this.setFill('#0D0000');
this.setOpacity(1);
mapLayerItaly.drawScene();
});
pathItaly.on("mouseout", function () {
this.setFill('#fff');
// this.setAlpha(0.1);
mapLayerItaly.drawScene();
tooltipBackground.hide();
tooltipItaly.hide();
tooltipLayerItaly.drawScene();
});
pathItaly.on("mouseup", function () {
$('#containerItaly').hide();
$(containerToShow).show();
});
pathItaly.on("mousemove", function () {
var mousePos = stageItaly.getMousePosition();
var x = mousePos.x + 5;
var y = mousePos.y + 10;
drawTooltip(tooltipItaly, x, y, k);
//keep track of previous key
if (previousK !== k) {
previousK = k;
previousSelected = this;
//hide the menu if different contry path is selected
$("[id$='contextMenu']").css({
display: 'none'
});
}
});
pathItaly.on("mousedown", function (e) {
$("[id$='contextMenu']").css({
display: 'inline',
position: 'absolute',
top: e.pageY,
left: e.pageX + 5,
opacity: .8
});
//menu header
$("[id$='contextMenuH']").html('');
//flag
$('<img />').attr('src', area.flag).appendTo($("[id$='contextMenuH']"));
$('<span />').html(k).appendTo($("[id$='contextMenuH']"));
//$("[id$='contextMenuH']").html(k);
//build links
$("[id$='contextMenuB']").html(''); //clear
//countryReports
$('<a target="_blank">[/url]')
.attr('href', 'http://www.countryreports.org/country/' + k + '.htm')
.html('Country Reports').appendTo($("[id$='contextMenuB']"));
//Economy
$('[br /]<a target="_blank">[/url]')
.attr('href', 'http://www.economicexpert.com/a/' + k + '.htm')
.html('Economy').appendTo($("[id$='contextMenuB']"));
//The world Factbook
$('[br /]<a target="_blank">[/url]')
.attr('href', 'https://www.cia.gov/library/publications/the-world-factbook/geos/' + area.abbreviation + '.html')
.html('Factbook').appendTo($("[id$='contextMenuB']"));
//Global Statistics
$('[br /]<a target="_blank">[/url]')
.attr('href', 'http://www.geohive.com/cntry/' + k + '.aspx').html('Global Statistics')
.appendTo($("[id$='contextMenuB']"));
//Wiki
$('[br /]<a target="_blank">[/url]').attr('href', 'http://en.wikipedia.org/wiki/' + k).html('Wiki').appendTo($("[id$='contextMenuB']"));
});
mapLayerItaly.add(pathItaly);
} ());
}
stageItaly.add(mapLayerItaly);
stageItaly.add(tooltipLayerItaly);
// get areasLazio data
var areasLazio = getLazioData();
// draw areasItaly
for (var key in areasLazio) {
(function () {
//alert(key);
var area = areasLazio[key];
var c = area.data;
var k = key;
var pathLazio = new Kinetic.Path({
data: c,
fill: '#fff',
stroke: '#555',
strokeWidth: .5
});
pathLazio.on('mouseover', function () {
this.setFill('#0D0000');
this.setOpacity(1);
mapLayerLazio.drawScene();
});
pathLazio.on('mouseout', function () {
this.setFill('#fff');
// this.setAlpha(0.1);
mapLayerLazio.drawScene();
tooltipBackground.hide();
tooltipLazio.hide();
tooltipLayerLazio.drawScene();
});
pathLazio.on('mousemove', function () {
var mousePos = stageLazio.getMousePosition();
var x = mousePos.x + 5;
var y = mousePos.y + 10;
drawTooltip(tooltipLazio, x, y, k);
//keep track of previous key
if (previousK !== k) {
previousK = k;
previousSelected = this;
//hide the menu if different contry path is selected
$("[id$='contextMenu']").css({
display: 'none'
});
}
});
pathLazio.on('mousedown', function (e) {
$("[id$='contextMenu']").css({
display: 'inline',
position: 'absolute',
top: e.pageY,
left: e.pageX + 5,
opacity: .8
});
//menu header
$("[id$='contextMenuH']").html('');
//flag
$('<img />').attr('src', area.flag).appendTo($("[id$='contextMenuH']"));
$('<span />').html(k).appendTo($("[id$='contextMenuH']"));
//$("[id$='contextMenuH']").html(k);
//build links
$("[id$='contextMenuB']").html(''); //clear
//countryReports
$('<a target="_blank">[/url]')
.attr('href', 'http://www.countryreports.org/country/' + k + '.htm')
.html('Country Reports').appendTo($("[id$='contextMenuB']"));
//Economy
$('[br /]<a target="_blank">[/url]')
.attr('href', 'http://www.economicexpert.com/a/' + k + '.htm')
.html('Economy').appendTo($("[id$='contextMenuB']"));
//The world Factbook
$('[br /]<a target="_blank">[/url]')
.attr('href', 'https://www.cia.gov/library/publications/the-world-factbook/geos/' + area.abbreviation + '.html')
.html('Factbook').appendTo($("[id$='contextMenuB']"));
//Global Statistics
$('[br /]<a target="_blank">[/url]')
.attr('href', 'http://www.geohive.com/cntry/' + k + '.aspx').html('Global Statistics')
.appendTo($("[id$='contextMenuB']"));
//Wiki
$('[br /]<a target="_blank">[/url]').attr('href', 'http://en.wikipedia.org/wiki/' + k).html('Wiki').appendTo($("[id$='contextMenuB']"));
});
mapLayerLazio.add(pathLazio);
} ());
}
stageLazio.add(mapLayerLazio);
stageLazio.add(tooltipLayerLazio);
</script>
</body>
</html>
