Re: [xul-interop] Why this css z-index is not working in my XUL app?
Evgeny <[email protected]> Sat, 9 Oct 2010 22:53:50 +0400
| Newsgroups | gmane.comp.lang.xul.general |
|---|---|
| Message-ID | <[email protected]> |
--===============7373638254516710026== Content-Type: multipart/alternative; boundary=90e6ba53ac44e1df45049233a592 --90e6ba53ac44e1df45049233a592 Content-Type: text/plain; charset=ISO-8859-1 How do you open a new window? Maybe you can set load event handler from the first window. Or try to use window.opener (if open with window.open) from second window to get first one. window.opener will be the window object of first window, so window.opener.document.getElementById On Fri, Oct 8, 2010 at 11:56 PM, Tom Brito <[email protected]> wrote: > 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 >> >> > > > ------------------------------------------------------------------------------ > 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 > > --90e6ba53ac44e1df45049233a592 Content-Type: text/html; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable How do you open a new window?<br>Maybe you can set load event handler from = the first window.<br>Or try to use window.opener (if open with window.open)= from second window to get first one. window.opener will be the window obje= ct of first window, so<br> window.opener.document.getElementById<br><br><div class=3D"gmail_quote">On = Fri, Oct 8, 2010 at 11:56 PM, Tom Brito <span dir=3D"ltr"><<a href=3D"ht= tp://brito.pro">brito.pro</a>@<a href=3D"http://gmail.com">gmail.com</a>>= ;</span> wrote:<br> <blockquote class=3D"gmail_quote" style=3D"margin: 0pt 0pt 0pt 0.8ex; borde= r-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">A main problem wi= th this loading is that it needs to show while opening a new window,<div>I = had success to show a loading menupopup element=A0</div> <div><span style=3D"font-family: 'courier new',monospace;"><br> </span></div><blockquote style=3D"margin: 0pt 0pt 0pt 40px; border: medium = none; padding: 0px;"><div><span style=3D"font-family: 'courier new'= ,monospace;">var image =3D getElementById('loadingImage');</span></= div> <div><div><font face=3D"'courier new', monospace">show("image.= width =3D " + image.width);</font></div></div><div><div><font face=3D"= 'courier new', monospace">var x =3D screen.width/2 - 150;</font></d= iv> </div><div><div><font face=3D"'courier new', monospace">var y =3D s= creen.height/2 - 150;</font></div></div><div><div><font face=3D"'courie= r new', monospace">getElementById('loadingPopup').openPopupAtSc= reen(x, y, "true");</font></div> </div></blockquote><div><div><br></div><div><font face=3D"arial, helvetica,= sans-serif">The only problem now is that the second windows can't get = the menupopup id to close is in the onload() event...=A0</font><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-styl= e: normal;"><i>Wellington B. de Carvalho</i></span></div></i><div><div></di= v><div class=3D"h5"><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]" target=3D"_blank">= [email protected]</a>></span> wrote:<br><blockquote class=3D"gmail_quote"= style=3D"margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 2= 04); 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 <b>dirty</b> 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><br>=A0 xml= ns=3D"<a href=3D"http://www.mozilla.org/keymaster/gatekeeper/there.is.= only.xul" target=3D"_blank">http://www.mozilla.org/keymaster/gatekeeper/the= re.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 <b>dirty</b> solution (i'm not sure how to make it work in ra= ndom 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><b><br></b></div> <div><br></div><br><div class=3D"gmail_quote"><div><div></div><div>On Thu, = Oct 7, 2010 at 5:24 PM, Tom Brito <span dir=3D"ltr"><<a href=3D"http://b= rito.pro" target=3D"_blank">brito.pro</a>@<a href=3D"http://gmail.com" targ= et=3D"_blank">gmail.com</a>></span> wrote:<br> </div></div><blockquote class=3D"gmail_quote" style=3D"margin: 0pt 0pt 0pt = 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;"><div>= <div></div><div> I have this Xul file:<br><br><blockquote style=3D"margin: 0pt 0pt 0pt 40px;= border: medium none; padding: 0px;"><?xml version=3D"1.0" enc= oding=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: 0pt 0pt 0pt 40px; border: medium 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>W= ellington 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]" 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></div></div></div> <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> --90e6ba53ac44e1df45049233a592-- --===============7373638254516710026== 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 --===============7373638254516710026== 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 --===============7373638254516710026==--