My Programming Tricks

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.

My Programming Tricks

Labels

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