Wednesday, January 16, 2008 @ 11:28 AM
Hiding the Address Bar: Take 2
We've been receiving some feedback that the following code (responsible for hiding Safari's address bar) does not work on iPod Touch:
No one on this end has an iPod Touch, so we can't test to see if that's true or not, but I've had my own problems with this code in the past, so here are some additional things to try and keep in mind.
Try using the following code instead. It doesn't require you to add onload="hideAddressBar()" to your body tag and has proved more reliable in the past.
Additionally, window.scrollTo(0, 1) does NOT seem to work if you include external CSS files using the following method:
Instead, do this:
Hope this helps!
//Ryan Jennings
function hideAddressBar() { window.scrollTo(0, 1); }
No one on this end has an iPod Touch, so we can't test to see if that's true or not, but I've had my own problems with this code in the past, so here are some additional things to try and keep in mind.
Try using the following code instead. It doesn't require you to add onload="hideAddressBar()" to your body tag and has proved more reliable in the past.
addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false);
function hideAddressBar() { window.scrollTo(0, 1); }
function hideAddressBar() { window.scrollTo(0, 1); }
Additionally, window.scrollTo(0, 1) does NOT seem to work if you include external CSS files using the following method:
<link rel="stylesheet" type="text/css" href="_assets/css/styles.css" />
Instead, do this:
<style type="text/css">
@import "_assets/css/styles.css";
</style>
@import "_assets/css/styles.css";
</style>
Hope this helps!
//Ryan Jennings
Labels: iphone development, ipod touch, javascript
MindComet at 11:28 AM - View Post
|
1 comments
Wednesday, January 9, 2008 @ 6:59 PM
Q&A: Can you hide Safari's lower navigation bar?
We have our very first reader-submitted question. Here goes:
Unfortunately, I have bad news for you. It's currently not possible to hide that bar. I'm hoping that Apple will make some changes to how Safari on the iPhone operates in the near future. Perhaps they could tweak the browser so that the lower navigation bar only displays when the user is scrolling, and then slide back down and out of the way a second or two after the user stops scrolling or when the user starts clicking around the site. Additionally, it'd be nice if you could lock the page so that it doesn't move at all (if a page was designed to fit the screen exactly -- currently you can only prohibit horizontal scrolling, not vertical). Although, if scrolling was disabled... you'd never get back to the address bar (let alone a hiding lower navigation bar). Maybe instead of hiding the address bar completely, they can leave a sliver of it to display the page title. Clicking the title would slide back in the full address bar and navigation bar. I dunno. Apple, figure it out. Sorry I couldn't be of more help Chris.
If there are more of you out there with questions, feel free to email us at ask@iphoneminds.com. We look forward to hearing from you!
// Ryan Jennings
Hi,
Read your website with interest and wondered if you can help. ... My question is through additional code, how do you make the bottom 32px bar disappear please! I only want to ... utilize the absolute full screen as if in movie mode. ... Your help would be very much appreciated.
Thanks,
Chris
Unfortunately, I have bad news for you. It's currently not possible to hide that bar. I'm hoping that Apple will make some changes to how Safari on the iPhone operates in the near future. Perhaps they could tweak the browser so that the lower navigation bar only displays when the user is scrolling, and then slide back down and out of the way a second or two after the user stops scrolling or when the user starts clicking around the site. Additionally, it'd be nice if you could lock the page so that it doesn't move at all (if a page was designed to fit the screen exactly -- currently you can only prohibit horizontal scrolling, not vertical). Although, if scrolling was disabled... you'd never get back to the address bar (let alone a hiding lower navigation bar). Maybe instead of hiding the address bar completely, they can leave a sliver of it to display the page title. Clicking the title would slide back in the full address bar and navigation bar. I dunno. Apple, figure it out. Sorry I couldn't be of more help Chris.
If there are more of you out there with questions, feel free to email us at ask@iphoneminds.com. We look forward to hearing from you!
// Ryan Jennings
Labels: iphone development, javascript, question and answer, safari
MindComet at 6:59 PM - View Post
|
3 comments
Monday, January 7, 2008 @ 11:28 PM
Draw vector art using the canvas
We all know that the iPhone is incapable of displaying Flash content. But there are still two Flash-like benefits that we can take advantage of on the iPhone: vector art and animation. When Mac OS X 10.4 was released, Safari supported a new feature called the canvas. Safari, Firefox, Dashboard, and any Web Kit-based application (including the iPhone) can do arbitrary drawing of content using the canvas tag. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz to paint complex paths and shapes in that area. The canvas tag was heavily utilized by the initial offering of Dashboard widgets released by Apple. Now you can use it to draw shapes to your iPhone webpages.
Don't get me wrong, this technique is not for amateurs. But if you're already familiar with using the Flash MX Drawing API, drawing using the canvas should be pretty easy. Additionally you can then use Javascript to continually redraw the canvas and animate your art.
Following is a silly example of what the canvas can do. Not very practicle, but go ahead and give it a whirl to see what it produces.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script type="application/x-javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i = 0; i < 6; i++) {
for (j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas"></canvas>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script type="application/x-javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i = 0; i < 6; i++) {
for (j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas"></canvas>
</body>
</html>
For more information on how to use the canvas, check out Mozilla's canvas tutorial. It's filled with static and animated examples. Enjoy!
http://developer.mozilla.org/en/docs/Canvas_tutorial
// Ryan Jennings
Labels: animation, canvas, flash, iphone development, javascript
MindComet at 11:28 PM - View Post
|
0 comments