Wednesday, January 22, 2014

Screen Width and Height for iPhone, iPad, Android Tablets and Smartphones Using Javascript


When it comes to screen width and height, it is a bit tricky for tablet devices as the width and height vary according to the orientation of the tablet.

Therefore it is crucial to detect the screen dimension for websites that are sensitive to the width and height of the screen such as the sticky notes on the web page. The sticky note usually has to be accurate on the location on the web page or it may block important information in the web site.





The following are the Javascript codes that I used:

<script>

var clientWidth = document.getElementsByTagName("body")[0].clientWidth;
var clientHeight = document.getElementsByTagName("body")[0].clientHeight;
.
.
.
</script>


However, there is a problem here. The width and height will change whenever the user changes the orientation of the tablet. Here are improved codes after taking such scenario into consideration:

<script>

function checkDimension() {
   var clientWidth = document.getElementsByTagName("body")[0].clientWidth;
   var clientHeight = document.getElementsByTagName("body")[0].clientHeight;
.
.
.
} 
</script>

<body onresize="checkDimension()"> .
.
.


Whenever the tablet changes the orientation, the onresize event on the browser will go to checkDimension() function. In that case, the Javascript is able to react to any changes to screen size and orientation.

Read More »
Posted by at No comments:
Labels: , , ,

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.

Read More »
Posted by at No comments:
Labels: , ,

Preload Images using Javascript


There are times that you need to preload images on your web page to avoid the long load time required for a dynamic HTML site.

I've tried many examples found on the web but none of them are really working on today's browsers.

Here's my way of making this happen:

<script>

var image_loc = new Array('/image/pic1.jpg','/image/pic5.jpg','/image/pic13.jpg','/image/pic9.jpg');
var elem;

for (i = 0; i < image_loc.length; i++) {
   elem = document.createElement("span");
   elem.id = "preload_img"+i; // this is optional
   elem.style.position = 'absolute';
   elem.style.visibility = 'hidden';
   elem.style.left = '0px';
   elem.style.top = '0px';
   elem.style.width = '10px'; // this can be bigger as long as it is not wider than the screen to avoid extra scroll bar appears at the bottom of the window
   elem.style.height = '10px';
   elem.style.background = "url('"+image_loc[i]+"') no-repeat left top";
   document.body.appendChild(elem);
}

</script>


The trick is to create hidden elements and load the images to be preloaded into background. Those images will be hidden and located at the upper left corner of the screen. The location and size of the SPAN element can be of other values. Hope you like my first new trick in 2014!

Read More »
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)