Monday, July 28, 2014

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 »

Sunday, July 27, 2014

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 »

Saturday, July 26, 2014

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 »

Wednesday, July 23, 2014

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 »