How to Quickly Identify Missing/Extra HTML Tag

When your HTML gets more and more complicated and packed, a slight mistake in the tagging will render you helpless. It could take a long time to find just a missing or extra tag. My way of solving this problem is to use Notepad++! It's free but it is only available on Windows.

It's easy. You just need to click on the tag and look for missing PURPLE! Once you click on any of the HTML tag, the corresponding closing/opening tag will be highlighted in purple. If you click on a tag and nothing happens, that means Notepad++ is unable to find a corresponding tag for it. You've found the problematic tag! There are still chances that the highlighted tag in purple is wrong. That means you need to also double check the highlighted tag to see whether they are coded the way you really intended.

The screen capture shows the tag highlighted in purple after you click on it. There you have it and happy debugging!

Read More »

Javascript to Measure Vertical Scrollbar Width

I used the following codes to measure the vertical scrollbar (overflowY) width so that I can place a dummy blank DIV onto the real scrollbar to prevent someone from scrolling by dragging the scroller on the right scrollbar.

<script> var dummyDiv = document.createElement("div"); // Create a dummy DIV dummyDiv.style.overflow = "scroll"; // force it to have a scrollbar dummyDiv.style.width = "50px"; // required for IE, can be other values document.body.appendChild(dummyDiv); // add to DOM var scrollbarWidth = dummyDiv.offsetWidth - dummyDiv.clientWidth; document.body.removeChild(dummyDiv); // remove dummy from DOM alert("The scrollbar width is "+scrollbarWidth); // If I'm not mistaken, for non IE browsers, // except the Mac Safari (scrollbars are of 0 width) and touch devices // such as iPad and tablets, the width is required to increase by 1 </script>

There is a very rare chance that you might need this as most developers nowadays are using JQUERY to take care of the scrolling actions. In case you are a Javascript guy, this is good to know.

Read More »

My Javascript Way to Check the Validity of an Email Address Input

Before sending an email address input from a submitted form to the server to verify, it is better to perform a simple check on the email address format for any possible typo. This will save some server bandwidth as Javascript is capable of catching some obvious email format errors.

The following Javascript codes/function are used:

<script> function emailError() {  if (document.userForm.em.value.match(/(\w+\@\w+\.\w+)/) == null) {   return true;  }  return false; } if (emailError()) { alert('Invalid Email Format!'); } </script>

Assume the name of your HTML form is 'userForm' and em is the name of the email input. The emailError() function is making use of the Javascript .match() function to match the pattern of \w+\@\w+\.\w+. If there is a mismatch, an error (true) will be returned to signify an email format error. Please also note that this function will also treat ab.cd@efghijk.xyz as valid although the code can only match the cd@efghijk.xyz. Since the match content is not important, the ab. before the cd will be ignored without affecting the result of the emailError() function.

Read More »

Javascript to Disable Mouse Scroll for All Browsers including IE

I use these codes to temporarily disable the mouse scroll when I display a pop-up DIV. Although this is not quite necessary but it looks more professional to have mouse scroll locked when the pop-up appears. However the side scroll bar is still working with these following codes. You can still use the mouse to drag the page upward or downward.

The following javascript codes/functions are used: (to lock mouse scroll only that uses the center wheel of a mouse)

<script> var ff = (navigator.userAgent.indexOf("Firefox") != -1); if (ff) {   mousewheelevent = "DOMMouseScroll"; } else {   mousewheelevent = "mousewheel"; } function lockScroll() {  if (document.attachEvent) {    document.attachEvent("on"+mousewheelevent, catchWheel);  }  else if (document.addEventListener) {    document.addEventListener(mousewheelevent, catchWheel, false);  } // you can also hide the scrollbar by using the following simple javascript command: // document.body.style.overflowY="hidden"; } function unlockScroll() {  if (document.detachEvent) {    document.detachEvent("on"+mousewheelevent, catchWheel);  }  else if (document.removeEventListener) {    document.removeEventListener(mousewheelevent, catchWheel, false);  } // you can also recover the scrollbar by using the following simple javascript command: // document.body.style.overflowY="scroll"; } function catchWheel(e){  if (e.preventDefault) {   e.preventDefault();  }  else {   e.returnValue = false;  } } lockScroll(); // to lock scroll unlockScroll(); // to unlock scroll </script>

Read More »

Javascript Way to Check Loaded Image

I use this to display images only after they are loaded into the browser's memory. I need Javascript codes to tell me if the image is ready to be displayed or processed. For example, there is a huge image that I need to display but the size is too big. I display a loading icon before I reveal the image so that it looks more like a contemporary (jQuery equipped) web page. I use the following Javascript codes.

<script> var loaded_img = new Array(); var image_list = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); // the list of potential images that you want to check later var img1loaded = false; function installOnloadAlarm() {  var i;  for (i=0; i<image_list.length; i++) { // iterate all images   var img = new Image(); // create an image object   img.onload = function() { // set up onload actions    var match_result = this.src.match(/\/(\w+\.\w+)$/); // match filename after the last '/'    loaded_img.push(match_result[1]); // push match result into loaded_img array   };   img.src = "image/"+image_list[i]+".jpg"; // by setting the source, the browser will start loading (assume images are in 'image' directory)  } } function checkLoadedImg(imgFilename) {  var i;  for (i=0; i<loaded_img.length; i++) {   if (imgFilename == loaded_img[i]) {    return true;   }  }  return false; } function afterLoaded() {  if (img1loaded) {   clearInterval(timer1);   clearInterval(timer2);   .   .   .   do your post loading job   .   .   .  } } installOnloadAlarm(); var timer1 = setInterval(function(){img1loaded = checkLoadedImg('1.jpg');},200); // need to set timer to check as the result won't be available instantly (this example checks only '1.jpg') var timer2 = setInterval(function(){afterLoaded();},200); </script>

The timers are necessary as the results won't be available after installing the onload conditions. This is just a brief example of a complete image file checking system whether the image is loaded into browser.

Read More »

IE4-7 Jagged Text Problem After Applying Filter and the Solution

IE4 until IE7 is notorious to have this anti-alias being turned off after applying a filter to a text (with the position property is set to absolute) such as the opacity filter used for fade in and fade out. For example, the following HTML codes will show the jagged text (without anti-alias) after even applying an empty filter in IE7:

<span id="test" style="position:absolute;top:10px;left:10px;">Remove Filter</span> <script> document.getElementById('test').filter = ""; </script>

In order to tell IE4-7 to turn the anti-alias back on, the filter has to go by removing it from the DOM.

<span id="test" style="position:absolute;top:10px;left:10px;">Remove Filter</span> <script> document.getElementById('test').filter = ""; document.getElementById('test').style.removeAttribute("filter"); </script>

There you go. The removeAttribute() has to be used to clear the element of any filter. Setting the filter to none still make IE4-7 think that the filter feature will still be needed and you just disable it temporarily.

Read More »

Detecting Browser's Touch Capability Using Javascript

Since the beginning of 2014, Google Chrome returns TRUE on document.createEvent("TouchEvent") javascript call even the browser doesn't support any touch action. The following shows the function I've been using to sniff the touch capability and it is no longer working on the latest Google Chrome:

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

The following is the modified version to solve the latest Chrome browser on the touch sniffing function:

<script> function is_touch_device() {  var touch = 'ontouchstart' in window;  return touch?true:false; } </script>

The sudden change in support for Chrome is a bit of a surprise to me though.

Read More »

Guessing the Performance of Your Browser and Device Using Javascript

After coming out with the Javascript to guess the CPU speed previously, I discovered that the for-next looping codes are not enough to guess the performance of a device/browser.

I realized the looping is only good to guess the performance of the browser, it is not enough to guess the speed of the animation which is crucial in today's web presence.

I then came out with two sets of codes to assess the performance of the animation capability of a device of the browser. One is to test the moving of <SPAN> element, and the other is to test the performance of varying opacity of an element. Here are the codes:

<script> var count1,d1,startTime1,endTime1,myLatency1; var count2,d2,startTime2,endTime2,myLatency2; var count3,d3,startTime3,endTime3,myLatency3; function getSpeed() {   var i,j;   count1 = 0;   d1 = new Date();   startTime1 = d1.getTime();   for (i=0; i<=1000000; i++) {    count1++;   }   d1 = new Date();   endTime1 = d1.getTime();   myLatency1 = endTime1 - startTime1;   document.getElementById('result').innerHTML = myLatency1;   d2 = new Date();   startTime2 = d2.getTime();   moveSpan();   d2 = new Date();   endTime2 = d2.getTime();   myLatency2 = endTime2 - startTime2;   document.getElementById('result2').innerHTML = myLatency2;   d3 = new Date();   startTime3 = d3.getTime();   for (j=0; j<8; j++) {    changeOpacity();   }   d3 = new Date();   endTime3 = d3.getTime();   myLatency3 = endTime3 - startTime3;   document.getElementById('result3').innerHTML = myLatency3; } function moveSpan() {   var i;   for (i=0; i<1000; i++) {    document.getElementById('dummy').style.left = i+'px';   }   for (i=1000; i>-1; i--) {    document.getElementById('dummy').style.left = i+'px';   }   for (i=0; i<1000; i++) {    document.getElementById('dummy').style.left = i+'px';   }   for (i=1000; i>-1; i--) {    document.getElementById('dummy').style.left = i+'px';   } } function changeOpacity() {   var i;   for (i=0; i<10; i++) {    document.getElementById('dummy').style.MozOpacity = i/10;    document.getElementById('dummy').style.opacity = i/10;    document.getElementById('dummy').style.filter = 'alpha(opacity=' + i*10 + ')';   }   for (i=10; i>-1; i--) {    document.getElementById('dummy').style.MozOpacity = i/10;    document.getElementById('dummy').style.opacity = i/10;    document.getElementById('dummy').style.filter = 'alpha(opacity=' + i*10 + ')';   } } function startMeasure() {  setInterval("getSpeed()",500); } </script> <body onload="startMeasure()"> <span id="dummy" style="background-color:#aabbcc;width:50px;height:50px;position:absolute"></span> <br><br> <font size=6>Your browser's Javascript Performance index is <font color=green><b><span id=result></span></b>.</font><br> Your broswer's Animation Performance index is <font color=green><b><span id=result2></span></b>.</font><br> Your broswer's Opacity Performance index is <font color=green><b><span id=result3></span></b>.</font></font> </body>

Please note that you can modify the codes to iterate the looping more often if your device is of very high performance. For the devices I tested, as long as the index is less than 15, your device is capable of performing most of the animations you need without much problem. For those with higher numbers, the device may experience some speed problem when it comes to animation running with the browser.

Please also note that you need to assess the opacity and animation performance separately as I encountered vast speed variations for these two actions using different devices especially smartphones and tablet devices.

You can also calculate the average score for each test to get a accurate assessment of the target device. For example, you may decide to run less complicated animations if you get a high score (high latency) for the device.

Enjoy!

Read More »