www.webdeveloper.com
Results 1 to 4 of 4

Thread: Links do not work in Safari on iPhone 3/4

  1. #1
    Join Date
    Jan 2011
    Posts
    2

    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

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  3. #3
    Join Date
    Jan 2011
    Posts
    2

    fixed

    Thanks for your reply. I fixed the issue and here is the problem in case anyone else comes across the same thing. Trying to determine the width of an element within a jQuery mousemove function will cause the javascript execution to silently fail. This is not true for all dom elements and I have not yet discovered the root cause of the problem but it is certainly true in this case. No errors will be produced in the browser but links will stop working entirely. The workaround was to determine the size of the element outside the mousemove function. I will post any further details when the solution presents itself.

  4. #4
    Join Date
    Aug 2011
    Posts
    1

    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles