Solved

Solve overlapping issue

Posted on 2010-09-06
5
352 Views
Last Modified: 2012-05-10
Hi Experts,
I have created a web page in ASP.NET , there is google map and on that there are some images.When I place mouse over that image a poup is shown and on right mouse button click on image a context menu ( user defined not of Browser) is displayed.
Context menu is created inside div and also popup window is also on div.To display popup mouseover event is handled and for context menu mouse event is handled.
when I select any image popup shown  and on right click a context menu ( both as per feature) but problem is context menu is hidden behind the popup.I tried to set zindex,for popup I set zindex 0 and for context menu I give zindex 200 ( also test with more).
So please any suggestion how can i prevent this overlapping ?
One solution is by setting  left position of popup less value but in that case look and feel is not good.So any other solution is welcome.

Thanks
0
Comment
Question by:manujtechno
  • 3
5 Comments
 

Author Comment

by:manujtechno
ID: 33615248
I tried opacity to show and hide menu but it is also not working..Any one can help me
0
 

Author Comment

by:manujtechno
ID: 33615509
Any one have any suggestion or go through such type of situation ..
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 33615827
If I've understood you, the problem here is that your popup appears over the menu layer.

I've found this type of problems sometimes and found it were difficult to solve, although sometimes the solution were as easy as changing the order in wich elements are created on the document object model.

When you add subsequent layers one over another, they tend to put over existing ones. If you create all your layers at loading time and show/hide them on client events you should try to create the layers on this order: map --> popups --> menus

If you create and destroy the layers on client execution time your problem could be some CSS related issue, but there is where the real trouble starts, because it could be almost anything in your stylesheet. I would try to disable all the css and try to render my elements on the desired position, them start to enable css files checking that elements doesn't get disordered until I'd be able to found what's happening.

I hope this helps you a bit.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 33616705
In case you have not tried, set the first z-index to 1 (0 may not be a valid value).
Second, z-index is only supposed to work on equal levels in the DOM-hierarchy (so if the popup is owned by '<body>' and the popup by a nested '<div>' the z-index won't affect each other)
Additionally both elements must have 'position', either position:absolute; or position:relative will do the trick, depending on your particular use case.

Most of all it would help if you have an example page where we can investigate the issue, as you see I've already come up with several possible scenario's either or all could apply...
0
 

Accepted Solution

by:
manujtechno earned 0 total points
ID: 33620088
hi,
as per solution given by Bardobrave or by mreuring I already worked on both but i did not get any success.
At last I found the solution that I change the position of tool tip popup by using top and left position of mouse and then using div clientheight and clientwidth value,little bit calculation and finally problem is solved.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Drop down button NAMES disappear 1 41
jQuery value within div undefined 3 22
HTML Lists 3 29
push text up below h2 tag 1 8
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now