Your Search Results

    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"/>
 = 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: Mgjbot, Andreas Wuest, V K, Dasch, Grantrules
    Last updated by: Grantrules,