Being able to edit web pages on the fly and in a simple and intuitive way is great but sometimes you might want to have a little more control over when something is published.
You might for example have a limited offer on a special day and don't want to disrupt your sleep schedule by staying up late to update your web site at midnight. If this is the case, this article is for you.
In order to schedule our updates we must provide a few things:
The image to the right shall give you a general idea of how the page is arranged. Only the content area is shown, since this is the only relevant part in our example. Other things like side bars, menues and other elements usually found on web pages are omitted for simplicity.
I won't discuss the style sheet which formats the example output. Please take a look at the example to see how it is done.
Here is the code (the interesting parts are marked in red):
Line 1 defines a WebYep-Loop called "Loop" and line 2 starts it. Note the loopStart(false)
in line 2: this prevents WebYep from displaying the loop controls automatically. We need this to wrap our custom HTML code around them (see line 5).
The if
statement in line 3 checks whether we are in edit mode and displays the loop controls and input fields for start and end time in case we are. This whole block will not be displayed if we are in non-edit mode.
Lines 4-10 builds the block that appears above each loop item. Nothing too special here, except line 5: here we tell WebYep to display the loop controls which are not displayed automatically due to line 2. Lines 7 and 9 define our input fields for start and end time. You can change the names of these fields but remember to also change them below where we check the date (line 7 corresponds to lines 14-15 and line 9 to 17-18).
The if
statement in line 12 is the actual time trigger. It determines whether the current loop block shall be displayed or not. In edit mode the content will always be visible. In non-edit mode visibility will depend on the values of the respective start and end fields (see below).
Lines 23-26 contain the loop content. You can of course put any number of WebYep elements and/or HTML here. To keep things simple I have only included a ShortText
header and a RichText
content field.
Finally line 28 closes the loop.
The content of every loop block will be displayed depending on the values of start and end date/time. Both dates are optional. If a date is left blank it is ignored.
If you leave both blank then the loop block will behave just like a normal loop without time triggers.
If you only enter a start date then the content will be displayed only after that date.
If you only enter an end date then the content will be displayed until that date.
If you enter both dates then the content will only be displayed after start and before end.
Important: A date without a time (e.g. 2011-12-05) means this date at midnight (i.e. 2011-12-05 0:00:00). So if you want to display some content on one particular day only, the end date must have a time component as well (i.e. 2011-12-05 23:59:59). Alternatively you could set the end date in this example to the next day (2011-12-06, without time), which will have the same effect. Note that setting both dates to 2011-12-05 will not show the content at all, since display starts at Dec 5th at midnight and also ends then!
Good question! I've built the previous example with a loop, because I think this will be the most common use case. However, if you just need one block of content displayed you can just omit the loop stuff.
This is what the code would look like without a loop: