Question

I’m new to working with Greasemonkey and jQuery and I need to add a settings panel to the current page, when an image is clicked.

Can someone give me an example of how to create a div via jQuery, then add it to the current page, absolutely positioned over the other elements?

Here’s some of the test code I’m working with, somewhat blindly to the methods involved.

var settingsDiv = '<div style="position:absolute;bottom:0;width:500px;padding:0;" id="kwdHelpInfo">This is the div that I want to add to the page</div>';

//the #kwdHelp element is an image file already in the document. When its clicked, I want to show the settingsDiv...

jQuery('#kwdHelp').live('click',function(){
    //alert('clicked show help');
    //var newcell = jQuery(settingsDiv);
    //jQuery(newcell).show();
});

Answer 1

You’re close, but not quite there. use jQuery’s append() method to add your new element to the bottom of a containing element…

$('#kwdHelp').click(function() {
    $('#outerElement').append(settingsDiv); // this very well could be $('body') or any element you choose
});

… adjust your styling as it suites where the element is then positioned.