Showing posts with label Functions. Show all posts
Showing posts with label Functions. Show all posts

Monday, March 26, 2012

Highlight All Links on a Web Page

The following JavaScript code will highlight each html link on a web page when you hover your mouse over it.

Get an array of all html links on a web page:

 var aa = document.getElementsByTagName('a');

Loop through the array and assign anonymous functions on mouseover and mouseout events:

    for(var i=0; i<aa.length; i++){
        aa[i].onmouseover = function () {this.style.backgroundColor='#cc0000'}
        aa[i].onmouseout = function () {this.style.backgroundColor='#ffffff'}
    }

The above code works and is fine. However, there is a better and shorter solution that does not require JavaScript and uses CSS. Here is how you do it. In your CSS file, include the following declaration :

 a:hover {background-color:#cc0000;}

Tuesday, February 28, 2012

A JavaScript endsWith function

The following JavaScript function checks whether a string ends with a specified string.
function endsWith(str, s){
 var reg = new RegExp (s + "$");
 return reg.test(str);
}
The first argument is a string to be checked, the second one is a suffix to find. It returns true if the string ends with a specified string, and returns false if it does not. We use a "$" anchor to match the end of the string. The function is case-sensitive. Example:
var str="teens";
alert(endsWith(str, "ns"));
If you want to make the function into a method that could be used by all variables of a string type, you could use an object's prototype property:
String.prototype.endsWith = function(s){
 var reg = new RegExp(s + "$");
 return reg.test(this);
}
Then, you would use the function as follows:
alert(str.endsWith("ns"));

A JavaScript startsWith function

The previous function used the "$" anchor to match the end of a string. To match the start of a string, JavaScript regular expressions use a "^" (caret) anchor. This information allows us to write a function that would match the beginning of a string:
function startsWith(str, s){
 var reg = new RegExp("^" + s);
 return reg.test(str);
}

Friday, February 24, 2012

A JavaScript Function that Allows Only Numbers

This little function will force users to type numbers, commas and periods only.
 function noAlpha(obj){
 reg = /[^0-9.,]/g;
 obj.value =  obj.value.replace(reg,"");
 }

reg = /[^0-9.,]/g is a regular expression that basically says: look for any numbers from 0 to 9, periods and commas globally.
Usage:
<input type=text onKeyUp='noAlpha(this)' onKeyPress='noAlpha(this)'>

Try it here.


Here is a version of this function that does not use regular expressions and allows numbers only.
function forceNumbers(obj) {
 if ( obj.value.length == 0)
  return;

 if (!parseInt(obj.value,10) && obj.value != 0)   {
  alert("Please enter a valid Number");
  obj.value = '';
  obj.focus();
  obj.select();
 }
 else {
  obj.value = '' + parseInt(obj.value,10);
 }
}

Friday, December 10, 2010

Insert Backslash Before a Double Quote

Sometimes, you need to dynamically write html text from JavaScript. If the text contains a combination of single and double quotes, you may run into problems. Here is a simple function to avoid those problems.
function insertBackslashBeforeDoubleQuote(str){
 var reg = /"/g;
 var newstr = '\\"';
 return str.replace(reg,newstr);
}
As you see, the function uses a RegExp object on the first line to look for a double quote:
reg = /"/g;
 
The second line defines our replacement string - \"
The backslash in front of the quote has to be escaped with another backslash.
newstr = '\\"';
The last line searches the string and if a double quote is found it is replaced by our newstr pattern.
return str.replace(reg,newstr);
Here is a similar function that inserts a backslash before a single quote if it is contained in the string argument.
function insertBackslashBeforeSingleQuote(str){
 var reg = /'/g;
 var newstr = "\\'"
 return str.replace(reg,newstr);
}


Some other posts:

A JavaScript endsWith function

Highlight HTML Table Rows with JavaScript