Cross-Browser CSS Opacity

.opacity
{
opacity:.5; /*50%*/
filter:alpha(opacity=50);
zoom:1; /*iefix*/
}


Cross-Browser CSS Linear Gradients


.gradient
{

background-color: #DDDDDD; /*fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); /*safari4+,chrome*/
background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC); /*chrome10+,safari5.1+*/
background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); /*ff3.6+*/
background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC); /*ie10*/
background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC); /*opera11.1+*/
background-image: linear-gradient(top, #FFFFFF, #CCCCCC);

zoom:1; /*iefix*/
/*GradientType 0=vertical, 1=horizontal*/
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#FFFFFF', EndColorStr='#CCCCCC');

}


Cross-Browser CSS Box Shadows

I'm starting a series on cross-browser CSS.

Here's how to make a box shadow in Safari, Chrome, Firefox, Opera, and IE5.5+

.box-shadow
{

/* parameters: horizontal-offset vertical-offset blur-radius color*/

-moz-box-shadow:5px 5px 5px #cccccc; /*ff3.5+*/

-webkit-box-shadow:5px 5px 5px #cccccc; /*safari3.2+*/

box-shadow:5px 5px 5px #cccccc; /*chrome3+, opera10.5+, ie9+*/

/* strength=shadow length. direction=angle in degrees clockwise from midnight. color=name or #nnnnnn*/

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#cccccc); /*ie5.5-8*/

zoom:1; /*iefix*/

}


How to fix font and color issues when you put a yii widget inside a jquery widget

If you put a Yii widget inside a jQueryUI widget, then it doesn't look quite right. Here's how to fix it

put this style sheet after you load jQueryUI's style sheet:

<style>
  /*use your site's font and font size*/
  .ui-widget {font-family:inherit; font-size:inherit;}

  /* make form controls inside jqueryui widgets use site font */
  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:inherit; }

  /* links go black inside jqueryui. this changes colour of autocomplete however... */
  .ui-widget-content a {color:#06C;}
</style>

Alternatively, you could just edit jQueryUI's style sheet, or roll your own theme.

Also, the blueprint css framework makes jQueryUI's datepicker look wrong. Look for the typography section of screen.css, and comment out this section:

/* thead th      { background: #c3d9ff; } */


Yii » Missing Features

This will be an ongoing list. Check back in the future.

1. Yii needs a grid that you can edit inline - maybe jqgrid for version 2?
2. The listData->groupField works nicely on dropDownLists, but it would be nice it it worked on checkBoxLists and radioButtonLists too (displaying the category name and indenting associated controls)
3. No concurrency control. It would be nice in Gii if it could generate models that saved the original record values, as well as using them to check for concurrency when saving. 
4. Easier to use some of the new HTML 5 controls, like "search"
5. Built-in basic search on lists (much like on grids)
6. Easier tabular input
7. When you do ajax on a grid (sort or page), it reloads the whole page, finds the grid content, and replaces itself. This is a little inefficient ;) . It would be better if Gii could split the grids out to separate partial views. 
8. Yii seems to get confused sometimes when you have nested JQuery UI controls
9. It would be better if the built-in Blueprint theme was mobile-friendly out of the box, and by that I mean side by side columns that collapse on top of each other on small width screens, perhaps switch to the 1140 grid system. 
10. use superfish on multi-level menus out' the box
11. ZeroClipboard, jQuery WYSIWYG editor, and fullcalendar support out' the box.
12. phpMailer, a flash/html5/silverlight multi-uploader, vcard, pdf, ics support out' the box

How to hide the url address bar on a web page on Blackberry

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.

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:

• 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