Geocaching Map search panel disappears...

[jri]

The details of your configuration (browser and version, application version, etc.)

 

ASUS TF101 tablet running Android 4.0. Problem appears when using stock Android browser, Firefox Mobile 16.0.2, Firefox Mobile Beta 17.0, Opera Mobile 12.10 or Chrome Mobile 18. (No scripts/extensions installed).

 

The specific steps you are taking that lead to the observed behavior:

 

1. Go to http://www.geocaching.com/map
2. Click on the "Pocket Queries" button at the top of the search panel on the left of the page.
3. Click on the "Search" button at the top of the panel.

Details of the observed behavior:

 

After step 1, everything looks normal. The search panel has the normal text input box and the Filter Caches controls. After step 2, the panel goes blank: you can still see the "Search", "Pocket Queries" and "Set Map Preferences" buttons, but nothing in between. No list of pocket queries is displayed. After step 3, the panel is still blank - none of the search or filter controls come back.

 

Details of the expected behavior, i.e. what you believe should be happening instead:

 

When I click the "Search" and "Pocket Queries" buttons, I expect the panel content to toggle between the two.

 

Notes:

 

I don't have this problem at all on my Win XP laptop, using the desktop versions of Opera 12.10, Chrome 23 and Firefox.

 

On the tablet, this behaviour is happens in multiple browsers, whether I use the touch screen or the tablet's mouse. My guess is that it could be something to do with how the site uses JQuery Mobile UI, possibly a CSS issue.

 

[jri]

I've still got this bug, although I've now upgraded to the latest versions of Firefox Mobile, Chrome Mobile and Opera Mobile. However, I think I've figured out what is causing it.

 

What is supposed to happen is this. The sidebar tabs have an <A> link embedded in them. When you click on it, an event listener is supposed to pick up the href attribute from the link, clear all the <DIV> elements in the sidebar scroller (by setting "display:none;" in CSS), then make the <DIV> visible whose id matches the href from the link (by setting "display:block;").

 

On Android, what seems to happen is that JQuery Mobile intercepts the click, and sets the href attribute on the link to "#" (JQuery Mobile uses hashes for its own inter-page navigation). That means that all of the tabs in the sidebar get cleared, but the event listener can't find the correct one to show.

 

A workaround is possible, which could either be implemented by Groundspeak or inserted using a script on browsers with userscript support. You need to copy the href attribute in each of the tab links into a new attribute, then add a modified event listener that looks for the new attribute. Here's some code that works for me (tested in Opera only):

 

(function() {
 var i, t;
 for (t = $("#searchtabs a"),i = t.length-1;i>=0;i--) {
   t[i].setAttribute("data-gme-href",t[i].getAttribute("href"));
 };
 $("#searchtabs").on("click", function (e) {
   $("#scroller>div").css("display", "none");
   $(document.getElementById(e.target.id || e.target.parentNode.id || e.target.parentNode.parentNode.id || "searchlink" ).getAttribute("data-gme-href")).css("display", "block");
  });
}());