Links do not work in Safari on iPhone 3/4
Hello,
I wondered if anyone had experienced a similar problem, or if anyone has any suggestions for this issue.
I have a site that works on all desktop OS and browser combinations, but ALL links <a> do not work when viewed on the iPhone 3 or 4 browser. The click seems to register a click (tap) by highlighting the correct area, and then nothing happens. The page does not reload. There are no html issues (strict doctype) or javascript errors being produced. The links just appear to be disabled. No other sites are affected on the phones used to test this, and they have been power cycled thoroughly.
Any suggestions/thoughts?
Thanks in advance for any replies.
Voncox
QUICK FIX? I am having the same issue. Can you look at this code?
Here is the website to view on iphone or android:
www.utilichoice.net/mobile/iphone/index.html
The links that nav within the site work great, but if you try to nav externally, then you get the highlight of the button then no action. I do not program .js so I am lost on this one. Is this a quick fix? Thank you!
:)
Part 1 of 2: The Javascript .JS file...
-----------------------------------------------------------------------------------
HTML Code:
(function() {
var animateX = -20;
var animateInterval = 24;
var currentPage = null;
var currentDialog = null;
var currentWidth = 0;
var currentHash = location.hash;
var hashPrefix = "#_";
var pageHistory = [];
addEventListener("load", function(event)
{
var body = document.getElementsByTagName("body")[0];
for (var child = body.firstChild; child; child = child.nextSibling)
{
if (child.nodeType == 1 && child.getAttribute("selected") == "true")
{
showPage(child);
break;
}
}
setInterval(checkOrientAndLocation, 300);
setTimeout(scrollTo, 0, 0, 1);
}, false);
addEventListener("click", function(event)
{
event.preventDefault();
var link = event.target;
while (link && link.localName.toLowerCase() != "a")
link = link.parentNode;
if (link && link.hash)
{
var page = document.getElementById(link.hash.substr(1));
showPage(page);
}
else
link = link;
}, true);
function checkOrientAndLocation()
{
if (window.outerWidth != currentWidth)
{
currentWidth = window.outerWidth;
var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
}
if (location.hash != currentHash)
{
currentHash = location.hash;
var pageId = currentHash.substr(hashPrefix.length);
var page = document.getElementById(pageId);
if (page)
{
var index = pageHistory.indexOf(pageId);
var backwards = index != -1;
if (backwards)
pageHistory.splice(index, pageHistory.length);
showPage(page, backwards);
}
}
}
function showPage(page, backwards)
{
if (currentDialog)
{
currentDialog.removeAttribute("selected");
currentDialog = null;
}
if (page.className.indexOf("dialog") != -1)
showDialog(page);
else
{
location.href = currentHash = hashPrefix + page.id;
pageHistory.push(page.id);
var fromPage = currentPage;
currentPage = page;
var pageTitle = document.getElementById("pageTitle");
pageTitle.innerHTML = page.title || "";
var homeButton = document.getElementById("homeButton");
if (homeButton)
homeButton.style.display = ("#"+page.id) == homeButton.hash ? "none" : "inline";
if (fromPage)
setTimeout(swipePage, 0, fromPage, page, backwards);
}
}
function swipePage(fromPage, toPage, backwards)
{
toPage.style.left = "100%";
toPage.setAttribute("selected", "true");
scrollTo(0, 1);
var percent = 100;
var timer = setInterval(function()
{
percent += animateX;
if (percent <= 0)
{
percent = 0;
fromPage.removeAttribute("selected");
clearInterval(timer);
}
fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";
toPage.style.left = (backwards ? -percent : percent) + "%";
}, animateInterval);
}
function showDialog(form)
{
currentDialog = form;
form.setAttribute("selected", "true");
form.onsubmit = function(event)
{
event.preventDefault();
form.removeAttribute("selected");
var index = form.action.lastIndexOf("#");
if (index != -1)
showPage(document.getElementById(form.action.substr(index+1)));
}
form.onclick = function(event)
{
if (event.target == form)
form.removeAttribute("selected");
}
}
})();
Part 2 of 2: The .html file...
-----------------------------------------------
www.utilichoice.net/mobile/iphone/index.html
You're fast help is appreciated! I have to get this working ASAP or choose another method, but I really like how this one works, by Joe Hewitt.
THANK YOU!