Advanced Syntax

Entourage Expressions also feature a few modifiers/keywords for creating more advanced expressions. Documentation on those features is included below.

It is also possible to listen for multiple conditions in a single expression. This is accomplished using the or keyword - expressions can follow the pattern on [condition] then [action] or [condition2] then [action2]. An example of using compound conditions is found below:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
</style>
<div class="live">
  <div on="mouseover then effect[highlight] or click then effect[explode]">
    I will highlight on a mouseover OR explode on a click!
  </div>
</div>

You can declare multiple actions for a condition by using the and keyword. The following shows a simple example of using and to execute multiple actions.

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Trigger Two JavaScript Alerts" 
    on="click then script[alert('it worked')] and script[alert('you bet it worked!')]"/>
</div>

You can delay the execution of an action for a period of time using the after keyword. The period of time specified defaults to milliseconds, but you can use seconds by appending a s to the end of the number specified in the action.

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Trigger a JavaScript alert after 5 seconds" 
    on="click then script[alert('it worked')] after 5s"/>
</div>

You can execute actions conditionally in a variety of ways. Using the else keyword, you can specify an action to take place if a condition evaluates to false. else actions are ignored if the condition used does not return a true or false, as in click or mouseover.

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
  .box {
    border:1px dashed;
    padding:5px;
  }
</style>
 
<div class="live">
  <h5>Darth Vader is the father of _______ Skywalker.</h5>
  <input type="text" name="theanswer" fieldset="answer"/>
  <input type="button" fieldset="answer" value="Check Answer" on="click then l:answer"/>
  <div class="box" on="l:answer[theanswer=Luke] then value[You got it!] and effect[pulsate] else value[Try Again...]">
    Type in and check your answer...
  </div>
</div>

You can also execute an action (or not) based on a JavaScript expression, using a combination of the keyword if followed by a JavaScript expression that returns true or false wrapped in expr[]. Let's look at an example of this:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
  .box {
    border:1px dashed;
    padding:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Do Something Dangerous" on="click then l:dangerous if expr[confirm('Are you sure?')]"/>
  <div class="box" on="l:dangerous then value[All your base are belong to us!] and effect[pulsate]">
    Waiting...
  </div>
</div>