Show/hide only working on one of three popups

[filch]

Hello,

I am trying to track down an issue with some content in a couple of popups generated with j-query. If you go to http://streetkids.zuka.net/sandbox/map-new.05.html and role over and click on ethiopia on the African continent, you will get a map that pops up. On the map you will see one or more flags. If you click on them another popup will be generated and it has tabs at the top. Clicking on these shows or hides certain content. If you do the same thing for say India or Nepal, it all works except the tabs at the top. They do nothing. I have compared the code to the ethiopia code and it should be the same. I have tried naming the content areas uniquely although I do not think that should make a difference in this case.

I would appreciate it if someone could have a look and see if they can spot the problem. Apparently I have gone blind and brain dead .... again!!

Cheers,

Dave

[Airshow]

Dave,

You need to fix something else first.

I'm using Opera here. The tabbed popups are displaced half-offscreen to the left. The tabs don't show.

It's may be a question of screen size rather than browser of course. I'm at 1024 x 768.

Airshow

[filch]

That is a screen rez issue I will address after I get the rest of the functionality working.

Thanks,

Dave

[filch]

OK, what I have done so far is the following: with the nepal popup, when you click on it, I have change the CSS so that the page scrolls and you should be able to see all the content. This is temporary just until I can solve this problem. I have added the following to the pop up so we can be sure the J-Query is running:

$('h4').css({textDecoration: 'underline'});

So, if the <h4> content is underlined, J-Query is running.
I have verified that it is. In the case of the nepal content, all content is being hidden, with the exception of the content for the first tab, the Overview. However, clicking on the other tabs does not trigger J-Query to hide all content except the content belonging to the clicked tab. Can't see it but perhaps someone else can?

Thanks

Dave

[filch]

I have had a bit of a break through in that I do have it working. This, unfortunately, is tempered by the fact that it appears that everything has to be absolutely unique. The popup divs, the tab ids on the content popups as well as the actual content divs on the popups ... everything, even though you have clicked on a different country. While this works, it will become a nightmare to keep straight. Is there any way to say, "clear the cache", or something like that, in order to reuse id names on different countries? I hope that is somewhat clear.

Dave

[Airshow]

Dave,

There's a number of ways to address this. Here are the main two:

Method 1: Have just one popup for all countries, and copy content into it for the current country. Elsewhere in the DOM, all country-related HTML is effectively a "hidden database", on which you draw each time a country's content is to be displayed.

Method 2: One popup per country, achieved by structuring/styling the content for each country as a popup. Then simply show/hide the relevant country container (typically a div) each time a country's content is to be displayed.

Any other method will be most likely be a variant of one of these two.

Personally I would use method 1 because, although there is more to do each time the popup is to be displayed, it is kinder on the client computer on page load, as it only has to render one (contentless) popup, not one per country.

Whichever method you use, the only elements with an id should be the country containers. Everything inside those containers should be identified by class - not id.

For my Method 1, the classes will be used to identify the content to be copied into the popup. For my method 2, the classes will be used by the stylesheet to style each country's content as a popup.

In javascript/jquery, to address a particular country, you set a "country" variable (typically inside a function) to be a jQuery reference to that country. Then address all the contained content relative to that container with .find() .

function showCountry(countryID){
  var country = $("#"+countryID);
  var photos = country.find(".photos");
  var media = country.find(".media");
  ...
}

Thus, you have completely avoided the need to reuse ids, and the need to "clear the cache" should never arise.

Airshow

Have you tried to approach this problem by abstracting out all the behaviors and properties common to all the objects involved into one uber object (or objects)? Then simply hand this abstracted object the information and functions it needs to run as a unique entity (instantiation)?

Otherwise you're looking at an unmaintainable mess.

Nice app, BTW.

[filch]

Have you tried to approach this problem by abstracting out all the behaviors and properties common to all the objects involved into one uber object (or objects)? Then simply hand this abstracted object the information and functions it needs to run as a unique entity (instantiation)?

Otherwise you're looking at an unmaintainable mess.

Nice app, BTW.

Thank you.

Are you more-or-less saying what Airshow is saying above in Method 1?

Dave

Yes. Method #1. I think we posted simultaneously so I didn't see his post!

[Airshow]

Yes Pnorq, we posted a couple of minutes apart.

[filch]

Yes Pnorq, we posted a couple of minutes apart.

Ok .. We have enough for a proof of concept now so I will work on making this more efficient over the next number of days.

Thanks both for your input.

Dave