CODEWITHSUNDEEP
javascripthtmlinternet-explorercanvas
Nihar
Nihar

Reputation: 551

Usage of pointer-events:none; with HTML CANVAS

in my web page , I need to display the google map. But my web page also contains canvas elements.

Now if I make the z:index of canvas higher than map I cannot zoom in or pan to left/right. If i make the z:index of map higher than canvas element,it covers the whole of page as a result i can not see the triangle drawn through the canvas.

I used the css property pointer-events:none; but it only works properly in chrome,and in Mozilla (to good extent). But IE (10) is not using supporting it.

How do I achieve the same .i.e zoom and pan in IE as well.

This is the hmtl part

 <section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
        <canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
           <a href="#" onclick="HideAndShowFunc('LOCATION')">LOCATION</a><br>
        </div>

<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;"> 
            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;output=embed"></iframe><br /><small><a href="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;source=embed" style="color:#0000FF;text-align:left">View in Google Map</a></small>
        </div>
</section>

and the javascript

function HideAndShowFunc(name)
        {
            if(name=="LOCATION")
           {
                $("#intro3canvas").hide();  
                $("#intro3logo50").hide(); 
                $("#essence-luxury").hide(); 
                $("#displayamenity").hide();
                $("#projlogodiv").hide();
                $("#link").hide();
                $("#intro3Ongoing").hide();
                $("#intro3Upgoing").hide();
                $("#intro3Completed").hide();
                $("#arrow").hide();
                $("#table-frame").hide();               
                $("#intro3bg").hide();
                $("#amenitycanvas").show(); 
                $("#displaylocate").show();
           }
           }

Upvotes: 0

Views: 1613

Answers (1)

fian
fian

Reputation: 770

You should try Hand.js. It's polyfill for pointer-events and this article might be help you to use Hand.js

Upvotes: 1

Related Questions