Index of a z-layer

[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

[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).

[Stefan]

I don't understand what you mean. Can you maybe post a small example?

[Caronte3D]

Please post minimal working example of your code so I can try to modify it to solve the problem.

[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?

[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)

! });

[Stefan]

Thank you for the code!

Both gadgets have the same index (101), can that really be true?

[Fred]

Yes all gadgets have the same zorder