Monday, January 20, 2014

Strange Tablet (Touch Device) Problem with Javascript's MarginLeft/MarginRight DOM property


This is really hard to explain. If you do your coding in Javascript to move a DIV/SPAN manipulating the value in marginLeft/marginRight DOM property, you will run into a problem that your touch devices, ie., iPad, Android tablet/smartphones won't work with this trick if you have a align=center property somewhere before the DIV/SPAN.

Foe example:

.
.
.

<table><tr><td align=center><div id=moveDiv>...</div></td></tr></table>

<script>
document.getElementById('moveDiv').style.marginLeft = "100px";
</script>


The above code will work on any desktop browser but won't work on any touch capable devices such iOS/Android tablet or smartphone. Strange? Of course, when you have the align=center statement removed, things will work flawlessly in any device.

No comments:

Post a Comment