Question

Hi everybody,

I have some issue with one of my project. I’m currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.

After that i’ve created another iframe who appear when i click on the “Menu” Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.

Well now let me explain my problem :

When i click on the “dropMenuButton” i execute this code :

$( "#dM1").click( function() {
    dropMenu('dropMenu1', $(this).position().left);
});

To be clear the function “dropMenu” will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it’s allready activated or not.

Here is the executed code by the “dropMenu function”

if(document.getElementById("dropMenu"))
    {
        $("#dropMenu").slideUp(800, function() {
            $(this).remove();
        });
    }
    else
    {   
        var body = $('body'),
        MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
        iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');

        body.append(iframe);    

        $("#dropMenu").hide().slideDown(800);

        // Shift the menu (Left)
        $("#dropMenu").css({left: marginLeft+'px'});
    }

So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.

I’ve tried a lot of things but nothing work…

Hope somebody will provide me some help !
Thanks in advance.

Edit (Injection) :

I’ve tried to inject the javascript like this :

var injectJs = $('<script type=text/javascript>' + 
            '$(document).click(function() {' +
                'dropMenu("dropMenu1", 0);' +
        '});');

body.append(injectJs);

injectJs = $('$("#dropMenu").click( function(e) {' + 
        'e.stopPropagation();' +
    '});' + 
    '</script>');
body.append(injectJs);

But it didn’t seems to inject on the page. It should have a problem somewhere…

Answer 1

It works great but like this :

$(document).click(function(){
    // hide drop down clicking anywhere on page:
    dropMenu('slideUp', 0);
});

$("#dM1").click( function(e) {
    e.stopPropagation(); // prevent click on drop menu from removing the drop down.
    dropMenu('dropMenu1', $(this).position().left);
});

Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?