Re: [xul-interop] Why this css z-index is not working in my XUL app?
Tom Brito <[email protected]> Fri, 8 Oct 2010 16:56:30 -0300
| Newsgroups | gmane.comp.lang.xul.general |
|---|---|
| Message-ID | <[email protected]> |
--===============1788536177295847691==
Content-Type: multipart/alternative; boundary=0016e64974e65901c8049220696e
--0016e64974e65901c8049220696e
Content-Type: text/plain; charset=ISO-8859-1
A main problem with this loading is that it needs to show while opening a
new window,
I had success to show a loading menupopup element
var image = getElementById('loadingImage');
show("image.width = " + image.width);
var x = screen.width/2 - 150;
var y = screen.height/2 - 150;
getElementById('loadingPopup').openPopupAtScreen(x, y, "true");
The only problem now is that the second windows can't get the menupopup id
to close is in the onload() event... Any hint on this?
*
Wellington B. de Carvalho
*
On Thu, Oct 7, 2010 at 4:55 PM, Evgeny <[email protected]> wrote:
> Hello
>
> I think that's not a good idea to use CSS 'position' property in XUL,
> absolute or fixed.
> absolute doesn't work, fixed works with some problems.
>
> 1) You can use <stack> or <deck> element, this is the best solution (or set
> -moz-stack css property).
>
> <deck selectedIndex="0"> <!-- you change selectedIndex in javascript to
> change what is displayed-->
> <image .../>
> <image .../>
> </deck>
>
> It's XUL way.
>
> 2)Also if you need floating element above your document, you'd beter use
> <panel noautohide="true">
> You set it position with showPopup function. See MDC.
>
> 3) The *dirty* solution is to use html elements in your xul:
> You declare html namespace in your window
> <window xmlns:html="http://www.w3.org/1999/xhtml"
>
> xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> And use
> <html:div style="position:absolute; left:20px; top:20px;">
> <html:img src="..."/>
> </html:div>
>
> 4) Another *dirty* solution (i'm not sure how to make it work in random
> xul file) is to use position:fixed
> I used it in one firefox extension. There was a problem that element
> ignored its z-index when it clipped <browser> element.
> I solved it with another browser element in stack
> *
> *
>
>
> On Thu, Oct 7, 2010 at 5:24 PM, Tom Brito <[email protected]> wrote:
>
>> I have this Xul file:
>>
>> <?xml version="1.0" encoding="UTF-8"?>
>> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
>> <?xml-stylesheet href="chrome://greenfox/content/mycss.css"
>> type="text/css"?>
>> <window xmlns="
>> http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
>> <image class="Front" src="images/loading.gif"/>
>> <image class="Back" src="images/plasma.jpg"/>
>> </window>
>>
>>
>> with this CSS:
>>
>> .Back {
>> position: absolute;
>> left: 0px;
>> top:0px;
>> z-index:0;
>> }
>> .Front {
>> position: absolute;
>> left: 0px;
>> top:0px;
>> z-index:1;
>> }
>>
>>
>> and, for some reason, the images are vertically one above another, not in
>> z-index as specified by my CSS. Any idea how to fix it?
>> This same CSS in a html file works just fine..
>>
>>
>> *
>> Wellington B. de Carvalho
>> *
>>
>>
>> ------------------------------------------------------------------------------
>> Beautiful is writing same markup. Internet Explorer 9 supports
>> standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
>> Spend less time writing and rewriting code and more time creating great
>> experiences on the web. Be a part of the beta today.
>> http://p.sf.net/sfu/beautyoftheweb
>> _______________________________________________
>> XUL News Wire - http://xulnews.com
>> XUL Job Postings - http://xuljobs.com
>> Open XUL Alliance - http://xulalliance.org
>> _______________________________________________
>> xul-talk mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/xul-talk
>>
>>
>
>
> ------------------------------------------------------------------------------
> Beautiful is writing same markup. Internet Explorer 9 supports
> standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
> Spend less time writing and rewriting code and more time creating great
> experiences on the web. Be a part of the beta today.
> http://p.sf.net/sfu/beautyoftheweb
> _______________________________________________
> XUL News Wire - http://xulnews.com
> XUL Job Postings - http://xuljobs.com
> Open XUL Alliance - http://xulalliance.org
> _______________________________________________
> xul-talk mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/xul-talk
>
>
--0016e64974e65901c8049220696e
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
A main problem with this loading is that it needs to show while opening a n=
ew window,<div>I had success to show a loading menupopup element=A0</div><d=
iv><span class=3D"Apple-style-span" style=3D"font-family: 'courier new&=
#39;, monospace; "><br>
</span></div><blockquote class=3D"webkit-indent-blockquote" style=3D"margin=
: 0 0 0 40px; border: none; padding: 0px;"><div><span class=3D"Apple-style-=
span" style=3D"font-family: 'courier new', monospace; ">var image =
=3D getElementById('loadingImage');</span></div>
<div><div><font class=3D"Apple-style-span" face=3D"'courier new', m=
onospace">show("image.width =3D " + image.width);</font></div></d=
iv><div><div><font class=3D"Apple-style-span" face=3D"'courier new'=
, monospace">var x =3D screen.width/2 - 150;</font></div>
</div><div><div><font class=3D"Apple-style-span" face=3D"'courier new&#=
39;, monospace">var y =3D screen.height/2 - 150;</font></div></div><div><di=
v><font class=3D"Apple-style-span" face=3D"'courier new', monospace=
">getElementById('loadingPopup').openPopupAtScreen(x, y, "true=
");</font></div>
</div></blockquote><div><div><br></div><div><font class=3D"Apple-style-span=
" face=3D"arial, helvetica, sans-serif">The only problem now is that the se=
cond windows can't get the menupopup id to close is in the onload() eve=
nt...=A0</font><span class=3D"Apple-style-span" style=3D"font-family: arial=
, helvetica, sans-serif; ">Any hint on this?</span></div>
<div><br></div><i><div style=3D"text-align:left"><span style=3D"font-style:=
normal"><i>Wellington B. de Carvalho</i></span></div></i><br>
<br><br><div class=3D"gmail_quote">On Thu, Oct 7, 2010 at 4:55 PM, Evgeny <=
span dir=3D"ltr"><<a href=3D"mailto:[email protected]">[email protected]</=
a>></span> wrote:<br><blockquote class=3D"gmail_quote" style=3D"margin:0=
0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<div>Hello</div><div><br></div><div>I think that's not a good idea to u=
se CSS 'position' property in XUL, absolute or fixed.</div><div>abs=
olute doesn't work, fixed works with some problems.</div><div>=A0</div>
<div>1) You can use <stack> or <deck> element, this is the best=
solution (or set -moz-stack css property).</div><div><br></div><div><de=
ck selectedIndex=3D"0"> =A0 =A0<!-- you change selectedInde=
x in javascript to change what is displayed--></div>
<div>=A0<image .../></div><div>=A0<image .../></div><div></d=
eck></div><div><br></div><div>It's XUL way.</div><div><br></div><div=
>2)Also if you need floating element above your document, you'd beter u=
se <panel noautohide=3D"true"></div>
<div>You set it position with showPopup function. See MDC.</div><div><br></=
div><div>3) The <strong>dirty</strong> solution is to use html elements in =
your xul:</div><div>You declare html namespace in your window</div><div>
<window xmlns:html=3D"<a href=3D"http://www.w3.org/1999/xhtml" ta=
rget=3D"_blank">http://www.w3.org/1999/xhtml</a>"<div class=3D"im"><br=
>=A0 xmlns=3D"<a href=3D"http://www.mozilla.org/keymaster/gatekee=
per/there.is.only.xul" target=3D"_blank">http://www.mozilla.org/keymaster/g=
atekeeper/there.is.only.xul</a>"><br>
</div></div><div>And use </div><div><html:div style=3D"position:abs=
olute; left:20px; top:20px;"></div><div>=A0 =A0 <html:img src=3D=
"..."/></div><div></html:div></div><div><br></div><div>4=
) Another <strong>dirty</strong> solution (i'm not sure how to make it =
work in random xul file) is to use position:fixed</div>
<div>I used it in one firefox extension. There was a problem that element i=
gnored its z-index when it clipped <browser> element.</div><div>I sol=
ved it with another browser element in stack</div><div><strong><br></strong=
></div>
<div><br></div><br><div class=3D"gmail_quote"><div><div></div><div class=3D=
"h5">On Thu, Oct 7, 2010 at 5:24 PM, Tom Brito <span dir=3D"ltr"><<a hre=
f=3D"http://brito.pro" target=3D"_blank">brito.pro</a>@<a href=3D"http://gm=
ail.com" target=3D"_blank">gmail.com</a>></span> wrote:<br>
</div></div><blockquote class=3D"gmail_quote" style=3D"margin:0 0 0 .8ex;bo=
rder-left:1px #ccc solid;padding-left:1ex"><div><div></div><div class=3D"h5=
">
I have this Xul file:<br><br><blockquote style=3D"margin:0 0 0 40px;border:=
none;padding:0px"><?xml version=3D"1.0" encoding=3D"UTF-8=
"?><br>
<?xml-stylesheet href=3D"chrome://global/skin/" type=3D"t=
ext/css"?><br><?xml-stylesheet href=3D"chrome://greenfox/co=
ntent/mycss.css" type=3D"text/css"?><br><window xmlns=
=3D"<a href=3D"http://www.mozilla.org/keymaster/gatekeeper/there.is.on=
ly.xul" target=3D"_blank">http://www.mozilla.org/keymaster/gatekeeper/there=
.is.only.xul</a>"><br>
=A0=A0 =A0<image class=3D"Front" src=3D"images/loading.gi=
f"/><br>=A0=A0 =A0<image class=3D"Back" src=3D"im=
ages/plasma.jpg"/><br></window></blockquote><br>with this CSS=
:<br><br><blockquote style=3D"margin:0 0 0 40px;border:none;padding:0px">
.Back {<br>=A0=A0 =A0position: absolute;<br>=A0=A0 =A0left: 0px;<br>=A0=A0 =
=A0top:0px;<br>=A0=A0 =A0z-index:0;<br>}<br>.Front {<br>=A0=A0 =A0position:=
absolute;<br>=A0=A0 =A0left: 0px;<br>=A0=A0 =A0top:0px;<br>=A0=A0 =A0z-ind=
ex:1;<br>}</blockquote><br>and, for some reason, the images are vertically =
one above another, not in z-index as specified by my CSS. Any idea how to f=
ix it?<div>
This same CSS in a html file works just fine..<br><div><br><div><br></div><=
i><div style=3D"text-align:left"><span style=3D"font-style:normal"><i>Welli=
ngton B. de Carvalho</i></span></div></i><br>
</div></div>
<br></div></div>-----------------------------------------------------------=
-------------------<br>
Beautiful is writing same markup. Internet Explorer 9 supports<br>
standards for HTML5, CSS3, SVG 1.1, =A0ECMAScript5, and DOM L2 & L3.<br=
>
Spend less time writing and =A0rewriting code and more time creating great<=
br>
experiences on the web. Be a part of the beta today.<br>
<a href=3D"http://p.sf.net/sfu/beautyoftheweb" target=3D"_blank">http://p.s=
f.net/sfu/beautyoftheweb</a><br>___________________________________________=
____<br>
XUL News Wire =A0 =A0 =A0- <a href=3D"http://xulnews.com" target=3D"_blank"=
>http://xulnews.com</a><br>
XUL Job Postings =A0 - <a href=3D"http://xuljobs.com" target=3D"_blank">htt=
p://xuljobs.com</a><br>
Open XUL Alliance - <a href=3D"http://xulalliance.org" target=3D"_blank">ht=
tp://xulalliance.org</a><br>
_______________________________________________<br>
xul-talk mailing list<br>
<a href=3D"mailto:[email protected]" target=3D"_blank">xul-tal=
[email protected]</a><br>
<a href=3D"https://lists.sourceforge.net/lists/listinfo/xul-talk" target=3D=
"_blank">https://lists.sourceforge.net/lists/listinfo/xul-talk</a><br>
<br></blockquote></div><br>
<br>-----------------------------------------------------------------------=
-------<br>
Beautiful is writing same markup. Internet Explorer 9 supports<br>
standards for HTML5, CSS3, SVG 1.1, =A0ECMAScript5, and DOM L2 & L3.<br=
>
Spend less time writing and =A0rewriting code and more time creating great<=
br>
experiences on the web. Be a part of the beta today.<br>
<a href=3D"http://p.sf.net/sfu/beautyoftheweb" target=3D"_blank">http://p.s=
f.net/sfu/beautyoftheweb</a><br>___________________________________________=
____<br>
XUL News Wire =A0 =A0 =A0- <a href=3D"http://xulnews.com" target=3D"_blank"=
>http://xulnews.com</a><br>
XUL Job Postings =A0 - <a href=3D"http://xuljobs.com" target=3D"_blank">htt=
p://xuljobs.com</a><br>
Open XUL Alliance - <a href=3D"http://xulalliance.org" target=3D"_blank">ht=
tp://xulalliance.org</a><br>
_______________________________________________<br>
xul-talk mailing list<br>
<a href=3D"mailto:[email protected]">[email protected]=
e.net</a><br>
<a href=3D"https://lists.sourceforge.net/lists/listinfo/xul-talk" target=3D=
"_blank">https://lists.sourceforge.net/lists/listinfo/xul-talk</a><br>
<br></blockquote></div><br></div>
--0016e64974e65901c8049220696e--
--===============1788536177295847691==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
------------------------------------------------------------------------------
Beautiful is writing same markup. Internet Explorer 9 supports
standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
Spend less time writing and rewriting code and more time creating great
experiences on the web. Be a part of the beta today.
http://p.sf.net/sfu/beautyoftheweb
--===============1788536177295847691==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
_______________________________________________
XUL News Wire - http://xulnews.com
XUL Job Postings - http://xuljobs.com
Open XUL Alliance - http://xulalliance.org
_______________________________________________
xul-talk mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/xul-talk
--===============1788536177295847691==--