I have a screen where two things are displayed.[*]A google street map is rendered using Openlayers.[*]A side panel is rendered to display a list of countries and their annual population growth.Below code explains the idea.Code is written in html.\[code\]<body><div id="map" style="z-index:0;"></div><div id="sidePanel" style="position:absolute; top:0px; left:0px; width:30%; height:100%; z-index:1; background-color:black">//content in this div will be filled dynamically through ajax call</div></body>\[/code\]Everything displayed perfectly. But, when I click on 'sidepanel' and holding mouse click , if I drag, then the map div is receiving the mouse click and 'Pan Operation' is occuring on screen.I dont want map div to receive mouseclick when clicked on 'sidePanel'. Also, when I position mouse over 'sidePanel' and double click on that div, Map is receiving the double click and Zoom Operation is happening . I want to separate map div and sidepanel div.I am experiencing this problem only with Firefox and Chrome browsers. IE is working fine for my requirement. Plz sujjest some Ideas. Thanks for your patience.
Restrict mouseclick through <div> using CSS
- Thread starter ChipD
- Start date