christkene
New Member
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 \[code\]#sidepanel\[/code\] and holding mouse click, if I drag, then \[code\]#map\[/code\] is receiving the mouse click and 'Pan Operation' is occuring on screen.I dont want '#map' to receive mouseclick when clicked on \[code\]#sidepanel\[/code\]. Also, when I position mouse over \[code\]#sidepanel\[/code\] and double click on that div, \[code\]#map\[/code\] is receiving the double click and Zoom Operation is happening . I want to separate \[code\]#map\[/code\] and \[code\]#sidepanel\[/code\].I am experiencing this problem only with Firefox and Chrome browsers. IE is working fine for my requirement.Please suggest some ideas. Thanks for your patience.