Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at

Example Sticky Notes


All parts are made and commented by VK []. All rights are given to the world.

View this example

<title>XBL Demo : Sticky Notes</title>
<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-color: #FFFFFF;
 color: #000000;
 font: 1em Verdana, sans-serif;
h1 {
 font-size: 1.5em;
/* Binding: */
.sticker {
 -moz-binding: url(notes.xml#default);


<h1><a href="">XBL</a> Demo :
    Sticky Notes</h1>

<div class="sticker"><p>ACME,&nbsp;Inc. fax - respond today.</p></div>

<div class="sticker"><p>Don't forget the eggs!</p></div>

<div class="sticker"><p>The new project - who's on charge?</p></div>

<div class="sticker"><p>Learn more about XBL.</p></div>

<p style="clear: left"><a 
  width="88" height="31"
  alt="Valid HTML 4.01"
  style="border: 1px none"></a></p>



<?xml version="1.0"?>


 In above only XBL namespace declaration is mandatory.
 The others are only needed if you plan to handle
 XUL (XML User Interface Language) or/and
 SVG (Scalable Vector Graphics) in your bindings;
 xlink in XML also may come useful sometimes.
 All namespaces above are supported by default and they
 do not require any additional downloads or initializations.

<binding id="default">
 A separate binding. You add a binding file using -moz-binding
 style rule and you address a particular binding by its ID:
    -moz-binding: url(notes.xml#default)
 This ID is local within the binding file (not visible in the
 target document DOM tree).

 Obtaining the stylesheet we'll use
 to (re)style the bound element.
 <stylesheet src="notes.css"/>

 This SVG graphics will be added automatically around each bound element.
 The position of the original content is indicated by <children/> tag.
 <svg:svg width="60px" height="60px">
  <svg:g fill-opacity="0.6" stroke="#FFFFFF" stroke-width="1px">
   <svg:circle cx="25px" cy="12px" r="12" fill="#FF0000" transform="translate(0,0)"/>
   <svg:circle cx="25px" cy="12px" r="12" fill="#00FF00" transform="translate(7,12)"/>
   <svg:circle cx="25px" cy="12px" r="12" fill="#0000FF" transform="translate(-7,12)"/>

 Here and futher CDATA wrappers around JavaScript code
 are not mandatory but recommended. This way you protect
 yourselve from < and > signs breaking your XML layout.
 It also speeds up the parsing as the engine doesn't go
 through CDATA sections but simply skip on them.

 * The code below will be called one time only after
 * the binding is successfully prepared and bound.
 * "this" in this context refers to the bound element.

 // your code goes here


 * The code below will be called one time only before
 * binding is unbound. You cannot cancel this event,
 * but you may accomplish some last minute clean up.
 * "this" in this context refers to the bound element.

 // your code goes here


<field name="priority"><![CDATA[
 * New "real" property for the bound element.
 * Within this block the content is interpreted
 * as JavaScript code. The result of this code
 * evaluation (if any) will be used as initial value.



<property name="innerText">
 New "virtual" property for the bound element.
 Unlike <field> these are really two functions
 (getter and setter). Within the virtual properties
 you cannot set or get the named property itself.
 Say an attempt to assign this.innerText='something'
 will lead to circular setter call and stack overflow.

 var st = this.innerHTML || '';
 if (st != '') {
  var re = /<\/?[^>]+>/gi;
  return st.replace(re,'');
 else {
  return '';

 // "val" in setter contains the assignment value.
 // Here we simply echoing it back:
 return val;


<method name="setBorder">
 New method for the bound element.
 Unlike virtual property it is called in
 function context: this.setBorder(arg)
 You also may define any amount of named arguments
 using <parameter name="argumentName"/>
 <parameter name="arg"/>
 <body><![CDATA[ = arg;



 Event handlers.
 Mouse events sent to bindings are refactored, so / event.relatedTarget always points
 to the bound element, even if it was originated
 to/from a child.

<handler event="click"><![CDATA[
 if (this.priority == 'normal') {
  this.priority = 'high';
  this.setBorder('2px solid red');
 else {
  this.priority = 'normal';
  this.setBorder('2px solid blue');
 var str = this.innerText + '\n\n';
 str+= ('On ' + event.type + ' priority set to: ' + this.priority);

<handler event="mouseover"><![CDATA[
 this.$bg = || '#FFFF00'; = '#FFCC00';

<handler event="mouseout"><![CDATA[ = this.$bg;




.sticker {
 position: relative;
 left: 0px;
 right: 0px;
 float: left;
 clear: none;
 width: 10em;
 height: 10em;
 overflow: visible;
 margin: 1em 1em;
 padding: 0.5em 0.5em;
 border: 2px solid blue;
 background-color: yellow;
 font: 1em normal "Times New Roman",serif;
 font-style: italic;
 cursor: default;

View this example

Document Tags and Contributors

 Contributors to this page: teoli, Grantrules, Mgjbot, V K, Dasch, Andreas Wuest
 Last updated by: teoli,