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
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: javascript - How to change zIndex of an element on click in jquery? - Stack Overflow
Hope this helps!
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>
@WebDesign unfortunatley my JS knowledge is pretty limited as well
Can you post a new thread regarding this snippet here?
Thanks!
Will do. Thanks for identifying the issue @Brando. Moved to post Transform Interactions Z index