After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>

You can use:

<ul id="example">

And then use css selectors to select that element and add javascript functions to it.

var myrules = {

Usage

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {

Or use nested identifiers:

var myrules = {

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {

var myrules = {

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

Contrib Info

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '#demoblock' : function(el) {
      var defaultColor = '#A3D6F8';
      var highlightColor = '#4A7FB5';
      
      el.style.backgroundColor = defaultColor;
      
      el.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      el.onmouseout = function() {
         this.style.backgroundColor = defaultColor;
         return false;
      }
   },
   '#demoblock span' : function(el) {
      
      var text = el.innerHTML;
      
      var fisherYates = function (inArray) {
        var i = inArray.length;
        if ( i == 0 ) return false;
        while ( --i ) {
          var j = Math.floor( Math.random() * ( i + 1 ) );
          var tempi = inArray[i];
          var tempj = inArray[j];
          inArray[i] = tempj;
          inArray[j] = tempi;
         }
      }
      
      var randomize = function(inText) {
         var letters = inText.split('');
         fisherYates(letters);
         return letters.join('');
      }
      el.onmouseover = function() {
         this.innerHTML = randomize(text);
         return false;
      }
      el.onmouseout = function() {
         this.innerHTML = text;
         return false;
      }
   }
};
Behaviour.register(myrules);
// ]]>
</script>

Creates:

MOUSE OVER ME

Leaking danger

Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

var myrules = {
   'table.test td' : function(element) {
      element.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      element = null; // by setting this IE will not leak  
   }
};   
Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

• Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Contrib Info

Author:	TWiki:Main.ArthurClemens
Copyright:	Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
License:	BSD

<-- specify latest version first -->

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '#demoblock' : function(el) {
      var defaultColor = '#A3D6F8';
      var highlightColor = '#4A7FB5';
      
      el.style.backgroundColor = defaultColor;
      
      el.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      el.onmouseout = function() {
         this.style.backgroundColor = defaultColor;
         return false;
      }
   },
   '#demoblock span' : function(el) {
      
      var text = el.innerHTML;
      
      var fisherYates = function (inArray) {
        var i = inArray.length;
        if ( i == 0 ) return false;
        while ( --i ) {
          var j = Math.floor( Math.random() * ( i + 1 ) );
          var tempi = inArray[i];
          var tempj = inArray[j];
          inArray[i] = tempj;
          inArray[j] = tempi;
         }
      }
      
      var randomize = function(inText) {
         var letters = inText.split('');
         fisherYates(letters);
         return letters.join('');
      }
      el.onmouseover = function() {
         this.innerHTML = randomize(text);
         return false;
      }
      el.onmouseout = function() {
         this.innerHTML = text;
         return false;
      }
   }
};
Behaviour.register(myrules);
// ]]>
</script>

Creates:

MOUSE OVER ME

Leaking danger

Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

var myrules = {
   'table.test td' : function(element) {
      element.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      element = null; // by setting this IE will not leak  
   }
};   
Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

• Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Contrib Info

Author:	TWiki:Main.ArthurClemens
Copyright:	Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
License:	BSD

<-- specify latest version first -->

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '#demoblock' : function(el) {
      var defaultColor = '#A3D6F8';
      var highlightColor = '#4A7FB5';
      
      el.style.backgroundColor = defaultColor;
      
      el.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      el.onmouseout = function() {
         this.style.backgroundColor = defaultColor;
         return false;
      }
   },
   '#demoblock span' : function(el) {
      
      var text = el.innerHTML;
      
      var fisherYates = function (inArray) {
        var i = inArray.length;
        if ( i == 0 ) return false;
        while ( --i ) {
          var j = Math.floor( Math.random() * ( i + 1 ) );
          var tempi = inArray[i];
          var tempj = inArray[j];
          inArray[i] = tempj;
          inArray[j] = tempi;
         }
      }
      
      var randomize = function(inText) {
         var letters = inText.split('');
         fisherYates(letters);
         return letters.join('');
      }
      el.onmouseover = function() {
         this.innerHTML = randomize(text);
         return false;
      }
      el.onmouseout = function() {
         this.innerHTML = text;
         return false;
      }
   }
};
Behaviour.register(myrules);
// ]]>
</script>

Creates:

MOUSE OVER ME

Leaking danger

Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

var myrules = {
   'table.test td' : function(element) {
      element.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      element = null; // by setting this IE will not leak  
   }
};   
Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

• Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Contrib Info

Author:	TWiki:Main.ArthurClemens
Copyright:	Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
License:	BSD

<-- specify latest version first -->

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '#demoblock' : function(el) {
      var defaultColor = '#A3D6F8';
      var highlightColor = '#4A7FB5';
      
      el.style.backgroundColor = defaultColor;
      
      el.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      el.onmouseout = function() {
         this.style.backgroundColor = defaultColor;
         return false;
      }
   },
   '#demoblock span' : function(el) {
      
      var text = el.innerHTML;
      
      var fisherYates = function (inArray) {
        var i = inArray.length;
        if ( i == 0 ) return false;
        while ( --i ) {
          var j = Math.floor( Math.random() * ( i + 1 ) );
          var tempi = inArray[i];
          var tempj = inArray[j];
          inArray[i] = tempj;
          inArray[j] = tempi;
         }
      }
      
      var randomize = function(inText) {
         var letters = inText.split('');
         fisherYates(letters);
         return letters.join('');
      }
      el.onmouseover = function() {
         this.innerHTML = randomize(text);
         return false;
      }
      el.onmouseout = function() {
         this.innerHTML = text;
         return false;
      }
   }
};
Behaviour.register(myrules);
// ]]>
</script>

Creates:

MOUSE OVER ME

Leaking danger

Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

var myrules = {
   'table.test td' : function(element) {
      element.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      element = null; // by setting this IE will not leak  
   }
};   
Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

• Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Contrib Info

Author:	TWiki:Main.ArthurClemens
Copyright:	Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
License:	BSD

<-- specify latest version first -->

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '#demoblock' : function(el) {
      var defaultColor = '#A3D6F8';
      var highlightColor = '#4A7FB5';
      
      el.style.backgroundColor = defaultColor;
      
      el.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      el.onmouseout = function() {
         this.style.backgroundColor = defaultColor;
         return false;
      }
   },
   '#demoblock span' : function(el) {
      
      var text = el.innerHTML;
      
      var fisherYates = function (inArray) {
        var i = inArray.length;
        if ( i == 0 ) return false;
        while ( --i ) {
          var j = Math.floor( Math.random() * ( i + 1 ) );
          var tempi = inArray[i];
          var tempj = inArray[j];
          inArray[i] = tempj;
          inArray[j] = tempi;
         }
      }
      
      var randomize = function(inText) {
         var letters = inText.split('');
         fisherYates(letters);
         return letters.join('');
      }
      el.onmouseover = function() {
         this.innerHTML = randomize(text);
         return false;
      }
      el.onmouseout = function() {
         this.innerHTML = text;
         return false;
      }
   }
};
Behaviour.register(myrules);
// ]]>
</script>

Creates:

MOUSE OVER ME

Leaking danger

Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

var myrules = {
   'table.test td' : function(element) {
      element.onmouseover = function() {
         this.style.backgroundColor = highlightColor;
         return false;
      }
      element = null; // by setting this IE will not leak  
   }
};   
Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library
• Nabble - Behaviour Javascript Library forum & mailing list archive
• Behaviour2 - update in the making, since 2006

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

• Behaviour website
• Behaviour Google Group

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

• If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • See the installation supplement on TWiki.org for more information.
• If you have any problems, then you can still install manually from the command-line:
  1. Download one of the .zip or .tgz archives
  2. Unpack the archive in the root directory of your TWiki installation.
  3. Run the installer script ( perl <module>_installer )
  4. Run configure and enable the module, if it is a plugin.
  5. Repeat for any missing dependencies.
• If you are still having problems, then instead of running the installer script:
  1. Make sure that the file permissions allow the webserver user to access all files.
  2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
  3. Manually edit LocalSite.cfg to set any configuration variables.

Contrib Settings

• Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Contrib Info

Author:	TWiki:Main.ArthurClemens
Copyright:	Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
License:	BSD

<-- specify latest version first -->

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Development

• Google Groups: Behaviour Javascript Library

License

Links

• Behaviour website
• Behaviour Google Group

Related Topics: TWikiPreferences

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.

Javascript file: behaviour.js (8.1K). The compressed javascript file (2.9K) has been processed by ShrinkSafe.

Introduction

After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
   <a onclick="this.parentNode.removeChild(this)" href="#">
      Click me to delete me
   </a>
</li>

You can use:

<ul id="example">
   <li>
      <a href="/someurl">Click me to delete me</a>
   </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
   '#example li' : function(el){
      el.onclick = function(){
         this.parentNode.removeChild(this);

      }
   }
};

Behaviour.register(myrules);

Usage

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

<span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
      el.onclick = function() {
         // open in a popup with no other attributes than template 'viewplain'
         launchTheWindow(this.href,null,null,null,"viewplain");
         return false;
      }
   }
};

Behaviour.register(myrules);
// ]]>
</script>

The class name link%TWIKIWEB%%HOMETOPIC% will get expanded to linkTWikiWebHome

Creates:

TWiki Web Home

Development

• Google Groups: Behaviour Javascript Library
• Dean Edwards: Faster DOM Queries - with a speed-up hack to Behaviour

License

Links

• Behaviour website
• Behaviour Google Group

Contrib Info

Related Topics: TWikiPreferences