JQWidgets menu an context menu behind Google Earth plugin - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: context, google earth, iframe, jqxMenu, Menu, plug-in, plugin, z-index, z-ordrer

This topic contains 4 replies, has 2 voices, and was last updated by zmilanov 11 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

JQWidgets menu an context menu behind Google Earth plugin Posts

January 19, 2014 at 4:27 pm JQWidgets menu an context menu behind Google Earth plugin #48061

Participant

Hello,

JQWidgets menu an context menu are always placed behind Google Earth plugin regardless of menu’s z-order setting.
What can be done to make this works?
There is a solution to use custom a iframe shim to put a window on top the plugin but is there any way this could be implemented with jqxmenu?

Test project zipped code location:

https://drive.google.com/folderview?id=0B1FkdYOxT62JTVU1UGdCSTFxRTA&usp=sharing

Thanks.
Zoran.

January 20, 2014 at 7:43 am JQWidgets menu an context menu behind Google Earth plugin #48071

Dimitar

Participant

Hello Zoran,

This issue is not directly related to jQWidgets but to the fact that the browsers ignore z-index when there is a plug-in on the page. A workaround is to dynamically append iframes to each menu pop-up, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>GE - jqxMenu demo page </title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />
    <script type="text/javascript" src="/jqwidgets/gettheme.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">

        google.load("earth", "1");

        var ge = null;

        $(document).ready(function () {

            var theme = "bootstrap";

            //SPLITTER - top element------------------------------------------------------
            $('#mainsplitter').jqxSplitter({ theme: theme, resizable: false, showSplitBar: false, width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: 40, collapsible: false}] });

            //TOP MENU - in top splitter------------------------------------------------------

            var menuSourceProjects = [
                {
                    html: "<img src='images/jqwidgets/menu/project.png'/><span style='position: relative; left: 3px; top: -2px;'>Project</span>", items: [
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>View projects</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Open project</span>" }
                ]
                },
                { html: "<img src='images/jqwidgets/menu/about.png'/><span style='position: relative; left: 3px; top: -2px;'>About</span>", items: [
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Help</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Info</span>"}]
                }
                ];

            var menuSourceElements = [
                { html: "<img src='images/jqwidgets/menu/elements.png'/><span style='position: relative; left: 3px; top: -2px;'>Elements</span>", items: [
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Manage placemarks</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Manage polyline</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Manage polygone</span>" }
                ]
                },
                    { html: "<img src='images/jqwidgets/menu/about.png'/><span style='position: relative; left: 3px; top: -2px;'>About</span>", items: [
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Help</span>" },
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Info</span>"}]
                    }
                ];

            var menuSourceGE = [
                {
                    html: "<img src='images/jqwidgets/menu/elements.png'/><span style='position: relative; left: 3px; top: -2px;'>Elements</span>", items: [
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Add placemark</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Add polyline</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Add polygone</span>" }
                ]
                },
                { html: "<img src='images/jqwidgets/menu/view.png'/><span style='position: relative; left: 3px; top: -2px;'>View</span>", items: [
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Show Tree</span>" },
                    { html: "<span style='position: relative; left: 3px; top: -2px;'>Hide Tree</span>"}]
                },
                 {
                     html: "<img src='images/jqwidgets/menu/options.png'/><span style='position: relative; left: 3px; top: -2px;'>Options</span>", items: [
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Background</span>", items: [{ html: "<span style='position: relative; left: 3px; top: -2px;'>White</span>" }, { html: "<span style='position: relative; left: 3px; top: -2px;'>Black</span>"}] },
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Screen to</span>", items: [{ html: "<span style='position: relative; left: 3px; top: -2px;'>Jpeg</span>" }, { html: "<span style='position: relative; left: 3px; top: -2px;'>Png</span>" }, { html: "<span style='position: relative; left: 3px; top: -2px;'>ClipBoard</span>"}] },
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Tools</span>" },
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Layers</span>" },
                        { html: "<span style='position: relative; left: 3px; top: -2px;'>Show</span>"}]
                 },
                  { html: "<img src='images/jqwidgets/menu/kml.png'/><span style='position: relative; left: 3px; top: -2px;'>KML</span>", items: [
                          { html: "<span style='position: relative; left: 3px; top: -2px;'>Load KML</span>" },
                         { html: "<span style='position: relative; left: 3px; top: -2px;'>Save as KML</span>"}]
                  },
                    {
                        html: "<img src='images/jqwidgets/menu/about.png'/><span style='position: relative; left: 3px; top: -2px;'>About</span>", items: [
                           { html: "<span style='position: relative; left: 3px; top: -2px;'>Help</span>" },
                           { html: "<span style='position: relative; left: 3px; top: -2px;'>Info</span>"}]
                    }

                ];

            // create jqxMenu ----------------------------------------------------
            $("#jqxTopMenu").jqxMenu({ source: menuSourceGE, width: '600px', height: '40px', mode: 'horizontal', theme: theme, autoOpen: true, animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
            $("#jqxTopMenu").jqxMenu({ autoOpen: true });
            $("#jqxTopMenu").css('visibility', 'visible').css('z-index', 99999);
            $(".jqx-menu-popup").append('<iframe class="cover" src="about:blank"></iframe>');

            //THIRD TAB CONTENT END-------------------------------------------------

            LoadGE();
            function LoadGE() {
                google.earth.createInstance("GEPanel", initCallback, failureCallback);
            }

            function initCallback(object) {
                //alert('vdddvv');
                ge = object;
                ge.getWindow().setVisibility(true);
            }

            function failureCallback(object) {
            }

        });

    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <style type="text/css">
        .big-image
        {
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #999;
            background: #fff;
            padding: 3px;
        }
        .small-image
        {
            border: 1px solid #ccc;
            background: #fff;
            padding: 3px;
        }
        .content-container
        {
            padding-left: 15px;
            padding-top: 15px;
            padding-right: 15px;
        }
        .important-text
        {
            font-size: 13px;
            color: #000;
        }
        .more-text
        {
            color: #444;
            font-size: 11px;
            font-style: italic;
        }
        .cover
        {
            position: absolute;
            border: none;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        #GEPanel
        {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body class='default'>
    <div id="mainsplitter" class="jqx-hideborder" style="background-color: #DDDDDD">
        <!--mainsplitter - horizontal-->
        <div style="float: left; background-color: #DDDDDD" id="jqxTopMenu">
        </div>
        <div>
            <div style="background-color: #DD0000">
                <br />
                <br />
                <br />
                <b>Test div to demonstrate the problem with GE plugin always on the top of jqxmenu control.</b>
            </div>
            <div>
                <div id='GEPanel' style='border: 1px solid silver; height: 100%; width: 100%;'>
                </div>
            </div>
        </div>
    </div>
    <!--end mainsplitter -->
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 23, 2014 at 2:36 am JQWidgets menu an context menu behind Google Earth plugin #48245

zmilanov

Participant

Thank you Dimitar,

The first, I am very impressed with your support – very responsive and efficient.
The solution is a good and working for the regular menu.
This line
$(“.jqx-menu-popup”).append(‘<iframe class=”cover” src=”about:blank”></iframe>’);
must be placed after every menu source change.

Regarding using jQWidgets context menu on Google Earth plugin it seems the same solution cannon be implemented?
I attached the sample html file for context menu:

https://drive.google.com/folderview?id=0B9xyh0DvQh3pcVhUaFNsUnc5aDA&usp=sharing

Thanks.
Zoran.

January 23, 2014 at 6:49 am JQWidgets menu an context menu behind Google Earth plugin #48255

Dimitar

Participant

Hi Zoran,

In the case of context menu, the iframe has to be appended directly to it:

var contextMenu = $("#jqxContextMenu").jqxMenu({ source: menuSourceContextGlobe, width: '200px', height: '140px', autoOpenPopup: false, mode: 'popup' });
contextMenu.append('<iframe class="cover" src="about:blank" ></iframe>');

This way, the context menu will not be hidden by the plug-in. However, you will still not be able to display it in the plug-in itself, because it has its own right-click logic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 24, 2014 at 6:12 am JQWidgets menu an context menu behind Google Earth plugin #48307

zmilanov

Participant

Thank you.
It worked perfect with GE mouse listeners.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.