gilles.cloutier
New Member
Googlemap plugin bubble - js in the bubble
Hi,
I have a list of countries in a vizualization googlemap
I put a menu in the bubble (see the bubble.html minus 2 <li> )
then i add 2 js files from juxmenu: HoverIntent.js and jsscript.js
(
those 2 files are inserted in the head of the index.html
to be able to use juxmenu extension of Joomla
)
in /plugins/fabrik_visualization/googlemap/
in the googlemap.xml
and in .../views/googlemap/view.html.php after line 87
(
$srcs[] = 'plugins/fabrik_visualization/googlemap/HoverIntent.js';
$srcs[] = 'plugins/fabrik_visualization/googlemap/jsscript.js';
)
There are 2 ways to use juxmenu: with js or with css3
The version in css3 works perfectly but works only as Hover the menu element.
The version in js works perfectly as a menu outside googlemap bubble.
So this is my problem, i would like to be able to use js in the bubble.
I open the bubble and i see the third menu (module) freezed.
As you will see, this script at the end of the html code is not functionning.
(
<script type="text/javascript">
var megamenu = new jsMegaMenuMoo ('bubblemap', {
'bgopacity': 0,
'animation': 'slide',
'delayHide': 300,
'menutype': 'horizontal',
'direction':'down',
'action':'click',
'tips': false,
'duration': 300,
'hover_delay': 50,
'sticky': 0,
'menu_alignment': 'left',
'sticky_alignment': 'center'
});
</script>
)
This js shows the content ( li.haschild ) of the element menu on click
and hide if another element is clicked...
As you know, we can use a menu with only separator for the menu elements
and we can show a module instead of a link.
I tested that settings and i had put the html code in the bubble.
If you need more information, i would be happy to provide,
thanks in advance!
Hi,
I have a list of countries in a vizualization googlemap
I put a menu in the bubble (see the bubble.html minus 2 <li> )
then i add 2 js files from juxmenu: HoverIntent.js and jsscript.js
(
those 2 files are inserted in the head of the index.html
to be able to use juxmenu extension of Joomla
)
in /plugins/fabrik_visualization/googlemap/
in the googlemap.xml
and in .../views/googlemap/view.html.php after line 87
(
$srcs[] = 'plugins/fabrik_visualization/googlemap/HoverIntent.js';
$srcs[] = 'plugins/fabrik_visualization/googlemap/jsscript.js';
)
There are 2 ways to use juxmenu: with js or with css3
The version in css3 works perfectly but works only as Hover the menu element.
The version in js works perfectly as a menu outside googlemap bubble.
So this is my problem, i would like to be able to use js in the bubble.
I open the bubble and i see the third menu (module) freezed.
As you will see, this script at the end of the html code is not functionning.
(
<script type="text/javascript">
var megamenu = new jsMegaMenuMoo ('bubblemap', {
'bgopacity': 0,
'animation': 'slide',
'delayHide': 300,
'menutype': 'horizontal',
'direction':'down',
'action':'click',
'tips': false,
'duration': 300,
'hover_delay': 50,
'sticky': 0,
'menu_alignment': 'left',
'sticky_alignment': 'center'
});
</script>
)
This js shows the content ( li.haschild ) of the element menu on click
and hide if another element is clicked...
As you know, we can use a menu with only separator for the menu elements
and we can show a module instead of a link.
I tested that settings and i had put the html code in the bubble.
If you need more information, i would be happy to provide,
thanks in advance!
HTML:
<div class="moduletable bubble">
<div id="js-mainnav" class="clearfix megamenu horizontal left white">
<div class="js-megamenu clearfix" id="bubblemap">
<ul class="megamenu level0">
<li class="mega first submenu-align-auto"><span class="mega first " id="menu641" ><span class="menu-title"><i class="font-icon "></i>{country}</span></span></li>
<li class="mega haschild submenu-align-fullwidth"><span class="mega haschild " id="menu639" ><span class="menu-title"><i class="font-icon "></i>General</span></span>
<div class="childcontent cols1 ">
<div class="childcontent-inner-wrap">
<div class="childcontent-inner clearfix" style="width: 634px;">
<div class="moduletable">
<div class="custom" >
<div class="btableau1">
<div class="xt">
<span class="xc1">
<div class="cellu">
</div>
</span>
<span class="xc2">
<div class="cellu">
</div>
</span>
<span class="xc3">
<div class="cellu">
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">Population in million
</div>
</span>
<span class="xc2">
<div class="cellu">{population}
</div>
</span>
<span class="xc3">
<div class="cellu">
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">Mobile Penetration in %
</div>
</span>
<span class="xc2">
<div class="cellu">{mobile_penetr}
</div>
</span>
<span class="xc3">
<div class="cellu">
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">Internet Penetration in %
</div>
</span>
<span class="xc2">
<div class="cellu">{internet_penetr}
</div>
</span>
<span class="xc3">
<div class="cellu">
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu"><strong>Indexes</strong>
</div>
</span>
<span class="xc2">
<div class="cellu">
</div>
</span>
<span class="xc3">
<div class="cellu">
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">WEF Index
</div>
</span>
<span class="xc2">
<div class="cellu">{wef_index}
</div>
</span>
<span class="xc3">
<div class="cellu">rank {wef_rank}
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">WASEDA Index
</div>
</span>
<span class="xc2">
<div class="cellu">{waseda_index}
</div>
</span>
<span class="xc3">
<div class="cellu">rank {waseda_rank}
</div>
</span>
</div>
<hr />
<div class="xl">
<span class="xc1">
<div class="cellu">UN Index
</div>
</span>
<span class="xc2">
<div class="cellu">{un_index}
</div>
</span>
<span class="xc3">
<div class="cellu">rank {un_rank}
</div>
</span>
</div>
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega submenu-align-auto"><span class="mega " id="menu643" ><span class="menu-title"><i class="font-icon "></i>eIDs</span></span></li>
<li class="mega submenu-align-auto"><span class="mega " id="menu644" ><span class="menu-title"><i class="font-icon "></i>eServices</span></span></li>
</ul>
</div>
</div>
<!--<style type="text/css">
ul.level1 .childcontent { margin: -20px 0 0 px; }
</style>-->
<script type="text/javascript">
var megamenu = new jsMegaMenuMoo ('bubblemap', {
'bgopacity': 0,
'animation': 'slide',
'delayHide': 300,
'menutype': 'horizontal',
'direction':'down',
'action':'click',
'tips': false,
'duration': 300,
'hover_delay': 50,
'sticky': 0,
'menu_alignment': 'left',
'sticky_alignment': 'center'
});
</script>
</div>
