My Programming Tricks

Caveman Blogger

This is something a web programmer needs to take note as this could lengthen your coding time if this is not taken into account.

Chrome/Firefox/Safari is not able to read external Javascript/CSS with commands such as:

<link rel="stylesheet" type="text/css" href="testcss.php" />
<script language="JavaScript" src="testjs.php"></script>

if your broswer runs in STANDARD mode (with the declaration of DOCTYPE).

Fix:

1) Include your CSS/JAVASCRIPT in your HTML file that you are running, to prevent referring to an external CSS/JAVASCRIPT

2) Run your browser in QUIRK mode (do not declare any DOCTYPE)

3) Use PHP to spit out DOCTYPE if IE browsers are detected

I would put codes like these before the <HTML> in my whatever.php:

<?php
error_reporting(0); // This is needed if your PHP spits errors/warnings to your browser
if (preg_match('/MSIE/', $_SERVER['HTTP_USER_AGENT'])) {
echo('<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
}
?>

Caveman Blogger

With the default setting, IE sets the background color of a HTML body to white if no value is set.

For other browsers, the background color is set to transparent by default.

In order to make IE iframe HTML to accept transparency, one has to set both the iFrame and HTML body value correctly.

The iFrame:

<iframe src="dummy.html" width=400 height=400 allowtransparency="true">

Inside dummy.html:

<body style="background-color:transparent">

Well, that's the fix for IE. Just two small steps.

Yes, this is my 2nd post in 2012. Happy belated New Year!!!

Caveman Blogger

I once made the O capital letter and it won't work in Chrome.

setTimeout() - OK
setTimeOut() - Not working in Chrome

Just a trivial post but it is interesting.

Caveman Blogger

This is the touchscreen version of the post:

http://webtrick101.blogspot.com/2011/12/javascript-to-move-div-around-non.html

I believe most browser in touchscreen mobile devices will be supported such as iPhone/iPad/Android. Blackberry won't be supported as it is running browser with very low level of compatibility.

Here are the codes:

<html>
<head>
<script type="text/javascript">
var PositionFlag = 0;
var p1;
var p2;
var p3;
var p4;
var pos_x;
var pos_y;
var diff_x;
var diff_y;
var move_x;
var move_y;
var once = 0;

function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
}
catch (e) {
return false;
}
}

var touch_capable = is_touch_device();

function init() {
if (touch_capable) {
document.getElementById('dis_info5').innerText = "Touch Capable";
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
}
document.getElementById('myBox').style.cursor = 'hand';
document.body.style.cursor = 'crosshair';
document.getElementById('myBox').style.left=100;
document.getElementById('myBox').style.top=100;
}

function UpdateXY() {

box_x = document.getElementById('myBox').offsetLeft;
box_y = document.getElementById('myBox').offsetTop;

if (!touch_capable) {

move_x = window.event.clientX;
move_y = window.event.clientY;

p1 = 'Mouse: X=' + move_x + ' Y=' + move_y ;
document.getElementById('dis_info1').innerText = p1;
}
else {

move_x = event.touches[0].pageX;
move_y = event.touches[0].pageY;

if (move_x > box_x-225 && move_x < box_x+225 && move_y > box_y-225 && move_y < box_y+225) {
PositionFlag = 1;
}
else {
PositionFlag = 0;
}

p4 = 'Touch ' + event.touches.length + ': X=' + event.touches[0].pageX + ' Y=' + event.touches[0].pageY ;
document.getElementById('dis_info4').innerText = p4;
}

p2 = 'myBox: X=' + box_x + ' Y=' + box_y ;
document.getElementById('dis_info2').innerText = p2;

if (once == 0) {
diff_x = move_x - box_x;
diff_y = move_y - box_y;

}

p3 = 'Diff : X=' + diff_x + ' Y=' + diff_y ;
document.getElementById('dis_info3').innerText = p3;

if (PositionFlag == 1) {
x = move_x - diff_x;
y = move_y - diff_y;

document.getElementById('myBox').style.left = x;
document.getElementById('myBox').style.top = y;
once = 1;
}

}

</script></head>

<div id="myBox" style="position:absolute;z-index:100;" onmousedown="PositionFlag=1;" onmouseup="PositionFlag=0;once=0;" width=75 height=75><table border=1 width=75 height=75><tr><td bgcolor=#ddeeff align=center><br> <font color=orange>orange</font> <br><br></td></tr></table></div>

<script>

if (!touch_capable) {
document.write("<body onmousemove=UpdateXY() onload=init()>");
}
else {
document.write("<body ontouchmove=UpdateXY() onload=init()>");
}

</script>

<div id="dis_info1"></div>
<div id="dis_info2"></div>
<div id="dis_info3"></div>
<div id="dis_info4"></div>
<div id="dis_info5"></div>

</body>
</html>

Basically all the tricks are highlighted in green. Instead of using onmousemove as the listener, use ontouchmove. There is also a need to set up an event listener for ontouchmove so that you just don't only get the first touch coordinates. In order to get all the coordinates, the event listener has to be set up as shown in green above.

Those +225 and -225 shown in red is a matter of preference. You can change it to other values. I find these numbers OK as they are buffers in case your finger moves too fast. If you choose number that is too big, the drag can be smooth but the area affected will be large.

Lastly, the broswer sniffer. I used to use the iphone/ipad/Android sniffer but it is getting nowhere as new mobile devices are being released from time to time and there is a need to maintain the sniffer to add in new supported device. I use the touch capability sniffer which is maintenance free and more compatible.

Hope you like this special javascript trick for mobile devices using touchscreen!!!

Caveman Blogger

Ever wonder how to use javascript to move a DIV around your web page? This fascinated me because it is so cool to make your web page to have the drag-and-drop feature.

The trick is to use the onmousemove event listener on the body level. Here are the codes:

<html>
<head>
<script type="text/javascript">
var PositionFlag = 0;
var p1;
var p2;
var p3;
var p4;
var pos_x;
var pos_y;
var diff_x;
var diff_y;
var mouse_x;
var mouse_y;
var once = 0;

function UpdateXY()
{
mouse_x = window.event.clientX;
mouse_y = window.event.clientY;
p1 = 'Mouse: X=' + mouse_x + ' Y=' + mouse_y ;
document.getElementById('coorinfo1').innerText = p1;

box_x = document.getElementById('myBox').offsetLeft;
box_y = document.getElementById('myBox').offsetTop;

p2 = 'myBox: X=' + box_x + ' Y=' + box_y ;
document.getElementById('coorinfo2').innerText = p2;

if (once == 0) {
diff_x = mouse_x - box_x;
diff_y = mouse_y - box_y;

}

p3 = 'Diff : X=' + diff_x + ' Y=' + diff_y ;
document.getElementById('coorinfo3').innerText = p3;

if (PositionFlag == 1) {
x = mouse_x - diff_x;
y = mouse_y - diff_y;

p4 = 'Diff : X=' + x + ' Y=' + y ;
document.getElementById('coorinfo4').innerText = p4;

document.getElementById('myBox').style.left = x;
document.getElementById('myBox').style.top = y;

once = 1;
}

}

</script></head>

<div id="myBox" style="position:absolute;z-index:100;" onmousedown="PositionFlag=1;" onmouseup="PositionFlag=0;once=0;"><table border=1><tr><td bgcolor=#ddeeff align=center><br> <font color=orange>orange</font> <br><br></td></tr></table></div>

<body onmousemove="UpdateXY()" onload="document.getElementById('myBox').style.cursor = 'hand';document.body.style.cursor = 'crosshair';document.getElementById('myBox').style.left=100;document.getElementById('myBox').style.top=100;">
<div id="coorinfo1"></div>
<div id="coorinfo2"></div>
<div id="coorinfo3"></div>
<div id="coorinfo4"></div>

</body>
</html>

You will see the XY coordinates displayed with a DIV box with the text orange on it. Simply drag the box around and you'll see the magic.

Let me know if you have any questions regarding the codes as I put very little comments on it. Sorry. Too rush. Gotta go.

Caveman Blogger

Things are simple if everyone lives in the same time zone. Things become complicated when we want to develop a system that is "international". Time zone is a very important for internet related applications. The following shows the method I like when inserting time and date into MySQL and retrieve from it:

Insert date and time to MySQL

$timezone = "2"; // Get the time zone from user, usually from POST data
// Normalize Date/Time to Greenwich Mean Time (GMT) Zone
// Use gmdate to format to MySQL friendly format
$date = gmdate("Y-m-d H:i:s", time());
$result = mysql_query("INSERT INTO my_table VALUES ('$value1', ..., '$date', '$timezone')");
if (!$result) {
die('Invalid query: ' . mysql_error());
}

IMPORTANT: Make sure the MySQL field is declared as timestamp data type. Time zone is of integer of size 1.

Retrieve date and time from MySQL

$result = mysql_query("SELECT my_date_time, my_time_zone FROM my_table WHERE my_match_criteria = '".$search_criteria."'");

if (!$result) {
die('Invalid query: ' . mysql_error());
}

// assume only one row of result is returned. Otherwise, use mysql_fetch_array()
$time_data = mysql_fetch_assoc($result);
$offset = intval($time_data['my_time_zone'])*60*60;
$adjusted_time_data = strtotime($time_data['my_date_time']) + $offset;
$adjusted_time = date("g:i a F j, Y ", $adjusted_time_data);

NOTE: The date/time stored in the MySQL will be displayed according to the time zone saved in the database as well. Please change the column name my_data_time and my_time_zone according to your need. intval() is used to convert the time zone string retrieved from MySQL to integer value to calculate the offset to the time/date stored in GMT format.

With this method, one does not need to worry about the origin of the user. The downside is that the date/time will change whenever the time zone is changed. It all depends on your web app design whether you allow the user to change the time zone after the initial setting.

strtotime() is used to convert the date/time in string format to UNIX time format (integer) so that the offset can be added to it to produce desirable result. Adding offset to a string won't produce the right time-zone-adjusted date/time.

date() is finally used to format the date/time for proper display.

ALTERNATIVE: You can also store the 10-digit raw UNIX time value from time() function and stored as 10-byte integer to reduce the size of your database. Anyway, the MySQL functions related to the timestamp format can't be used for this 10-byte integer data type. It's totally up to your preference whether time manipulation or the size is more important for your app.

Caveman Blogger

$string = "10101011";
echo(stringbin2num($string)); // Will return 171

function stringbin2num($input) {

$len = strlen($input);
$count = 0; $val = 0;

while ($count < $len) {

  if (substr($input, $len-$count-1, 1)) {
   $val += pow(2, ($count));
  }
  $count++;
}

return $val;
}

This function might not be needed in many situations. It's just a reference for those who want to convert string to numbers. You can also modify these codes to handle string of HEX characters such as 'AABB'. If you are reading strings from the binary file, the best is still to use the unpack() function. Unpack function allows you convert to many formats you like.

Caveman Blogger

Writing the Binary Data directly using PHP's Pack() function:

// Write Binary Data
$bin_data = pack("C*", 0x47, 0x49, 0x46);

$fp = fopen("c://test.bin", 'wb'); // replace with your filename 
                     // (please also check file permission before write)
fwrite($fp, $bin_data);
fclose($fp);

Writing the Binary Data from an Array (if the data length is too long):

// Write Binary Data
$bin_data_array = array(0x47, 0x49, 0x46, .....................................);

foreach ($bin_data_array as $data) {

 $bin_data .= pack("C", $data);

}

$fp = fopen("c://test.bin", 'wb'); // replace with your filename
         // (please also check file permission before write)
fwrite($fp, $bin_data);
fclose($fp);

This WON'T work:

// Write Binary Data
$bin_data_array = array(0x47, 0x49, 0x46, .....................................);

$bin_data = pack("C*", $bin_data_array);

$fp = fopen("c://test.bin", 'wb'); // replace with your filename 
            //(please also check file permission before write)
fwrite($fp, $bin_data);
fclose($fp);

My Programming Tricks

Labels

Tuesday, January 3, 2012

Chrome/Firefox/Safari Not Able to Read External Javascript/CSS

iFrame Transparency Problem in IE and Solution

Monday, January 2, 2012

Chrome and setTimeout() Javascript Function

Monday, December 26, 2011

Javascript to Move a DIV around (touchscreen version, drag-and-drop for iphone/ipad/android)

Javascript to Move a DIV around (non-touchscreen version)

Monday, December 5, 2011

PHP Date and Time MySQL Management Recommendation

Tuesday, November 29, 2011

PHP to Convert Binary Data (in String Value) to Numeric Values

PHP to Write Binary Data (or Array Data) to a File using Pack Function