Tutorials

Please read the Getting started page first before you start with the tutorials.

Base

Extensions


Base

Tutorial 1: Message dialog

Adding a message dialog is simple; just add the swirl_message(title, message, okButtonText, width); function to the onclick event of your button, input, html element of choice.

ParameterValue
titletitle of the message dialog
messagemessage to display
okButtonTexttext of the "ok" button that closes the dialog
widthwidth of the message dialog in pixels

Example input tag:
<input class="swirl_button" type="button" value="Show" onclick="swirl_message('Example 1', 'Hello, world!', 'Ok', 300);">

Table of content

Tutorial 2: Confirm dialog

An Ok or Cancel dialog is implemented the same way as a message dialog. Except there are two more parameters.

Adding a confirm dialog is simple; just add the swirl_confirm(formId, title, message, okButtonText, cancelButtonText, width); function to the onclick event of your button, input, html element of choice.

ParameterValue
formIdhtml form to submit
titletitle of the confirm dialog
messagemessage to display
okButtonTexttext of the "ok" button that submits the form and closes the dialog
cancelButtonTexttext of the "ok" button that cancels the submit and closes the dialog
widthwidth of the confirm dialog in pixels

Example form and input tag:
<form name="formConfirm" method="post">
<input class="swirl_button" type="button" value="Show" onClick="swirl_confirm('formConfirm', 'Example 2', 'Save the internet to your local harddisk?', 'Ok', 'Cancel', 600);">
</form>

Table of content

Tutorial 3: Date picker

To add a date picker all you need is a input tag and a button to execute the date picker. Add the attribute id to the input tag. With the swirl_datepicker(this, id); function you refer to the input box. The input box receives the date selected.

ParameterValue
thisto show the date picker on top of the button
idid of the element that receives the date

<input id="date1" type="text" placeholder="Select date..." />
<input class="swirl_button" type="button" value="Pick date" onClick="swirl_datePicker(this, 'date1');">

Table of content

Tutorial 4: Request

With swirl_request(file, targetId) you can load a page or data into a placeholder. For security reasons only calls to files on the same server are allowed and relative paths must be used.

ParameterValue
filefile (or script to execute)
targetIdid of the element that receives the data

First you have to add a <div> for example to your html code. Add the id attribute to the div tag. Result:

<div id="content1"></div>

You can automate the load by adding script tags to you html page and execute the swirl function. Place the script after the <div> tag.

<script>
  swirl_request('license.txt', 'content1');
</script>

The first parameter contains the url or file to load. In this example we use the text file license.txt . The second parameter content1 refers to the placeholder tag you've defined, in this case the <div> tag. It's also posible to call a PHP script, for example getTutorialText.php .

Or you can execute the function pressing a button. Add the following input tag to your html code.

<input class="swirl_button" type="button" value="Show text" onclick="swirl_request('license.txt', 'content1');">

Example:

Table of content

Tutorial 5: Password strength

With the function swirl_testPassword(inputId, indicatorId); you can add a password tester to your password text box. Just add the function to the onkeydown event and add a placeholder for the indicator like in the example below.

ParameterValue
inputIdid attribute of the input field
indicatorIdid of the element that shows the passwords strength

<input class="swirl_input" type="password" name="password" id="password" value="" onkeydown="swirl_testPassword('password', 'strength');">
<div id="strength"></div>

Indicator

Table of content

Tutorial 6: Add tool tips

Adding tooltips is easy. Just add the attribute swirl_tooltip to the tag that you want to provide with a tool tip.

For example on a paragraph tag:
<p swirl_tooltip="I'm a tool tip!">Hover over...</p>

Next step is to call the tooltip script. Place the following code at the end of your html page just before the end tag for the body.

  <script>
    swirl_tooltip();
  </script>
</body>

Examples:

Hover over...

Hover over this link

Table of content


Extensions

Tutorial I: Slide show

Before adding the slide show add the swirl_slideshow.js script to the head of you html page.
<script src="swirljs/swirl_slideshow.js"></script>

To add a slide show first you've to add a picture list. Then set the speed and define the target id of the placeholder for the slide show. Use the function swirl_slideShow(picturelist, speed, target); to start the slide show.

ParameterValue
picturelistjavascript array with picture url's
speedtime the slide is visible in milliseconds
targettarget place holder id

<script>
  var pictureList1 = ['images/slide1.jpg', 'images/slide2.jpg', 'images/slide3.jpg'];
  var speed1 = 5000;
  var target1 = 'slide1';
  swirl_slideShow(pictureList1, speed1, target1);
</script>

Then add the place holder for the slide show.

<div id="slide1_back" width="240px">
  <img src="images/slide1.jpg" id='slide1_fore' width="240px">
</div>

Note the id's for the _back slide and _fore slide. The target1 variable defined correspondents with the id before the underscore in _back and _fore.

Table of content