IPhone hack: hiding Address bar using JavaScript

On 1 Mar, 2012 in Javascript with Comments

Creating a mobile website template for iphone is not as easy as we think. Because safari have lot of default browser styles which are useful in most of the cases, but not all.

IPhone hack – hiding Address bar using JavaScript #1 image

Let’s start with basic issue of address bar which takes our layout few pixels down. Which means the template will be overlapped by address bar.

To get rid of this problem, add following javascript in your body or head

<script type="text/javascript">
   function hide_address_bar() {
       setTimeout(function() { window.scrollTo(0, 1); }, 100);
   }
</script>

Then add onload event hide_address_bar to body

<body onload="hide_address_bar()">

That’s it we are done here is the output

IPhone hack – hiding Address bar using JavaScript #2-image
Tags: , ,

Comments

  1. Ibshop says:

    Very Nice!  Thank you.  Worked perfect.