Example 1 - Switching content

This example switches an item of content when a link is clicked. To do this, both items must exist in the page, each with its own id. Here's the default text:

"This paragraph is the default text that appears when the page loads."

and this is the replacement:

"This replaces the original paragraph for 5 seconds after you click Switch."

Each time you click switch in the panel below, the text switches from the default to the replacement, then after 5 seconds it flips back again.


In the box below is the entire page source comprising the HTML and the script. At the top is the HTML and below it in the <pre> ... </pre> block is the script. Here are a few notes to help explain things.

First the HTML:

  1. Every item the script needs to know about has its own unique CSS id. When you're assigning these they can be anything you like, but make sure they are all different.
  2. The example works by hiding the 2 text strings and then copying them when required into the <div> whose id is "easycoder-content". This starts off empty.
And now the EasyCoder script:
  1. An exclamation mark starts a comment, which extends to the end of the line it's in. Comments have no effect on the program but may help the programmer.
  2. At the start of the script are some variables. EasyCoder is "strongly typed", to use the technical term, which means that variables of different types behave in different ways, and commands that apply to one type don't necessarily apply to another. Here we have 2 div types and an a.
  3. In most computer languages, quotes or double-quotes are used to denote literal text, but we break with this convention and use backticks instead. The reason is that the WordPress editor converts double-quotes into "smart quotes", which require special handling by our compiler. Since we can't be sure if this behavior is universal or if it will always happen that way we felt it better to use a character that is rarely needed in a web page.
  4. Variables like div and a must be attached to an actual HTML element before you can do anything with them.
  5. set Content from "pastes" content from the specified variable into Content. The browser will ensure it is immediately visible.
  6. On defines what will happen when the specified event occurs - in this case when the user clicks the Switch link.
  7. Wait causes the script to pause for the requested time. The default is seconds but you can also use millis, ticks or minutes. A milli is a millisecond and a tick is 10 milliseconds. The trailing s is optional in each case.

And here's the page source:

<div style="border: 1px solid black; padding: 1em;">
 <div id="easycoder-content"></div>
 <div id="easycoder-default" style="display:none">This paragraph is the default text that appears when the page loads.</div>
 <div id="easycoder-replace" style="display:none">This replaces the original paragraph for 5 seconds after you click Switch.</div>
 <a id="easycoder-switch" href="#">switch</a>

 <pre id="easycoder-script" style="display: none;">

! Example 1
  div Content
  div Default
  div Replace
  a Switch

  attach Content to `easycoder-content`
  attach Default to `easycoder-default`
  attach Replace to `easycoder-replace`

  set Content from Default

  attach Switch to `easycoder-switch`
  on click Switch
    set Content from Replace
    wait 5
    set Content from Default
    go to SetupSwitch


Example 2 - Modifying CSS