Latest Method to Change Facebook Like Box Border Color

As of today, this method still works. This may not work in the future as Facebook changes its support every now and then.

Anyway, here are the codes:

The CSS: .fb-like-box {   width: 348px;   height: 248px;   overflow: hidden;   position: relative;   border: 1px solid #dddddd; } .fb-like-box .dummyBox {   margin: -1px 0 0 -1px;   border: 0px; } The HTML: <div class="fb-like-box"> <div class="dummyBox"> <fb:like-box width="350" height="250" colorscheme="light" show_faces="true" stream="false" header="false"><iframe width="350px" height="250px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?color_scheme=light&amp;header=false&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F[Your FB Page Path]&amp;locale=en_US&amp;show_faces=true&amp;stream=false&amp;width=350&amp;height=250" style="border: none; visibility: visible; width: 350px; height: 250px;"></iframe> </div> </div>

Those in red are the ones you might want to change according to your preference. Those in green are the important settings to pay special attention to and also the locations where the magic comes from. Basically it is to enclose the FB iframe with two DIVs. One is to enclose to FB iframe with purposely 1 pixel smaller on each side to cover up the original FB like box border. The 2nd DIV is to shift the other DIV to upper left hand corder by 1 pixel using "margin: -1px 0 0 -1px;".

Hope you like this little trick. Enjoy!

Read More »

Javascript to Sniff Android Based Browsers

Updated on 7th of February, 2014: The is_touch_device() function in the following is no longer working. Please check out my latest is_touch_device() function that works in the latest Chrome browser (Nevertheless, the rest of the codes are still working. Just replace the latest is_touch_device() function will do):

http://webtrick101.blogspot.com/2014/02/detecting-browsers-touch-capability.html



Using Javascript to sniff out Android based broswer is tough as the list of Android devices is very lengthy. Here's my Javascript way of performing the Android sniffing task.

<script> function is_touch_device() {  try {   document.createEvent("TouchEvent");   return true;  }  catch (e) {   return false;  } } var ie = (navigator.userAgent.indexOf("MSIE") != -1); var ipad = (navigator.userAgent.indexOf("iPad") != -1); var iphone = (navigator.userAgent.indexOf("iPhone") != -1); var bb = (navigator.userAgent.indexOf("BlackBerry") != -1); var touch = is_touch_device(); var android = touch && !ipad && !iphone && !bb && !ie; if (android) {  alert("Hello Droid!"); } </script>

The logic? A touch capable device which is not either iPad, iPhone, Blackberry, or Windows 8 (touch screen), chance is very high that it is an Android device. But the trend will keep on changing. This should be still good for now.

Read More »

Setting Cookie via Javascript Not Working for my Android 2.33 Gingerbread Device

I believe the current Android based device won't have this issue. But it happened to my antique Android Gingerbread based phone. After plenty of testings, here is my conclusion:

Javascript with Problem: document.cookie = "apple = orange;"; Javascript that worked on my phone: document.cookie = "apple=orange;";

Very unexpected problem. Simple and unexpected solution as well.

Now I kind of like this name of Android version: Froyo (2.2–2.2.3) if you know what I mean. :)

Read More »

When DOM marginLeft property is not working in Mobile tablets such as iPad and Nexus 7...

I had this problem and I was unable to get it work until several hours of debugging:

Javascript: document.getElementById("myDiv").style.marginLeft = "100px"; HTML: <table><tr><td align=center><div id="myDiv"> . . . </div></td></tr></table>

Guess what? It was due to the very unexpected "align=center" that prevents the div beneath from moving anywhere.

Weird problem. Weird cause.

Read More »