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...
Saturday, September 7, 2013
Friday, September 6, 2013
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...
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. :...
Thursday, September 5, 2013
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 cau...
Tuesday, August 6, 2013
Apostrophe (') Gets Censored After Inserting Into MySQL. How to Fix it?
I think MySQL doesn't like apostrophe or '. When inserting into MySQL, the apostrophe goes missing. How to fix this? Simple. Here's it is:
$text = "My car's mirror is broken!";
$text2DB = addslashes($text);
mysql_query("INSERT INTO ... $text2DB ... // complete the MySQL INSERT INTO action here
PHP's addslashes() function is enough to solve this problem. It will add slashes when necessary automatically. Isn't that ne...
From Your Check Out Form to Paypal's Note to Seller
If you want to add note to the Paypal seller from your check out form or shopping cart, you need to add the cn input name and value in the post form before submitting to Paypal. Something look like:
<input type=hidden name=cn value="Please ship directly to my dorm room">
If everything is done correctly, the "note to seller" will appear in the Paypal check out form.
...
Auto Login using PHP stream_context_create() and file_get_contents()
The following is just a rough idea of how to log in to a website using PHP. If the target website is owned by you, you should know how it is done. If not, you may need to contact the web administrator before doing so. The web site owner may not like it. The main idea here is to make the login and grab the data out with just one push button to save all the hassels to log in manually. It is advised to make it completely legal before you even try it:
$postdata = http_build_query(
array(
'postUserName'...
My Javascript and PHP Way to Extract the File Extension
Javascript:
var extension;
var filename = "test.my.txt";
var ext = filename.split(".");
if (ext[1] != "") {
extension = ext[ext.length-1];
}
// extension will contain "txt"
PHP:
$fullfilename = "test.my.txt";
preg_match("/(.+)\.([^\.]+)$/",$fullfilename,$match);
$filename = $match[1];
$extension = $match[2]; // $extension will contain "txt"
I think the codes are very self-explanatory. Enjoy!!...
Javascript and PHP Cookie Expiration Setting Technique
Javascript:
var hour = 24; // expire in 24 hours
var tm1 = new Date();
var tm2 = new Date(tm1.getTime()+3600000*hour); // 60*60*1000 = 3600000 ms
var exp = "expires = " + tm2.toUTCString();
document.cookie = 'cookiename = cookievalue;'+exp;
PHP:
$hour = 24;
setcookie("cookiename","cookievalue",time()+(3600*$hour));
For PHP technique, it has a problem. The time() gets the time of the server instead of the browser. In order to get the accurate expiration timing, one needs...
My Javascript to Guess Processor's Speed
Updated on 5th of February, 2014: There is an updated version for this posting here.
This is necessary when your web page runs a lots of animation using javascript. If the target browser is slow in computing speed, it is advisable to reduce the amount of animation to run on the machine.
Here's my simple way to check the speed of a computer using simple Javascript:
<script>
var count;
var d = new Date();
var startTime = d.getTime();
for (i=0; i<=1000000; i++) {
count++;
}
var...
Monday, August 5, 2013
My Javascript Function to Show UTC Time Zone of Your Browser/Computer
Your computer has its own time zone setting as well as the web host server. Most of the time they are quite different. United States alone has three different time zones.
It is crucial to get the time zone offset off the browser than the server as the time zone is something personal rather than a server sitting on a fixed location that tells nothing about the visitors possibly from the other side...
Sunday, August 4, 2013
JQuery Close-Up: Is it a Good Idea?
JQuery popularity in web development nowadays is similar to Facebook in social network. Developers and programmers love to use it.
The coding is simple and brisk but most people use it just to perform simple tasks on the web pages such as changing the DOM element styles, ie. color, opacity and location.
Many use it to perform tasks that can be easily emulated in conventional Javascript and I think...
Modifying Your ASP Code to ASPX VB.Net
This could have been a very old topic as ASP (VB) has been phased out long ago and VB.Net is almost obsolete compared with C#. Although VB and VB.net are using the same programming language, the way they work on a web page is vastly different.
Anyway, let's go with the fun of migrating from one programming environment to another.
ASP (VB)
<%
.
.
Dim orange
orange = "apple"
.
.
.
%>
<html>
<body>
.
.
...<%=orange%> . . .
.
.
.
</body>
</html>
ASPX...
Sunday, July 21, 2013
Decompress/Unzip Web Content with Content-Encoding: gzip (using PHP - file_get_contents() and gzinflate())
If you are using file_get_contents() to grab content from the web and process using PHP, you may bump into web contents that are compressed using gzencode.
Here's a solution to decompress those content (simplified for easy reference):
<?php
$qdata = array('http' =>
array(
'method' => 'POST',
'user_agent'=> $_SERVER['HTTP_USER_AGENT']
)
);
...
Compress External Javascript with gzip in PHP
If you are using an external Javascript, you can compress the content before sending it to the browser using PHP.
Here's the solution (simplified for easy reference):
<?php
error_reporting(0); // make sure it is not reporting any warning that will ruin the output
$js = <<<MYJAVASCRIPT
.
.
.
MYJAVASCRIPT;
// Optional: The following three lines of extra codes are to downsize...
Saturday, July 20, 2013
Javascript to Dynamically Change the Image Source of an Element for IE
Just like the problem of changing background color for IE via Javascript, changing the image source requires special treatment as well.
Here's the solution (simplified for easy reference):
Javascript:
var ie = (navigator.userAgent.indexOf("MSIE") != -1);
if (!ie) {
document.getElementById('MyImageID').src = 'myImageSrcName.jpg';
}
else {
document.getElementById('MyElemID').innerHTML = '<img src="myImageSrcName.jpg">';
}
HTML:
<span...
Javascript to Dynamically Change the Background Color of an Element for IE
You can change the background color easily in Chrome, Safari and Firefox.
But for IE, you cannot change it using the easy way like the other browsers are doing it.
Here's the solution (simplified for easy reference):
var ie = (navigator.userAgent.indexOf("MSIE") != -1);
if (!ie) {
document.getElementById('MyElemID').style.backgroundColor = "#AABBCC";
}
else {
document.getElementById('MyElemID').style.backgroundColor = "rgb('AA','BB','CC')";
}
Therefore,...
Tuesday, June 18, 2013
How to Suppress Default IIS Error and Display PHP Error Instead?
Ever wonder how to make IIS to show the PHP errors instead of its default "semi" blue-screen error page? So that it is easier to debug your PHP codes?
The answer is simple. Just go to your php.ini (mine is in C:\Program Files (x86)\PHP), change display_errors from Off to On. Reboot your PC. (I've tried just restarting the IIS service, it won't use the new PHP setting yet)
Walla! That simple!
If...
Wednesday, March 20, 2013
Protect Your External CSS and Javascript Codes? Possible?
Actually there is no way to protect your Javascript or CSS from being seen.
I've explained a way to sort of protect it from Safari/Firefox/IE in:
http://webtrick101.blogspot.com/2012/08/protect-your-css-and-javascript-codes.html
Nevertheless Chrome can easily show your CSS/Javascript codes to the world.
Since there is no way to block it, you might as well minify your Javascript/CSS codes. In that way, your codes will be harder to be understood and may sway some programmers from...
Saturday, March 9, 2013
Weird Javascript setInterval Scenarios in Chrome
This is a weird case.
function dummy() {
.
.
.
}
setInterval(dummy, 1000); // This will WORK in non-Object-Oriented Function
setInterval(dummy(), 1000); // This will not work as it has too many brackets
setInterval("dummy", 1000); // This will not work
setInterval("dummy()", 1000); // This will work even in a Object Oriented Function
I found when I tried to set an interval loop to a OO (Objected Oriented) Function as follows:
function dummy() {
.
.
.
this.action1...
Wednesday, February 27, 2013
The Curious Case of Missing 'px' in Javascript for Chrome/Safari/Firefox
When one uses the transitional DOCTYPE in Chrome/Safari/Firefox, your Javascript assignment of value to marginTop or top will not be successful if you left out the 'px'.
For example, if you want to move a dummy DIV to a height of 100 pixel from the top, you might do this:
document.getElementById('dummy').style.top = 100;
It will work if you are not using the transitional DOCTYPE. If you are using the transitional DOCTYPE, you need to assign it with a 'px' at the end:
<!DOCTYPE...
Friday, February 1, 2013
Javascript to Change Div & Body Style in IFrame
Before showing the codes, here are the conditions that these codes WON'T work:
Run with Chrome in localhost environment
Cross domain for the main HTML and dummy.html in your iframe. These codes have to comply with the same domain policy or hackers will be very happy if it is not
The Main HTML:
<iframe id="myFrame" scrolling="no" style="overflow: hidden; height: 580px; width: 325px;" src="dummy.html"></iframe>
<script>
function changeColor() {
document.getElementById('myFrame').contentWindow.document.getElementById('divInDummy').style.backgroundColor...
Thursday, January 31, 2013
Facebook Fan/Like Box External CSS No Longer Supported?
Updated: 8th of September 2013
After several months of waiting, FB no longer supports external CSS as of today. Here's my alternative to change the border color of the like box:
http://webtrick101.blogspot.com/2013/09/latest-method-to-change-facebook-like.html
Updated: 27th of February 2013
As of yesterday, this method is no longer working. Let's wait for a few more days and see if Facebook turns this feature back on.
Updated: 1st of March 2013 (Not Working Anymore)
If you use...
Wednesday, January 2, 2013
Happy 2013! The Winners and Losers of Browsers
My first post in 2013! Web developers' number one concern is always the browser popularity. We simply cannot afford to develop a web page that only runs well on a browser that is seldom used by the public.
Here's the latest stat from WikiMedia as of October 2012 for non-mobile browser:
The winner is Google for 2012!!!
As for the mobile version, my guess is either Google or Apple. I think they...
Subscribe to:
Posts (Atom)