Streaming live at 10am (PST)

Help with transform interactions


#1

Hi all. I am trying to create a card stack with a layer of divs that reorder when clicked. I can get this to work in Safari and Firefox, but I have trouble in Chrome and IE. Any help would be appreciated. Here is the share link to explain. https://preview.webflow.com/preview/neuone?preview=c6402d587184ee9e3f892ff41465fe27


Transform Interactions Z index
#3

Hi @WebDesign

This may be a bug with Chrome / IE (similar case).

It looks like the only way to get this sort of effect to work correctly is to also directly change the z-index value on click. We don’t yet have this sort of z-index control with Interactions, but you should be able to achieve this with a bit of custom code.

I did a quick search and came up with this solution that you may find useful: https://stackoverflow.com/questions/22675080/how-to-change-zindex-of-an-element-on-click-in-jquery

Hope this helps! :slight_smile:


#4

Hi @Brando Thanks for your help. I tried adding some custom code inside the head tag, but still not seeing any difference on Chrome or IE. I know very little about javascript, so I am not sure if this is correct?

<script>
  $("#up").click(function(){
   $("#card").css("z-index", -10);
 });

  $("#down").click(function(){
   $("#card").css("z-index",10);
 });
</script>

#5

@WebDesign unfortunatley my JS knowledge is pretty limited as well :pensive:

Can you post a new thread regarding this snippet here?

Thanks!


#6

Will do. Thanks for identifying the issue @Brando. Moved to post Transform Interactions Z index