Tech Tip: Clicking through a layer


jungle scene

Thanks to our wonderful Kickstarter backers, I  am in the middle of adding an Easter egg to Aztech Games. It’s a simple “find the hidden objects” type of game where you have a minute to find everything.

Here is the problem:

I want the images to be layered. As you can see, the pineapple is underneath the layer with the leafy plants. Normally, if you click on the pineapple, even if you have a function on click, like this:

 $("#pineapple").on("click",function () {
   $("#youknowI").text("Pineapples originated in South America.");
   $("#youknow").show();
    $(".pineapple").remove();
 });

Nothing happens, because even if part of the pineapple shows through, it is still UNDER the top layer with the leaves, that layer just happens to be transparent in parts.

You can solve your problem by adding one line to your CSS. Say your second forest layer with the leaves is has an ID of layer2, add this line.

#layer2 {  pointer-events:none;   }

 
Hurray! You can now click through the layer.

Check  out Aztech and our other iPad apps in the app store !

aztech splash screen

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.