Bringing #box to front on click

[Patrick_McCarty]

I’m having trouble with
I’ve tried a whole bunch of ways to bring a box to front on a click but nothing works

Working in
Wix Studio Editor

Site link
(https://patrick4885.wixstudio.com/erg4#leaders)

What I’ve tried so far

Here’s some code that I would think is most likely to work, but doesn’t:

  $w.onReady(() => {
    $w("#box106").onClick((event) => {
        $w("#box106").style.zIndex = "999";
        $w("#box108").style.zIndex = "1"; // Reset other element$w("#box110").style.zIndex = "1"; // Reset other element$w("#box112").style.zIndex = "1"; // Reset other element$w("#box185").style.zIndex = "1"; // Reset other element});

        $w("#box108").onClick((event) => {
            $w("#box108").style.zIndex = "999";
            $w("#box106").style.zIndex = "1"; // Reset other element
            $w("#box110").style.zIndex = "1"; // Reset other element
            $w("#box112").style.zIndex = "1"; // Reset other element
            $w("#box185").style.zIndex = "1"; // Reset other element
        });

        $w("#box110").onClick((event) => {
            $w("#box110").style.zIndex = "999";
            $w("#box106").style.zIndex = "1"; // Reset other element
            $w("#box108").style.zIndex = "1"; // Reset other element
            $w("#box112").style.zIndex = "1"; // Reset other element
            $w("#box185").style.zIndex = "1"; // Reset other element
        });

        $w("#box112").onClick((event) => {
            $w("#box112").style.zIndex = "999";
            $w("#box106").style.zIndex = "1"; // Reset other element
            $w("#box108").style.zIndex = "1"; // Reset other element
            $w("#box110").style.zIndex = "1"; // Reset other element
            $w("#box185").style.zIndex = "1"; // Reset other element
        });

        $w("#box185").onClick((event) => {
            $w("#box185").style.zIndex = "999";
            $w("#box106").style.zIndex = "1"; // Reset other element
            $w("#box108").style.zIndex = "1"; // Reset other element
            $w("#box110").style.zIndex = "1"; // Reset other element
            $w("#box112").style.zIndex = "1"; // Reset other element
        });

    });
})

Anyone have any suggestions?

[noahlovell]

When writing site code, you don’t have access to the DOM (unless you’re using custom code via the dashboard, or a Custom Element)

All the properties that .style exposes can be found here - Style Introduction | Velo, and zIndex isn’t available.

With all that said, you’re using Studio, so have access to CSS. I’d define 2 custom classes, for example:

.lower-zindex {
    z-index: 1;
}

.higher-zindex {
    z-index: 999;
}

And then onClick, add/remove/toggle the class on elements, for example, something like:

$w.onReady(() => {
    $w("#box106").onClick((event) => {
        $w("#box106").customClassList.add("higher-zindex")
    });
})

[Patrick_McCarty]

@noahlovell

.add

Noah,
Thank you for your help!! Okay, I think I want these boxes to come to the front on a mouseover, not a click. Here’s the code I used and it’s not working. Any idea what my mistake is:

$w.onReady(() => {

  $w("#box185").onMouseIn(() => {
    $w("#box185").customClassList.add["higher-zindex"];
  });

  $w("#box185").onMouseOut(() => {
    $w("#box185").customClassList.add["lower-zindex"];
  });

  $w("#box106").onMouseIn(() => {
    $w("#box106").customClassList.add["higher-zindex"];
  });

  $w("#box106").onMouseOut(() => {
    $w("#box106").customClassList.add["lower-zindex"];
    });

})

I added the CSS as you instructed.

[onemoretime]

Hi, @Patrick_McCarty !!

If you take a closer look at Noah’s post again, you’ll probably notice right away that there’s a difference. In your code, you’re using [] where you should be using ().

Also, when updating styles by switching classes, it’s important not only to add the new class but also to remove the old one. So I think it would probably be better to do it something like this.

$w.onReady(() => {
  $w("#box185").onMouseIn(() => {
    $w("#box185").customClassList.remove("lower-zindex");
    $w("#box185").customClassList.add("higher-zindex");
  });

  $w("#box185").onMouseOut(() => {
    $w("#box185").customClassList.remove("higher-zindex");
    $w("#box185").customClassList.add("lower-zindex");
  });
});

[Patrick_McCarty]

Thank you!!! That worked!