My links won't click unless I refresh!

October 16, 2012 5:57 AM

From my girlfriend, "I am making a mobile website for my work to accompany our regular site. I am writing it in HTML and JQuery. I am writing multiple pages in 1 HTML file. For some reason when I click on the links to the next "page" it will not do anything, but when I refresh the page, it will then go to the next page."

Obviously, she doesn't want her boss seeing this, she's the director of web development for a local business. Message me and I'll send you a link if you would like to see it. Thanks!

posted by lee to computers & internet (8 answers total)

Sorry, it's simply impossible to debug something like this site unseen.
posted by dirtdirt at 6:28 AM on October 16, 2012 [1 favorite]

Without a link or sample of the code its hard to say. I would guess she's using something that allows direct access to the correct page via a url and that code is working but its not triggering from the links. Has she tried adding some debugging (ie alert('link pressed') to the function so she can determine whether the code is even firing when the link is pressed?
posted by missmagenta at 6:28 AM on October 16, 2012

The question states that he'll send a link via memail on request (not the most efficient way of asking the question, granted.)

I'll answer here rather than via mail for the benefit of future googlers:

The technique under use is that the links to subsequent "pages" point to in-page anchors, the targets for which are inside a hidden div for each subpage -- I didn't dig deep enough to find exactly what triggers the hide/reveal of those divs, but that part's working fine so I'll leave it alone.

The reason it's failing is because Safari doesn't trigger in-page anchor links if it thinks those anchors are already visible onscreen. It works fine in firefox, and it works in safari if you make the browser window small enough that the end of the menu (and therefore the beginning of the 'subpage') is outside the viewport.

The quick-and-dirty fix for this would be to position those subpages such that they're "offscreen" before the link is clicked -- this will make the scrollbar always visible as a side effect, but that's fairly unnoticeable.
posted by ook at 6:37 AM on October 16, 2012 [1 favorite]

Or you could also possibly get away with adding onclick="window.location.href='foo.html#subpage'" to each of those links; I'm not sure if that would actually force the "reload" or if it would cause other problems, but it might be worth a try.

If it does work, then I'd generate those click actions on document.ready rather than embedding them directly in the html, something like:

$('a.relevantClass').click(function() {window.location.href=$(this).attr("href")}
posted by ook at 6:44 AM on October 16, 2012

Try using something like jQuery Smooth Scroll or this snippet
posted by Magnakai at 6:45 AM on October 16, 2012

She should be along soon, she is on the bus now. Thanks for looking ook.
posted by lee at 6:51 AM on October 16, 2012

And yes, don't want to put the link on here, but feel free to message me and I'll send it to you.
posted by lee at 7:02 AM on October 16, 2012

You could also use the built-in jQuery UI accordion without the animation. It should give you the same results.
posted by thanotopsis at 8:45 AM on October 16, 2012