JavaScript: ArrayList

Example of use

var list = new ArrayList();
list.add("c");
list.add("f");
list.add("a");
list.add("d");
list.add("e");
list.add("b");
list.remove("d");
alert('get(): ' + list.get());
alert('getSortedAsc(): ' + list.getSortedAsc());
alert('getSortedDesc(): ' + list.getSortedDesc());

The JavaScript implementation of (pseudo) ArrayList for MSIE and Mozilla:

function ArrayList() {
    var _array = [];

    this.add = add;
    this.get = get;
    this.remove = remove;
    this.size = size;
    this.toString = toString;
    this.getElementIndex = getElementIndex;
    this.getSortedAsc = getSortedAsc;
    this.getSortedDesc = getSortedDesc;
    this.isElementExists = isElementExists;
    this.hasAnyNotNullElement = hasAnyNotNullElement;

    function add(value){
    _array.push(value);
    }

    function remove(value){
    var toDelete = getElementIndex(value);
    delete _array[toDelete];
    }

    function size(){
    return _array.length;
    }

    function toString(){
    var t = '';
    for(var i = 0; i < size(); i++){
      t += _array[i];
      if(i < size() - 1) t += ', ';
    }
    return t;
    }

    function getElementIndex(value){
    for(var i = 0; i < size(); i++)
      if(_array[i] == value) return i;
    return 'false';
    }

    function isElementExists(value){
    return (getElementIndex(value) == 'false') ? false : true;
    }

    function hasAnyNotNullElement(){
    for(var i = 0; i < size(); i++){
      if(_array[i] != '' && typeof(_array[i]) != 'undefined')
        return true;
    }
    return false;
    }

    function get(){
    var tmp = [];
    var j = 0;
    for(var i = 0; i < size(); i++){
      if(typeof(_array[i]) != 'undefined'){
        tmp[j] = _array[i];
        j++;
      }
    }
    return tmp;
    }

    function getSortedAsc(){
    var tmp = [];
    tmp = get();
    return tmp.sort();
    }

    function getSortedDesc(){
    var tmp = [];
    tmp = get();
    tmp.sort();
    return tmp.reverse();
    }
}

Prevent image selection and dragging behavior

When writing JavaScript that allows images to be dragged and dropped on a web page, the browser's default drag and selection behavior can get in the way. Here are cross-browser ways to disable these default behaviors...

Prevent selection:

HTML

<img style="moz-user-select: none" unselectable="on" onseletstart="return false;" />

or JavaSript

function preventSelection(element) {

element.style.MozUserSelect = 'none';

element.unselectable = 'on';

element.onselectstart = function() { return false; };

}

Prevent drag for images and links:

HTML

<img onmousedown="return false;" ondragstart="return false;" />

or JavaScript

function preventDrag(element) {

element.onmousedown = function() { return false; };

element.ondragstart = function() { return false; }; //I.E.

}

JavaScript: browser type and version detection

To check for a specific browser type and version and display a popup, include below code in HTML page:

<script>

if (navigator.userAgent.toLowerCase().match("safari") && navigator.userAgent.toLowerCase().match("version/4")) {

window.alert("Detected Safari 4 browser!!");

}

</script>

Alerting Visitors when JavaScript is Disabled

The web site we're developing is JavaScript based, so we need to warn users if they come to our site with JavaScript disabled. The easiest way to do this is to use the HTML <noscript> tag (http://www.w3schools.com/TAGS/tag_noscript.asp).

For example:

<head>
<script ...
</script>
</head>
<body>
<script ...></script>
<noscript>
<div class="noscript-warning">
<h1>Please turn on JavaScript to use this site.</h1>
<p>
It seems that you have JavaScript turned off. You will need
to turn it on in order to use this site.
</p>
</div>
</noscript>
</body>

The contents of the <noscript> tag will only be displayed when JavaScript is disabled. When JavaScript is enabled, the tag and its contents will not be displayed at all.