Brian Chan's blog

I don’t think the current jquery syntax to enable/disable form elements is intuitive. But here it is:

1
2

$("#my_element").attr("disabled", "disabled");  // to disable
$("#my_element").removeAttr("disabled");  // to enable

I don’t know what brought me to this video, but I am just amazed that things which I do on my iphone everyday were a major breakthrough in 2007. In just 5 years of time, iphone has become part of our lives. It’s very hard to imagine if I don’t have google map on my phone these days, would I print out the driving directions instead? Um…

If you are looking for nice tooltip libraries, I recommend trying qTip2. It’s a jquery plugin. And it’s got most of the pop-up tooltip features you can imagine.

I personally like this feature, that you can assign different behaviors (by different actions) to the same element. See below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Create our first tooltip
$('.selector').qtip({
   content: 'Mouse entered',
   show: {
       event: 'mouseenter',
       solo: true // Only show one tooltip at a time
   }
})
 
// Remove the previous tooltips data
.removeData('qtip')
 
// Create our second tooltip
.qtip({
   content: 'Click',
   show: {
       event: 'click',
       solo: true // Only show one tooltip at a time
   }
});

With the above code, you can have a specified mouseover preview tooltip, and a detailed view upon a mouse click. Very handy!

Check out their demo page for all the cool features!

Recently I went on newegg and bought this “Patriot Black PBO Core Box Office All-in-one 1080p Full HD Media Player with HDMI PCMPBO25″. (such a long name…) Simply put, a media box that streams to your TV with hdmi.

Just in case I didn’t do justice, you got to take a look at its supported video format list:

- MPEG-1: MPG/MPEG/DAT support up to 1080p
- MPEG-2: MPG/MPEG/VOB/ISO/IFO/TS/TP/M2TS up to 1080p
- MPEG-4: MP4/AVI/MOV support up to 1080p
- DivX 3/4/5/6/7, Xvid: AVI/MKV/ support up to 1080p
- H.264, AVC: TS/AVI/MKV/MOV/M2TS support up to 1080p
- WMV 9: WMV support up to 1080p
- FLV support 352×288
- ISO image
- Real Video 8/9/10: RM/RMVB support up to 720

I mean, what else do you want? It can also hold an internal 2.5 inch hard disk within (not included), so you can copy files into it through usb.

Awesome idea! I thought to myself. It’s about time this kind of product should come out to the market. After all, people prefer watching videos on bigger screens rather than their computer screens.

When I received this in the mail, I was so excited that I quickly tried it out on my TV. Cables were so easy to connect, no brainer. The main screen came out fine. Awesome!

Then to just test it out, I copied a mkv file to my 32Gb usb stick and inserted it into the pbo box.

After a long while, the greyed out USB menu is still greyed out. I thought to myself, perhaps this usb is too big? (ah… then I guess I can’t really use my external hard drive later…) I tried formatting my usb stick to fat32, still no luck…

I was so disappointed and sad. Sad because there were so many positive comments online about it, I felt cheated on. This’s got to be a conspiracy!

I then went onto newegg and followed the steps to do a RMA return. Weird I must say, I ended up doing a RMA exchange, and paid about $10 for the shipping fee out of my pocket. Sometimes, I do unexplainable things…

A few days later, the same PBO box arrived to my door. Still plastic wrapped, everything was the same, only that my heart was extremely skeptical this time. I unwrapped it and did the same wiring. The same screen came up on my TV.

So now, with my shaking hand I inserted my 32Gb usb stick. Same. Greyed out.

I was more calmed this time. I inserted another 2Gb usb stick, and that seemed to work. I played with the remote and played the mkv video file fine. No lag, and hdmi has sound.

Then I suspected it was the file system format. I spent quite some time on ntfs-3g, and stuff like that. Just to save your time, don’t do that. Keep your file format to fat32.

For whatever reason, all of a sudden I thought of firmware!

I did some searches and I found this obscure webpage documenting the firmware upgrading process: http://www.patriotmemory.com/forums/showthread.php?2131-Update-04-04-2011-PBO-Firmware-Releases

Honestly that page doesn’t really look like anything close to being official. Looks more like a discussion forum. However, you will end up getting the latest firmware. * Btw, after pressing Stop then Pause @ the home screen, I had a hard time reading the bootcode off my screen. I ended up ignoring that.

At my time of installing the firmware, the filename is BETA_P70R2.zip, released on Apr 4, 2011. Yea…. I know, I see the word BETA as well… no joke. Do it at your own risk.

After installing the new firmware, I see this very similar main screen.

Yea, see that orange background in the icon? Believe me, you are in much better shape with this orange color.

My PBO box then recognized my 32 Gb fat32 usb stick with no problem! You will also see the blue highlight in the selection menu, which wasn’t there before. Great UI experience I guess… good job!

Now I just need to make sure this box will work fine with my internal hard drive. LAN also doesn’t seem to work out of the box with my linksys default setup… I guess I will find out more on another day.

An ordinary div

A div with rounded corners

The second div looks so much more fun and professional at the same time!

As it turns out, all you need is one or two extra lines in order to add these rounded corners. See code below:

1
2
3

#my_div {
  border-radius: 15px;
}

If you want more fine-tuning, try the following. The first parameter is the horizontal radius of the rounded corner, the second the vertical.

1
2
3

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Play around with it and see if you can make something like the following.

Say, you have an array like the following, how to delete “three”?

1

$arr = array("one", "two", "three", "four", "five");

PHP has this function called unset, with which you can do:

1

unset($arr[2]);

But… yea… there is no direct way to do something like array_delete_value(“three”)… I don’t understand why there is no easy way to do deletion by value…

You will need to get the array index first, whenever you want to delete by value. We will use array_search to get the index or key.

1
2
3

if ( ($key = array_search("three", $arr)) !== false) {
  unset($arr[$key]);
}

The above is better than traversing the whole array linearly.

If you need to do a global delete, use a while loop.

1
2
3

while ( ($key = array_search("three", $arr)) !== false) {
  unset($arr[$key]);
}

This happens very often. We have some non ascii characters to display on a webpage. Without properly encoding, we see funny latin letters or squares displayed instead.

This is not an “international” issue. Even in the US, when users copy and paste content from a word document, that content often contains non-ascii characters, say the bulletin points. After such content gets inserted in the db, that content often simply gets blindly displayed onto a webpage along with other well-behaved data. So we see the funny characters again.

Assuming the database has the right stuff, the simple solution to fixing this is the following.

1

  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="UTF-8">

Just put that in your html head section. You webpage should then be displayed properly.

Ref link: http://www.terena.org/activities/multiling/euroml/tests/html-eurolat1.html

If you ever have a <pre> tag in a div or table, and you are providing say text from your database to the pre element, be very careful that the default style of the pre tag will let the text keep running until hitting the newline character. This is probably not desirable because these long text lines will push their container thus expanding the container unexpectedly.

It’s ugly to say the least.

To enable the expected text wrapping, do:

1
2
3

pre {
  white-space: pre-wrap;
}

This will make the long lines wrap around when hitting the container’s edge, thus respecting your specified container’s width.

I only tested this in Chrome and Safari btw.

Ref link: http://stackoverflow.com/questions/1634203/pre-tag-in-html-with-fixed-width

Very often I need to encode some string in PHP, then pass that to javascript. For example, say I am using PHP to generate some javascript functions. See below:

1
2
3
4
5
6
7

$s = "some text from somewhere";
$js_code = "
  function do_something(some_text){
    alert(some_text);
  }
  do_something('$s');
";

The above javascript code would work fine until one day you have some symbols in $s, for example the single quote. (There may be more troublemakers, but at least this is a common one).

So now you start thinking about encoding and decoding. It turns out there are so many ways to do them… Just which one do you need?

Below is my solution, you are welcome and encouraged to find your own solution.

1
2
3
4
5
6
7
8
9

$s = "some text !@#$%^&*()_+[]\{}|;':",./<>?";  // of couse this is not syntactical, in reality think of this string coming from a db
$s_encoded = rawurlencode($s);
$js_code = "
  function do_something(some_text_encoded){
    some_text = unescape(some_text_encoded);
    alert(some_text);
  }
  do_something('$s_encoded');
";

Hope this can save your time.

Here are some handy bin,hex,dec convertors.

Binary => Dec or Hex
http://www.easycalculation.com/binary-converter.php

Dec => Bin or Hex
http://www.easycalculation.com/decimal-converter.php

Hex => Dec or Bin
http://www.easycalculation.com/hex-converter.php