Here's how to minimize the url address bar in a web page on a blackberry (blackberry 6 anyways).
Put this script at the bottom of the page, or call it ondocumentready:
if(navigator.userAgent.toLowerCase().indexOf('blackberry')>0)window.scrollTo(0,40);
It causes the browser to scroll down 40 pixels, which essentially makes the browser bar hide itself.
Showing posts with label blackberry. Show all posts
Showing posts with label blackberry. Show all posts
Sunday, April 17, 2011
Tuesday, April 12, 2011
How to make vCard QR Codes that are compatible with iPhone, Android and Blackberry
I've been working on a web page where you can scan a company's vCard easily on your smartphone and have it saved to your contact list. It's definitely a pain in the ass. Here is a sample QR code with a vCard in it:

Here are some tips:
Here are some tips:
- use the Image Chart Editor on Google Code - you have to look for the QR Code chart in the gallery. Basically, you send it a URL with the vCard in the querystring and it sends back a QR Code image. Don't forget to url-encode your querystring.
- You don't need to email a vCard to iPhone, it can read them directly from a QR Code with the right app.
- I tried a few different QR Code readers for iPhone and most of them sucked at parsing vCards. The best that i found was Qrafter, and it's free.
- I used Barcode Scanner on Android.
- Android didn't want to accept a URL, so I put it in the NOTE as well. Any tips?
- With Blackberry 6, use AppWorld, hit the menu, then choose Scan a barcode.
- Blackberry can't read vCards directly from a QR Code, but you can qr-code a URL that returns a vCard. You'll want to send back this PHP header: header("Content-type:text/x-vcard");
Young, bored, and know Java? Please write a decent QR code reader for blackberry :)
Here is a vCard that I tested with Windows 7, Blackberry 6, iPhone 4 and Android 2.3.3
Saturday, March 5, 2011
How to make a mobile theme in Yii
Making a mobile theme in Yii is pretty easy. Getting it running smoothly is more work. Here's how:
1. under /themes/ create a folder "mobile"
2. copy main.php from /protected/views/layouts/ to the /themes/mobile/views/layouts/ folder. You don't need to copy anything else. Views, etc will be inherited.
3. The blueprint CSS framework doesn't seem to be too mobile friendly. By default, there will be a lot of horizontal scrolling. So, in /themes/mobile/views/layouts/main.php, remove these lines:
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
You can test it out by setting 'theme'=>'mobile' in /protected/config/main.php
Now, you want to detect the browser type and set the right theme (which i'll cover next), BUT you also want to give users a choice. For example, you should be able to test the mobile site on your desktop web browser, without changing the user-agent string.
* one thing you may not know is that Yii looks for the classic theme on start, which is empty. But you can put views or layouts there and they will be used without configuration change.
You can add some styling to the mobile theme to make it look better. Here are some items to consider:
<style>
input[type=text], input[type=password], textarea {max-width:260px;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
html, body, #content {margin:0; padding:0;}
#content h1, #logo, #footer, .portlet-title {display:none;}
#sidebar {padding:0; margin:0; margin-top:5px;}
* {float:none; }
</style>
So, do this. In /protected/config/main.php, set
To switch themes, make a new controller. In /protected/controllers/ create BrowserController.php, and add this text:
To switch to the mobile theme, go to webroot/browser/mobile and to switch back go to webroot/browser/anythingelse
Making the Theme
1. under /themes/ create a folder "mobile"
2. copy main.php from /protected/views/layouts/ to the /themes/mobile/views/layouts/ folder. You don't need to copy anything else. Views, etc will be inherited.
3. The blueprint CSS framework doesn't seem to be too mobile friendly. By default, there will be a lot of horizontal scrolling. So, in /themes/mobile/views/layouts/main.php, remove these lines:
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
You can test it out by setting 'theme'=>'mobile' in /protected/config/main.php
Now, you want to detect the browser type and set the right theme (which i'll cover next), BUT you also want to give users a choice. For example, you should be able to test the mobile site on your desktop web browser, without changing the user-agent string.
* one thing you may not know is that Yii looks for the classic theme on start, which is empty. But you can put views or layouts there and they will be used without configuration change.
You can add some styling to the mobile theme to make it look better. Here are some items to consider:
<style>
input[type=text], input[type=password], textarea {max-width:260px;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
html, body, #content {margin:0; padding:0;}
#content h1, #logo, #footer, .portlet-title {display:none;}
#sidebar {padding:0; margin:0; margin-top:5px;}
* {float:none; }
</style>
Wiring up the Theme
So, do this. In /protected/config/main.php, set
'onBeginRequest'=>array('MyClass', 'BeginRequest'),
in /protected/components/ create a file MyClass.php like this:class MyClass
{
public function BeginRequest(CEvent $event)
{
Yii::app()->theme = Yii::app()->session['theme'];
}
}
This will look for a theme name in the session. If it does not exist, Yii will use no theme (it will look like it does normally).To switch themes, make a new controller. In /protected/controllers/ create BrowserController.php, and add this text:
class BrowserController extends Controller
{
public function actionIndex($theme)
{
Yii::app()->session['theme'] = $theme;
$referrer = Yii::app()->request->urlReferrer ? Yii::app()->request->urlReferrer : "/mob"; //or whatever your website root is
Yii::app()->request->redirect($referrer);
}
}
The above will take a theme name as a querystring parameter and put it in session, and redirect to either the HTTP Referrer or to the root of your site. You could also look for this directly in BeginRequestTo switch to the mobile theme, go to webroot/browser/mobile and to switch back go to webroot/browser/anythingelse
Labels:
android,
blackberry,
cascading style sheets,
css,
iphone,
php,
theme,
yii
Subscribe to:
Posts (Atom)