SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adress bar is over text when you linking on page in iPad & iPhone

    I added a tag, and it is used before the page finishes loading.
    If you run the page in an iPhone or iPad (before the page finishes loading) the address bar is over the text when clicking on links, and you have to scroll to get to the top.

    I want people to be on top without the address bar is over the text when you click on the links.

    webpage

    Code:
    function modLinks()  
    {   var links = document.getElementsByTagName('a');  
        for(var i=0;i<=links.length-1;i++)  
        {  
            if(links[i].getAttribute('tag')=='before')  
            {  
                links[i].href = '#/' + links[i].href.split('#')[1];  
            }  
        }  
    }

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The apple documentation says you can simply add the following META tag to your <head> and it should go into a mode without the address bar.

    HTML Code:
    <meta name="apple-mobile-web-app-capable" content="yes" />
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it, but I guess it only works when the page finishes loading. In an iPhone and iPad can I expect to see, in the address bar, how much the page has loaded and I can not see that the address bar disappears. It will disappear after the page has finished loading.

    But the first link "The Cafe" is working and you find yourself always on top (with the address bar)

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Apart from the above there is no way that i know of to disable the address bar on load as it needs to be there in case a user needs to navigate somewhere else really quickly, on a side note your site on load is 9.5 mb/s which is VERY bad for performance as mobile devices have trouble handling large images after around 1024 pixels on an iPad and 768 pixels on an iPhone. You should highly consider optimizing them so they are only about 500-600 kb/s each which will vastly improve the load time and performance as even viewing it on my desktop caused some lag due to the size of the background images.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to reduced the entire page for an iPhone (768px), but it was "destroyed" if you pulled the browser window on a regular computer back and forth. So I let the number of pixels in a computer be the same as in an iPhone. But the larger images is supposed to disappear in an iPhone so it should not take so long to load the page.

    But my first thought was that you could solve the problem by using JavaScript.

    I want the page to be as it is now, unless you have a better idea?


Bookmarks

Posting Permissions

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