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




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.

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

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.

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);">

Table of content

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.

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


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.

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.

  swirl_request('license.txt', 'content1');

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');">


Table of content

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.

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

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


Table of content

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.



Hover over...

Hover over this link

Table of content


With the swirl_menu(id, data, type, width, height, showArrow, styleOnFirst); function you can easy add a menu to your web page. First create a JSON structure for your menu.

Each menu item consist of a id, name, link and sub element. The Id of each menu item must be unique. The name element is displayed, the link element is where you want the page to navigate to when the user clicks on the menu item. The sub element contains a sub menu, a list with menu items. The menu is recursive, so you can create as many sub menu levels as needed.


  var data = {"menu":[
	{"id": "1", "name": "Construction", "link": null, "sub": [
			{"id": "2", "name": "Meccano","link": "1-1", "sub": null},
			{"id": "3", "name": "Lego","link": null, "sub": [
					{"id": "4", "name": "Lego city","link": "1-2-1", "sub": null},
					{"id": "5", "name": "Lego friends","link": null, "sub": null}
	{"id": "6", "name": "Figures", "link": "2", "sub": [
			{"id": "7", "name": "Funko","link": "2-1", "sub": null},
			{"id": "8", "name": "Playmobil","link": "2-2", "sub": null}
	{"id": "9", "name": "Shopping cart", "link": "3", "sub": null},
	{"id": "10", "name": "My menu", "link": "4","sub": [
			{"id": "11", "name": "Profile","link": "4-1", "sub": null},
			{"id": "12", "name": "Contact info","link": "4-2", "sub": null},
			{"id": "13", "name": "Orders","link": "4-3", "sub": null}
	{"id": "14", "name": "Contact", "link": "5","sub": null}

Then add a div tag with the class swirl_menu:
  <div id="menu" class="swirl_menu"></div>

Then add the script to generate the swirl_menu.
The menu data structure (var data = {"menu ...) must be defined before you call the swirl_menu function!
    swirl_menu("menu", data["menu"], "vertical", 120, 30);

idId of the html element (div) as placeholder for the menu
dataJSON data object with the menu items
typeHorizontal or vertical menu, value: "vertical" or "horizontal"
widthMenu item width
heightMenu item height
showArrowShow arrow if there is a sub menu defined
styleOnFirst Apply menu item style on first item, set to true it will use the swirl_menu_first class. See the swirl_style.css style sheet for details. It can be used for menu's on mobile phones.

Vertical menu structure example:
swirl_menu("menu", data["menu"], "vertical", 200, 30, true, false);

Horizontal menu structure example:
swirl_menu("menu", data["menu"], "horizontal", 160, 30, true, false);

Table of content


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.

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

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

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">

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