TAGS :Viewed: 10 - Published at: a few seconds ago

[ How can i append a position: absolute; DIV into firefox xul:browser? ]

I need to append a DIV element into xul:browser and make position: absolute; and move this DIV around in firefox window. Is it possible? How can i do this in a firefox extension?

Answer 1


If you position your element(s) inside of a <stack>, the top,right,bottom, and left attributes can be used for positioning.

Answer 2


After searching the web and working around styles i figured it out that i can use position: fixed; style

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd">
<overlay id="helloworld-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">

    <vbox id="browser-panel">
        <html:div style="position: fixed; top: 20px; left: 50px;">
                  <html:img src="https://static.addons.mozilla.net/en-US/developers/docs/sdk/1.1/media/firefox-logo.png" width="32" height="32" />
        </html:div>
    </vbox>

</overlay>

Answer 3


XUL uses the flexible box model, you won't get very far with absolute positioning there. The best solution would be using the <xul:panel> element that is meant to be displayed on top of other content (similar to context menu or tooltip). There is a moveTo() method that allows the panel to be moved after it was opened.