olbers / iui

Automatically exported from code.google.com/p/iui
MIT License
0 stars 0 forks source link

AJAX links cause window to scroll up while loading revealing Safari address bar #2

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
To reproduce the problem:
1. open up http://www.mountainmighty.com/ on iphone
2. click on "Doctrine & Covenants", then click on Chapter 4 (Ajax link). You'll 
see the page scroll up 
while loading, then down when the ajax call is complete.

What is the expected output? What do you see instead?
When clicking on a link the page shouldn't scroll.

What version of the product are you using? On what operating system?
Using iuix.js and iuix.css, revision 5 on iPhone

Original issue reported on code.google.com by charlese...@gmail.com on 12 Jul 2007 at 5:39

GoogleCodeExporter commented 9 years ago
in the iuix.js, I moved the scrollTo call from the slidePages function up to the
showPage function, right after setTimeout:
showPage:function(_b,_c){if(_4){_4.removeAttribute("selected");_4=null;}if(_b.cl
assName.indexOf("dialog")!=-1){showDialog(_b);}else{var
_d=_3;_3=_b;if(_d){setTimeout(slidePages,0,_d,_b,_c);scrollTo(0,1);

This fixed the problem for me.

Original comment by logans...@gmail.com on 16 Jul 2007 at 1:28

GoogleCodeExporter commented 9 years ago
I have the same problem using iui 0.3.0

Whenever I click on a link, the addressbar comes down for a brief second and
imediatly hides again - ugly. 

I moved the scrollTo function as explained in the comment by logansbro, but 
nothing
changed. 

Original comment by erich.b...@gmail.com on 31 Jan 2008 at 9:32

GoogleCodeExporter commented 9 years ago
[deleted comment]
GoogleCodeExporter commented 9 years ago
I had a similar problem developing an iPhone app using iui 0.13 with AJAX links 
- if
I was calling an external data source on click (essentially a relative path URL 
like
scriptname.php), the address bar would drop down for a moment immediately after 
a
click, then hide almost immediately. In order to prevent that drop down, I 
realized I
needed to include a hash mark before the relative path. Then another tweak had 
to be
made to ensure this click wasn't handled as if I were loading in a hard-coded 
page
element. I added an underscore after the hash mark, and tweaked the click event
listener to differentiate between these two types of hashes. So
in iui.js:

addEventListener("click", function(event)
{
    var link = findParent(event.target, "a");
    if (link)
    {
        function unselect() { link.removeAttribute("selected"); }

        if (link.href && link.hash && link.hash != "#" && (link.hash.slice(0,2) != "#_"))
        {
            link.setAttribute("selected", "true");
            iui.showPage($(link.hash.substr(1)));
            setTimeout(unselect, 500);
        }
        else if (link == $("backButton"))
            history.back();
        else if (link.getAttribute("type") == "submit")
            submitForm(findParent(link, "form"));
        else if (link.getAttribute("type") == "cancel")
            cancelDialog(findParent(link, "form"));
        else if (link.target == "_replace")
        {
            link.setAttribute("selected", "progress");
            iui.showPageByHref(link.href, null, null, link, unselect);
        }
        else if (!link.target)
        {
            link.setAttribute("selected", "progress");
            var hashStrip = link.hash.slice(2);
            iui.showPageByHref(hashStrip, null, null, null, unselect);
        }
        else
            return;

        event.preventDefault();        
    }
}, true);

And in the HTML:

<ul selected="true">
        <li><a href="#_scriptName.php">External data loader link</a></li>
        <li><a href="#settings">Internal, hard-coded data link</a></li>
    </ul>

So now that there's a hash mark in front of the relative URL, Safari thinks 
this is
an anchor link and does not drop down the address bar. The showPageByHref 
function is
tweaked to accept a sliced version of the hash mark instead of the link.href,
excluding the hash and the underscore. Hope this helps someone - I realize it's 
been
a while since these posts.

Original comment by christia...@gmail.com on 12 May 2008 at 8:33

GoogleCodeExporter commented 9 years ago
For the record, I'm seeing this problem too. I've implemented the code 
suggested by
christiancox.com and the code does solve the problem for me.

Original comment by joe.c...@gmail.com on 11 Jun 2009 at 11:55