Random Javascript code snippets

MollyPages.org
"You were wrong case.
To live here is to live."

Home

Pages / Database / Forms / Servlet / Javadocs

/ License & Download / Tutorials / Cookbook

/ Contact

Return to Tutorials index

Random collection of misc. code and snippets

Private variable using closures

function x() {

    var id = 0;

    return function() { return id++; }

    }

var makeid = x();

var i = makeid();

var j = makeid();

id has effectively private access, via (and only) via the closure makeid() function.

Remembering variables via closures
```
foo() {

    var req = xmlhttp();

    req.onreadystatechange = function() { /*closure created here*/

        if (req.readyState == 4) {

            ...

            }

        }

    }
```
Even though the onreadystatechange is a property/method of req, it is not invoked *via* req by the request handling (browser) thread. Since t needs access to itself and can either use a global variable (essentially window.req) or a closure to hold/access a reference to it.

See also: mozilla developer docs
Closures have access to variables that can be changed
```
x = elements('a')

for (var i = 0; i < 10; i++)

    x[i].onclick = function() { /*...use x[i] here...*/ }

    }
```
All onclick functions will refer to x[10], the final/latest value of the the closed variable i (the loop counter variable i is a closed variable for the inner function within the loop).

Various ways for Object creation

A) new and function definition combined

var obj =   new function() { /* stuff */ }

B) object literal (this is cool since can use data retrieved via JSON as well as saves typing/easier to read anyway).

var obj = { /* stuff */ }

Defining object methods

function MyObj() {}

MyObj.prototype = {

    foo: function () {

        alert(this);

        }

    ...etc..

    }

var my1 = new MyObj();

my1.foo();

Toggling display visibility
```
var elem = getElement('elem');

elem.style.display = '';
```
use display: '' as opposed to display: block (this uses the default "none" type which can differ from block or table-row or whatever, but in all cases, makes the element visible properly.

However, setting elem.style.display = '' only sets or removes the inline style. If a document level css style declaration also exists and applies to that element, then once the inline style is removed, the element will be still be rendered with the document level declaration (since elem.style.display has effectively removed the higher precedence inline style, but the document level declaration is unaffected and will now apply). So either:
1. Don't use both non-inline styles and inline styles when toggling display property via style.display = ... (only use inline styles)
2. or, change the stylesheet/classname as well as the display property if using classname styles or both inline/non-inline at the same time.
See: stack overflow thread

Changing CSS for an element

//only changes/modifies inline style

elem.style.xxx = ...

//classname

elem.className  = ...

Either inline styles or className can be used.

Use className
```
elem.className = 'foo';
```
Use className and not class (since class can be a reserved word).
Use cssFloat
```
elem.cssFloat = 'left';
```
Use cssFloat for the CSS float property and not float, since float is a reserved word in JS.
Use classList when elements have multiple classes

For multiple classes, one has to be careful to parse/save the class string properly, for example:
```
elem.className = 'foo bar baz';
```
Using classList makes working with multiple names easier, with the add, remove and toggle methods.
```
var cl = elem.classList;

cl.add('foo');

cl.toggle("bar");
```
See: Mozilla docs
Ways to invoke JS event handlers
```
-in HTML

<a href="javascript:foo()"

<anyelement onclick="javascript:foo()"

<anyelement onclick="foo()"  (the "javascript:" is optional)

<form action="foo()"  (the "javascript:" is optional)

-in JS Code

anyelement.onclick = foo;
```
Don't return a value in onclick event handlers for href's etc, (return void 0 or undefined instead) because in some cases, the browser will show the return value instead (as if the user navigated to a new page with that value)

More reading: quirksmode
DOM 0 Event handlers are methods
```
<body>

<form>

<button type='button' onclick="myfunc(this, 'button.onclick', event)">my button</button>

</form>

<div onclick="myfunc(this, 'div.onclick')">my div</button>

<script>

function myfunc(elem, msg, e) {

	console.log(elem, msg, e);

	}

</script>

</body>
```
(as a small aside, a button inside a form submits that form unless a type=button is specified, the vagaries of legacy html)

the event object is available in inline handlers via the 'event' object. If applicable handlers are declared on parent elements, then as events bubble up to parent, parent handlers will be invoked for the parent again (with 'this' being the parent when the parent handler is invoked). The event.target always remains the original element upon which received the initial event (click, etc).

If this is not passsed in the inline-handler, this refers to the window where the script is running, in the event handler function itself.

event handlers declared in JS button.onclick = ...<.code> are methods of the corresponding DOM button object, in which the this object is automatically set to the element on which the event was invoked.

Further reading see: quirksmode, another great tutorial

Using the id attribute

When the id attribute is used, all elements should have unique id's. The same id for multiple elements results in all sorts of problems in IE, even when using something like prototype's down/up, where we want a unique id (and there is a unique id) when starting downwards from a given element.

Programmatic assignment of classes

var table = document.getElementById('mytable');

var rows  = table.getElementsByTagName('tr');

for (var i = 0; i < rows.length; i++) {

    if(i%2) {

        rows[i].className += " even";

        }

    }

Programmatically adding a class to a table to achieve a zebra stripes effect. JS functions for onmouseover/onmouseout can also be added this way.

Ease of DOM
```
$('foo').related = $('bar');
```
Add properties to DOM objects themselves to refer to other related DOM objects as needed (this causes no memory leaks in IE since we are staying within the DOM).
Force CSS layout
```
window.resizeBy(0,1)

window.resizeBy(0, -1)
```
This forces css relayout and rendering updates.

Accessing css styles from JS

Styles for an element are reflected in the element.style property. To read a particular style, say foo, say:

$('x').style.foo

foo is only available if either is true:

it is set in an INLINE style definition on 'x'
if it was previously assigned in JS (before it is accessed later), like:
```
$('x').style.foo = 4
```

Otherwise, foo is not available.

This is a common issue when accessing left and top style properties on a div (where the default left/top are not available since they were not set in a inline style). The solution is to set these initially, either inline or via JS.

Working example (in the right column):

<style>

#x, #y, #z {

    border: 1px solid #ccc;

    margin: 5px;

    }   

#y {

    font-size: 2em;

    left: 30px;

    position: relative;

    }

#z {

    font-size: 2em;

    position: relative;

    }

</style>

<script>

function show(name) {

    var div = document.getElementById(name);

    alert("left="+div.style.left +

      "\nfontSize="+div.style.fontSize);

    }

</script>

<div onclick="show('x')" id=x

  style="font-size: 2em;">x-div</div>

<div style="position: relative">

<div onclick="show('y')" id=y>y-div</div>

</div>

<div style="position: relative">

<div onclick="show('z')" id=z

  style="left: 60px;">z-div</div>

</div>

x-div

y-div

z-div

Get all applicable CSS rules

To get all styles applicable to an element (whether inline