On Click, Fade & Close

Here's an example that fades & closes the image on the left when the user clicks on it. (It's live, so go ahead and try it!). The protoscript below says: for an element with id set to avatar, fade it out when the user clicks on it and close it when the fade completes. You can click here to restart the example.

$proto('#avatar', {
  Click: {
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} },
      }
    }
  }
});

Handling Click for Multiple Elements

Files

[X] mystuff.tmp
[X] bigfile.tmp
[X] oldmovie.mov
[X] scrap.txt

Let's say you want to delete files from a list. You would like to embed the delete control with the filename.

You can target two sets of objects: delete controls and list of file names.

We select the '[X]' with 'span:contains([X])' and associate with it the hand cursor and click event.

The Fade & Close target the list of file names with '#multiple li' (all LI items in our multiple example). When you click on an individual delete control it knows the corresponding LI item and operates on it correctly. You can click here to restart the example.

$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
    onClick: {
      Fade: {
        target: '#multiple li',
        opacity: {to: 0},
        onComplete: {Close : {} },
      }
    }
  },
});

Delay with Click

By setting the 'delay' attribute you can delay the action. In this example we set the delay to be 2 seconds. You can use the delay attribute for any event behavior (e.g., Click, Dblclick, Mousedown, etc.)

You can click here to restart the example.

$proto('#avatar-2', {
  Click: {
    delay: 2,
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} },
      }
    }
  }
});

Click with Modifier Key

By setting the 'modifier' attribute you can require a modifier key be pressed when the event occurs. In this example we set the modifier to 'shift'. Hold down the Shift key and click on the image to start the script.

You can use the modifier attribute with any event behavior (e.g., Click, Dblclick, Mousedown, etc.)

You can click here to restart the example.

$proto('#avatar-3', {
  Click: {
    modifier: 'shift',
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} },
      }
    }
  }
});