• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Googlemap plugin bubble - js in the bubble

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!

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>
 
This is outside of our scope for support. We could only really help out with this as a piece of paid custom work.

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top