Multiple inline / on page css Popup windows using JQuery

[jaagare]

I am having a specific issue.

Here is what I need.

I have the main page with an image and I have image maps on it.

When a user hovers / clicks on the specific area, I need to open a popup on the page with another image with image maps.

Again when a user hovers / clicks on the specific area within the new popup another popup opens.

The issue I am having is this.

If I hover / click on the first image map I am able to open a new popup. But the issue comes up when I use the script to open the popup on the new popup. Here sometimes it opens / sometimes it doesnot.
Also once a popup opens the script fails to work for other popups on the page. Only after I refresh the page I can open popups again.

Any jquery script / function that I could use for the issue I am facing?

Thanks in advance for the help

[Mandes]

Can I ask.. are you sure you want layed popups !!! why not consider changing the original image each time and staying in the parent window.

[jaagare]

Well that's a good idea. I could use that. But am not very good with jquery. Any pointers towards achieving that? Thanks a lot for the suggestion.

[Mandes]

I assume the image is enclosed in a DIV ? Use the innerHTML javascript method to change the contents of the div (ie rewrite the html on the fly)

If your not familiar look here for a text example http://www.tizag.com/javascriptT/jav...-innerHTML.php

[jaagare]

Thank you very much for the link. Looks like this should solve my issue. Shall get back incase I get stuck somewhere

I assume the image is enclosed in a DIV ? Use the innerHTML javascript method to change the contents of the div (ie rewrite the html on the fly)

If your not familiar look here for a text example http://www.tizag.com/javascriptT/jav...-innerHTML.php

[jaagare]

This I believe is needing a lot of coding. Further for each window need to create a popup and on close change event. Is there nothing a bit simpler available? I have a total of around 100 popups to open and this would result in a lot of coding.

Attaching a screen of what is needed. Any help is highly appreciated.

popups.jpg

[Mandes]

Jaagare

Attachments can take a long time to approve ... better to stick the jpg on your server and give us a link.

100 popups, that sounds extreme (and extremelly annoying for the user). Perhaps you need to rethink your site layout plan and see if theres a better way.

[jaagare]

Here is the attachment via site link

Jaagare

Attachments can take a long time to approve ... better to stick the jpg on your server and give us a link.

100 popups, that sounds extreme (and extremelly annoying for the user). Perhaps you need to rethink your site layout plan and see if theres a better way.

[jaagare]

Yes I am aware that so many popus are not good for any site. But thats what the design team wants done and the design team is not ready to move an inch in this regard.

I tried explaining many times that load times would suffer and not the best way to create a page, but the design team believes thats the way to go.

I also created a couple of small demos explaining the issues but thats not changed their outlook. They feel there is nothing much to do, but I explained it would mean a lot of coding / work.

Further, I also gave them the idea, that we could create on click to to to a specific page and then have popup on that page. That way we could limit the number of popups but they need it all on a single page.

Any help is highly appreciated.

Jaagare

Attachments can take a long time to approve ... better to stick the jpg on your server and give us a link.

100 popups, that sounds extreme (and extremelly annoying for the user). Perhaps you need to rethink your site layout plan and see if theres a better way.

[Mandes]

OK, I'd treat the whole site as you would a multilayered menu bar. Make a database to store the relationships of each popup to other popups and hold the content for each within.

Id then use AJAX to query the database on each click, fetch the new info and use the innerHTML function I mentioned earlier to change the content of the page/div.

I still wouldnt be using popups per se, rather changing the content of the same screen on the fly.

If you are absolutely forced to use real popups you can still use the same functionality, but the finished design will be more cluncky

[jaagare]

Thank you for the response. Let me try if AJAX works and get back.