SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Multiple inline / on page css Popup windows using JQuery

    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
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  2. #2
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  4. #4
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the link. Looks like this should solve my issue. Shall get back incase I get stuck somewhere


    Quote Originally Posted by Mandes View Post
    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
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  6. #6
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  7. #7
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  8. #8
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Here is the attachment via site link



    Quote Originally Posted by Mandes View Post
    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.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  9. #9
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by Mandes View Post
    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.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  10. #10
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  11. #11
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the response. Let me try if AJAX works and get back.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •