Page 1 of 1
Index of a z-layer
Posted: Sun Feb 09, 2025 10:06 am
by Stefan
Unfortunately, with this procedure I can only see that the gadget's z-index is "auto".
How can I find out the index?
Code: Select all
Procedure GetGadgetZIndex(Gadget)
If IsGadget(Gadget) = #False : ProcedureReturn : EndIf
Protected GID = GadgetID(Gadget)
! return $(v_gid.div).css("z-index");
EndProcedure
Re: Index of a z-layer
Posted: Sun Feb 09, 2025 6:39 pm
by Caronte3D
I think (not tested) you can iterate through the element parents until z-index is different to "auto" (if not, it should be 0).
Re: Index of a z-layer
Posted: Mon Feb 10, 2025 10:06 am
by Stefan
I don't understand what you mean. Can you maybe post a small example?
Re: Index of a z-layer
Posted: Mon Feb 10, 2025 3:05 pm
by Caronte3D
Please post minimal working example of your code so I can try to modify it to solve the problem.
Re: Index of a z-layer
Posted: Fri Feb 14, 2025 8:28 am
by Stefan
Code: Select all
OpenWindow(1,0,0,800,600,"Test")
pic=CreateImage(#PB_Any,100,30,32,RGB(200,0,0))
gadget1=ImageGadget(#PB_Any,10,100,ImageWidth(pic),ImageHeight(pic),ImageID(pic))
FreeImage(pic)
pic=CreateImage(#PB_Any,100,30,32,RGB(0,200,0))
gadget2=ImageGadget(#PB_Any,150,100,ImageWidth(pic),ImageHeight(pic),ImageID(pic))
What ist the z-layer of gadget1 and gadget2?
Re: Index of a z-layer
Posted: Fri Feb 14, 2025 12:39 pm
by Caronte3D
Hi!
I'm a newbie on SB so this code could be better for sure, but I think it does what you want:
Code: Select all
Procedure getEffectiveZIndex(myGadget.s)
Protected ret
! var el = document.getElementById(v_mygadget);
! if (!el) {
! console.error("Element not found:", v_mygadget);
ProcedureReturn -9999
! }
! while (el) {
! var zIndex = window.getComputedStyle(el).zIndex;
! var position = window.getComputedStyle(el).position;
! if (!isNaN(parseInt(zIndex, 10)) && position !== "static") {
! v_ret=parseInt(zIndex, 10);
ProcedureReturn ret
! }
! el = el.parentElement;
! }
ProcedureReturn 0
EndProcedure
OpenWindow(1, 0, 0, 800, 600, "Test")
Define pic = CreateImage(#PB_Any, 100, 30, 32, RGB(200, 0, 0))
Define gadget1 = ImageGadget(0, 10, 100, ImageWidth(pic), ImageHeight(pic), ImageID(pic))
; If you need to change the zIndez, use the following line
; ! $(v_gadget1.div).css("zIndex", 200);
! $(v_gadget1.div).attr("id", "contenedor1");
FreeImage(pic)
pic = CreateImage(#PB_Any, 100, 30, 32, RGB(0, 200, 0))
gadget2 = ImageGadget(1, 150, 100, ImageWidth(pic), ImageHeight(pic), ImageID(pic))
! $(v_gadget2.div).attr("id", "contenedor2") ;
FreeImage(pic)
! window.addEventListener('load', () => {
Define zindex1 = getEffectiveZIndex("contenedor1")
Define zindex2 = getEffectiveZIndex("contenedor2")
Debug ("Red box z-index: "+ zindex1)
Debug ("Green box z-index: "+ zindex2)
! });
Re: Index of a z-layer
Posted: Sun Feb 16, 2025 7:47 am
by Stefan
Thank you for the code!
Both gadgets have the same index (101), can that really be true?
Re: Index of a z-layer
Posted: Sun Feb 16, 2025 10:15 am
by Fred
Yes all gadgets have the same zorder