iGuider documentation


Created: 27/11/2017
Updated: 12/11/2019
Version: 4.5
By: MASSCODE
URL: https://codecanyon.net/item/iguider-jquery-webpage-help-tour/21073716
Email: limasscode@gmail.com
Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Introducing


Description

The jQuery plugin «iGuider» gives you the opportunity to tell you about the functionality of any interface. In addition, the plugin «iGuider» can perform the function of teaching, display the task, prompt you what to do and follow up on implementation of tasks. This is the most flexible and functional plugin among all his analogs.

This is the most flexible and multifunctional help-tour plugin in the world.


Features

  • Continue the tour after move to other page
  • Saving the progress of the tour after updating the page
  • Check conditions
  • Control the tour using the keyboard
  • Waiting for an item to appear
  • Control of message width.
  • Automatic generation of the start button of the tour.
  • Automatic generation of the list of tours
  • Tour Builder (Enables Generate your tour code in a user-friendly interface)
  • Chrome Extension (Gets an unique selector code for any element on the page)
  • Additionally present WordPress version of plugin
  • Multiple targets same time
  • Three shapes of highlighting: rectangle, circle and rounded rectangle
  • Templating
  • Styling
  • Processing code color in any format
  • Autopilot
  • Tracking position of the dragged element
  • Multiple pages
  • Ability to continue the unfinished tour
  • Smooth change of color and opacity for each step individually
  • Management from outside
  • The intro slide in center of screen
  • Displays the tour covers
  • Works with dynamic content
  • Works with hidden content (select, tabs etc.)
  • Localization (60 languages)
  • Different way of searching elements. Supports most CSS3 selectors, as well as some non-standard selectors.
  • Supports operating system "windows (7,8,10)", MacOS, iOS, Android
  • Supports brousers IE 11+, Firefox, Chrome, Safari
  • Detailed documentation and tour about the tour
  • 37 Positions' Variants
  • Auto Positioning of Message
  • Detect Events
  • Trigger Events
  • Callback Functions
  • Map of All Steps
  • Control of Buttons Text
  • Scroll to Element
  • Highlighting of passed steps
  • Responsive
  • Compatibility with the "Select2" plugin
  • Compatibility with the "jQuery UI Tabs"
  • Compatibility with the "Bootstrap Collapse"

License

All parts of this plugin: CSS and javascript codes are licensed according to the license purchased from Envato.

Read more about licensing here: http://codecanyon.net/licenses


Purchased Archive Structure

Once you have downloaded and extracted the iGuider.zip file, you should find the following directory structure:

/ iGuider /

— css /

— js /

— themes /

— localization /

— demos /

— doc_files /

— chrome_extension /

— wordpress_plugin /

— documentation.html

— demos.html

— builder.html

— quick-start-tpl.html

css/ This folder contains the "iGuider.css" file which contain all the basic styles.
js/ This folder contains the "jquery.iGuider.js" file which contain the global architecture. And "jquery.min.js" library.
themes/ This folder contains templates and themes of the plugin.
localization/ This folder contains localization files for the plugin interface.
demos/ This folder contains demonstration pages for all parameters.
doc_files/ This folder contains the files needed to describe the iGuider plugin.
chrome_extension/ This folder contains chrome extension, which gets an unique selector code for any element on the page.
wordpress_plugin/ This folder contains WordPress version of plugin.
documentation.html This file contains a description of the plugin and examples of use.
demos.html This file contains a list of demos.
builder.html This file contains a Tour Builder, which enables Generate your tour code in a user-friendly interface.
quick-start-tpl.html This file contains the minimum required code for quick connection and start the tour.

Files Connection

  1. Javascript library jQuery View details
  2. The style file. Used for the decoration of all the elements of a plugin. View details
  3. The main plugin file View details
  4. The theme files css and js View details

<head> ...[THIS CODE]... </head>

<script src="js/jquery.js"></script>

<link rel="stylesheet" href="css/iGuider.css">
<script src="js/jquery.iGuider.js"></script>

<link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
<script src="themes/material/iGuider-theme-material.js"></script>


Plugin Initialization

Calling the plugin, you should be sure to specify the parameter "steps".

Parameter "steps" includes settings for each step of the tour.

The setting "target" should correspond to the value of the attribute "data-target" in the html code or selector name (class, id, other attributes).

You can omit the default parameters

			
<script>
$(window).on('load',function(){
	iGuider({
		tourID:'anyTourID',							//This string allows you to save data with a unique name about tour progress. 
													//It can be used to save information on the progress of the tour for several users. 
													//Or save the progress of each tour separately
		tourTitle:'Tour Title Default',				//Tour title
		tourSubtitle:'Tour Subtitle Default',
		startStep:1,								//Step from which the tour begins
		
		overlayClickable:true,						//This parameter enables or disables the click event for overlying layer
		overlayColor:'#000',						//Global color values of the overlay layer.
		overlayOpacity:0.5,							//Global opacity values of the overlay layer.
		
		pagination:true,							//Shows the total number of steps and the current step number
		registerMissingElements:true,				//Shows an absent element in tour map and find this element in DOM.
		textDirection:'ltr',						//Global text direction. (ltr, rtl)
		
		shape:0,									//Global shape of highlighting. 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
		shapeBorderRadius:5,						//Global corner radius of rounded rectangle shape. Only when "shape" value is "2"
		
		width:320,									//Global width of the message block
		
		bgColor:false,								//Global background color of the message block
		titleColor:false,							//Global title color of the message block
		
		modalContentColor:false,					//Global content color of the message block
		modalTypeColor:false,						//Global modal type color of the message block
		
		paginationColor:false,						//Global pagination color of the message block
		timerColor:false,							//Global timer color of the message block
		
		btnColor:false,								//Global buttons color
		btnHoverColor:false,						//Global buttons hover color

		spacing:10,									//Global indent highlighting around the element
		loc:false,									//Global path to the page on which the step should work
		timer:false,								//Global time after which an automatic switching to the next step
		timerType:'line',							//Global timer shape type: 'line' or 'circle'
		keyboard:true,								//Tour control by keyboard buttons. Left - the previous step, right - the next step, Esc - close tour.
		keyboardEvent:false,						//This parameter sets the permission to trigger custom events.

		intro:{										//Default intro settings
			enable:true,							//If set to true, before the tour you will see the introductory slide, which will offer to see a tour. 
			
			title:'Welcome to the interactive tour',												//Title of introduction dialog
			content:'This tour will tell you about the main site functionalities',					//Content of introduction dialog
			
			cover:'',								//Path to the cover of intro
			overlayColor:false,						//For intro, you can specify the different color values of the overlay layer.
			overlayOpacity:false,					//For intro, you can specify the different opacity values of the overlay layer.
			width:false,							//Width of the intro message block
			
			bgColor:false,							//Background color of the intro message block
			titleColor:false,						//Title color of the intro message block
			
			modalContentColor:false,				//Content color of the intro message block
			modalTypeColor:false,					//Modal type color of the intro message block
			
			btnColor:false,							//Buttons color of the intro message block
			btnHoverColor:false						//Buttons Hover color of the intro message block
		},
		
		continue:{									//Default the continue message settings
			enable:true,							//This parameter add the ability to continue the unfinished tour.    
			
			title:'Continue the unfinished tour?',											//Title of continue dialog
			content:'Click "Continue" to start with step on which finished last time.',		//Content of continue dialog
			
			cover:'',								//Path to the cover of continue message    
			overlayColor:false,						//For continue message, you can specify the different color values of the overlay layer.
			overlayOpacity:false,					//For continue message, you can specify the different opacity values of the overlay layer.
			width:false,							//Width of the continue message block
			
			bgColor:false,							//Background color of the continue message block
			titleColor:false,						//Title color of the continue message block
			
			modalContentColor:false,				//Content color of the continue message block
			modalTypeColor:false,					//Modal type color of the continue message block
			
			btnColor:false,							//Buttons color of the continue message block
			btnHoverColor:false						//Buttons Hover color of the continue message block
		},

		tourMap: {									//Default Tour Checklist settings
			enable:true,							//This parameter add the ability view list of steps.
			position:'right',						//Checklist Position 
			clickable:true,							//Specifies the clickability of links in the checklist of steps: true - clickable, false - disabled, or 'ready' - clickable only completed steps and current
			open:false,								//Specifies to show or hide the Checklist at the start of the tour 
			
			bgColor:false,							//Background color of the Checklist
			titleColor:false,						//Title color of the Checklist
			
			btnColor:false,							//Buttons color of the checklist block
			btnHoverColor:false,					//Buttons hover color of the checklist block
			
			itemColor:false,						//Item color of the Checklist
			itemHoverColor:false,					//Item hover color of the Checklist
			itemActiveColor:false,					//Item Active color of the Checklist
			itemActiveBg:false,						//Item Active BG color of the Checklist
			itemNumColor:false,						//Item Number color of the Checklist
			
			checkColor:false,						//Check color of the Checklist
			checkReadyColor:false					//Check Ready color of the Checklist
		},
		
		steps:[{									//Default step settings
			cover:'',								//Path to image file
			title:'New Step Title',					//Name of step
			content:'New Step Description',			//Description of step
			position:'auto',						//Position of message
			target:'uniqueName',					//Unique Name (<div data-target="uniqueName"></div>) of highlighted element or .className (<div class="className"></div>) or #idValue (<div id="idValue"></div>)
			disable:false,							//Block access to element
			overlayOpacity:0.5,						//For each step, you can specify the different opacity values of the overlay layer.
			overlayColor:'#000',					//For each step, you can specify the different color values of the overlay layer in HEX .
			spacing:10,								//Indent highlighting around the element, px
			shape:0,								//Shape of highlighting (0 - rectangle, 1 - circle, 2 - rounded rectangle)
			shapeBorderRadius:5,					//The corner radius of rounded rectangle shape. Only when "shape" value is "2"
			timer:false,							//The time after which an automatic switching to the next step
			event:'next',							//An event that you need to do to go to the next step
			eventMessage:'Follow the required conditions to continue.',		//Message hint for steps with custom events
			skip: false,							//Step can be skipped if you set parameter "skip" to true.
			nextText:'Next',						//The text in the Next Button
			prevText:'Prev',						//The text in the Prev Button
			trigger:false,							//An event which is generated on the selected element, in the transition from step to step
			stepID:'',								//Unique ID Name. This name is assigned to the "html" tag as "data-g-stepid" attribute (If not specified, the plugin generates it automatically in the form: "step-N")
			waitElementTime:0,						//The parameter "waitElementTime" sets the time (ms) to wait for an item to appear
			loc:false,								//The path to the page on which the step should work
			ready:false,							//This parameter indicates whether the step was completed or not.
			width:320,								//Width of the message block
			autofocus:true,							//Automatically puts the cursor in the selected form element.
			
			bgColor:false,							//Background color of the message block
			titleColor:false,						//Title color of the message block
			
			modalContentColor:false,				//Content color of the message block
			
			paginationColor:false,					//Pagination color of the message block
			timerColor:false,						//Timer color of the message block
			
			btnColor:false,							//Buttons color of the message block
			btnHoverColor:false,					//Buttons Hover color of the message block
			
			keyboardEvent:false,					//This parameter sets the permission to simulate user events for step.

			checkNext:{                             //Function in which you can carry out any verification by clicking on the "Next" button. 
				func:function(){return true;},       ////If the function returns True, the step will be switched.
				messageError:'Fulfill all conditions!'  //If the function returns "False", an error message will appear in the message window
			},
			checkPrev:{                             //Function in which you can carry out any verification by clicking on the "Prev" button. 
				func:function(){return true;},
				messageError:'Fulfill all conditions!'  
			},
			before:function(target){},					//Triggered before the start of step
			during:function(target){},					//Triggered after the onset of step
			after:function(target){},						//Triggered After completion of the step, but before proceeding to the next
			delayBefore:0,							//The delay before the element search, ms
			delayAfter:0							//The delay before the transition to the next step, ms
		}],
	
		lang: {										//Default language settings
			cancelTitle: 'Cancel Tour',				//The title in the cancel tour button
			cancelText: '×',						//The text in the cancel tour button
			hideText: 'Hide Tour Map',				//The text in the hidden tour map button 
			tourMapText:'≡',						//The text in the show tour button
			tourMapTitle: 'Tour Map',				//Title of Tour map button
			nextTextDefault:'Next',					//The text in the Next Button
			prevTextDefault:'Prev',					//The text in the Prev Button
			endText:'End Tour',						//The text in the End Tour Button

			contDialogBtnBegin:'Start over',		//Text in the start button of continue dialog 
			contDialogBtnContinue:'Continue',		//Text in the continue button of continue dialog 
			
			introDialogBtnStart:'Start',			//Text in the start button of introduction dialog
			introDialogBtnCancel:'Cancel',			//Text in the cancel button of introduction dialog
		   
			modalIntroType:'Tour Intro',			//Type Name of intro dialog
			modalContinueType:'Unfinished Tour'		//Type Name of continue dialog
		},
		
		create: function(){},						//Triggered when the iGuider is created
		start: function(){},						//Triggered before first showing the step
		progress: function(data){},					//Triggered together with start any step
		end: function(){},							//Triggered when the tour ended, or was interrupted
		abort: function(){},						//Triggered when the tour aborted
		finish: function(){},						//Triggered when step sequence is over
		play: function(){},							//Triggered when the timer state switches to "play"
		pause: function(){},						//Triggered when the timer state switches to "pause"
		
		modalTemplate:								//Modal window template
		'<div class="gWidget">'+
			'<div class="gCover">[modal-cover]</div>'+
			'<div class="gAction">'+
				'<span class="gType">[modal-type]</span>'+
				'<span class="gBtn">[modal-map]</span>'+
				'<span class="gBtn">[modal-close]</span>'+
				'<div class="gTimer">[modal-timer]</div>'+
			'</div>'+
			'<div class="gScroll">'+
				'<div class="gHeader">[modal-header]</div>'+
				'<div class="gContent">[modal-body]</div>'+
			'</div>'+
			'<div class="gFooter">'+
				'<span class="gPage">'+
					'<span class="gPageVal">[step-value]</span>'+
					'<span class="gPageTotal">[step-total]</span>'+
				'</span>'+
				'<span class="gBtn">[modal-prev]</span>'+
				'<span class="gBtn">[modal-next]</span>'+
				'<span class="gBtn">[modal-cancel]</span>'+
				'<span class="gBtn">[modal-start]</span>'+
				'<span class="gBtn">[modal-begin-first]</span>'+
				'<span class="gBtn">[modal-begin-continue]</span>'+
			'</div>'+
		'</div>',
		
		mapTemplate:								//Tour Map template
		'<div class="g-map-pos">'+
			'<div class="gMapAction">'+
				'<span class="gBtn">[map-toggle]</span>'+
				'<span class="gBtn">[map-hide]</span>'+
			'</div>'+
			'<div class="gMapHeader">[map-header]</div>'+
			'<span class="gPage">'+
				'<span class="gPageVal">[step-value]</span>'+
				'<span class="gPageTotal">[step-total]</span>'+
			'</span>'+
			'<div class="gMapContent">[map-content]</div>'+
			'<div class="gMapBufer"></div>'+
		'</div>',
		
		debug: false								//Display of messages in the console
	});
})
</script> 

CSS Structure

Core CSS file iGuider.css (css/iGuider.css) in this plugin. It contains styles which are responsible for the correct plugin work.


JavaScript

To use the plugin you must import two files of javascript:

    1. jQuery (js/jquery-3.1.1.min.js)
    2. jquery.iGuider.js (js/jquery.iGuider.js)

    1. jQuery is a Javascript library that greatly reduces the amount of code that you must write. If you imported this version of jQuery or any other, it is not necessary to import it for the second time. Supported by jquery 1.x , 2.x , 3.x

    2. The main plugin code.


Themes Structure

The theme consists of two files.

  1. themeName.js - Contains the template code of the plugin interface.
  2. The square brackets with the content ID are the keys by which the plugin determines where to insert the interface elements.

    
    /* Template "material" for iGuider plugin. */
    
    //Modal window template
    modalTpl =						
    '<div class="gWidget">'+
    	'<div class="gCover">[modal-cover]</div>'+
    	'<div class="gAction">'+
    		'<span class="gType">[modal-type]</span>'+
    		'<span class="gBtn">[modal-map]</span>'+
    		'<span class="gBtn">[modal-close]</span>'+
    		'<div class="gTimer">[modal-timer]</div>'+
    	'</div>'+
    	'<div class="gScroll">'+
    		'<div class="gHeader">[modal-header]</div>'+
    		'<div class="gContent">[modal-body]</div>'+
    	'</div>'+
    	'<div class="gFooter">'+
    		'<span class="gPage">'+
    			'<span class="gPageVal">[step-value]</span>'+
    			'<span class="gPageTotal">[step-total]</span>'+
    		'</span>'+
    		'<span class="gBtn">[modal-prev]</span>'+
    		'<span class="gBtn">[modal-next]</span>'+
    		'<span class="gBtn">[modal-cancel]</span>'+
    		'<span class="gBtn">[modal-start]</span>'+
    		'<span class="gBtn">[modal-begin-first]</span>'+
    		'<span class="gBtn">[modal-begin-continue]</span>'+
    	'</div>'+
    '</div>'
    
    //Tour Map template
    mapTpl =  							
    '<div class="g-map-pos">'+
    	'<div class="gMapAction">'+
    		'<span class="gBtn">[map-toggle]</span>'+
    		'<span class="gBtn">[map-hide]</span>'+
    	'</div>'+
    	'<div class="gMapHeader">[map-header]</div>'+
    	'<span class="gPage">'+
    		'<span class="gPageVal">[step-value]</span>'+
    		'<span class="gPageTotal">[step-total]</span>'+
    	'</span>'+
    	'<div class="gMapContent">[map-content]</div>'+
    	'<div class="gMapBufer"></div>'+
    '</div>'
    
    
  3. themeName.css - Contains the appearance styles of the plugin interface.
  4. The theme styles file must be included!


Localization Files

Localize the iGuider help-tour language and format (English / Western formatting is the default).

The iGuider includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

To plugin interface was on the language you want, include to page the one of localization files.

These files are in the "localization" folder.

Include the file you want after including plugin files

<script src="js/jquery.js"></script>

<link rel="stylesheet" href="css/iGuider.css">
<script src="js/jquery.iGuider.js"></script>

<link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
<script src="themes/material/iGuider-theme-material.js"></script>

<script src="localization/iGuider-de.js"></script>	

The available languages are:

  1. iGuider-af.js
  2. iGuider-ar.js
  3. iGuider-az.js
  4. iGuider-be.js
  5. iGuider-bg.js
  6. iGuider-bs.js
  7. iGuider-ca.js
  8. iGuider-cs.js
  9. iGuider-cy.js
  10. iGuider-da.js
  11. iGuider-de.js
  12. iGuider-el.js
  13. iGuider-en.js
  14. iGuider-eo.js
  15. iGuider-es.js
  16. iGuider-et.js
  17. iGuider-eu.js
  18. iGuider-fa.js
  19. iGuider-fi.js
  20. iGuider-fr.js
  21. iGuider-gl.js
  22. iGuider-he.js
  23. iGuider-hi.js
  24. iGuider-hr.js
  25. iGuider-hu.js
  26. iGuider-hy.js
  27. iGuider-id.js
  28. iGuider-is.js
  29. iGuider-it.js
  30. iGuider-ja.js
  31. iGuider-ka.js
  32. iGuider-kk.js
  33. iGuider-km.js
  34. iGuider-ko.js
  35. iGuider-ky.js
  36. iGuider-lb.js
  37. iGuider-lt.js
  38. iGuider-lv.js
  39. iGuider-mk.js
  40. iGuider-ml.js
  41. iGuider-ms.js
  42. iGuider-nb.js
  43. iGuider-nl.js
  44. iGuider-nn.js
  45. iGuider-pl.js
  46. iGuider-pt.js
  47. iGuider-ro.js
  48. iGuider-ru.js
  49. iGuider-sk.js
  50. iGuider-sl.js
  51. iGuider-sq.js
  52. iGuider-sr.js
  53. iGuider-sv.js
  54. iGuider-ta.js
  55. iGuider-th.js
  56. iGuider-tj.js
  57. iGuider-tr.js
  58. iGuider-uk.js
  59. iGuider-vi.js
  60. iGuider-zh.js

Example of use: view


Quick Start

Copy this code into your page or use file
"quick-start-tpl.html" from archive.



<!--Latest jQuery-->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!--iGuider Core-->
<link rel="stylesheet" href="css/iGuider.css">
<script src="js/jquery.iGuider.js"></script>

<!--iGuider Theme-->
<link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
<script src="themes/material/iGuider-theme-material.js"></script>

<script>
/* iGuider Parameters */
var opt = {
    'tourTitle': 'Tour Title Default',
    'steps': [
        {
            'title': 'New Step Title',
            'content': 'New Step Description',
            'target': ''
        }
    ]
};

/* iGuider Button */
$(window).on('load',function(){
    iGuider('button',opt);
});
</script>		


Done!


WordPress Version

Installation

Except jQuery plugin, in the archive there is WordpPress version of plugin "iGuiderWP.zip"
The plugin is located in the folder "wordpress_plugin"

    1. Install it like any other WP plugin

    2. For edit the initialization file click "edit"

    3. Then select the "init.iGuider.js" file

    4. After editing, click the "Update" button.


API


Options

Option Default value Datatype Description
tourID "anyTourID" String This string allows you to save data with a unique name about tour progress. It can be used to save information on the progress of the tour for several users. Or save the progress of each tour separately.
It may take the values: "any string value"
tourTitle "Tour Title Default" String Tour title
It may take the values: "any string value"
startStep 1 Number Step from which the tour begins.
It may take the values: any positive integer
overlayClickable true Boolean If set to false, then links of steps on the tour map will not be clickable
It may take the values: true or false
overlayColor "#000" String Global color value of overlay layer
It may take the values: Any color format '#000', 'rgb(0,0,0)' or 'black'
overlayOpacity 0.5 Number Global opacity value of overlay layer
It may take the values: any positive integer from 0 to 1
pagination true Boolean Shows the total number of steps and the current step number
It may take the values: true or false
registerMissingElements true Boolean Shows an absent element in tour map and find this element in DOM.
It may take the values: true or false
textDirection "ltr" String The direction property specifies the text direction/writing direction.
It may take the values: 'ltr' or 'rtl'
shape 0 Number Global shape of highlighting. 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
It may take the values: 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
shapeBorderRadius 5 Number Global corner radius of rounded rectangle shape. Only when "shape" paramenter has value "2"
It may take the values: any positive number
width 320 Number / String Global width of the message block, px,%
It may take the values: 320, '320px' or '50%'
spacing 10 Number Global indent highlighting around the element, px
It may take the values: any positive number
loc false String Global path to the page on which the step should work. It may take the values: "anyPagePath"
timer false Boolean / Number Global time after which an automatic switching to the next step
It may take the values: any positive number or false
timerType 'line' String Global timer shape type
It may take the values: 'line' or 'circle'
keyboard true Boolean Tour control by keyboard buttons. Left - the previous step, right - the next step, Esc - close tour.
It may take the values: true or false
keyboardEvent false Boolean This parameter sets the permission to trigger custom events.
It may take the values: true or false
bgColor false Boolean / Number Global background color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
titleColor false Boolean / Number Global title color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
modalContentColor false Boolean / Number Global content color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
modalTypeColor false Boolean / Number Global modal type color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
paginationColor false Boolean / Number Global pagination color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
timerColor false Boolean / Number Global timer color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
btnColor false Boolean / Number Global buttons color
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
btnHoverColor false Boolean / Number Global buttons hover color
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro
intro:{	
	enable:true,
	cover:'',
	
	title:'Welcome to the interactive tour',
	content:'This tour will tell you about the main site functionalities',
	
	overlayColor:false,
	overlayOpacity:false,
	width:false,
	bgColor:false,
	titleColor:false,
	modalContentColor:false,
	modalTypeColor:false,
	btnColor:false,	
	btnHoverColor:false
}			
Object It contains parameters of the intro message
It may take the values: objects
intro.enable true Boolean If set to true, before the tour you will see the introductory slide, which will offer to see a tour.
It may take the values: false or true
intro.cover String Path to the cover of intro.
It may take the values: "Path to the cover"
intro.title "Welcome to the interactive tour" String Title of introduction dialog
It may take the values: "any string value"
intro.content "This tour will tell you about the main site functionalities" String Content of introduction dialog
It may take the values: "any string value"
intro.overlayColor false String / Boolean Color value of overlay layer for intro
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.overlayOpacity false Number Opacity value of overlay layer for intro
It may take the values: any positive integer from 0 to 1 or false
intro.width false Number / String / Boolean Width of the message intro block, px,%
It may take the values: 320, '320px', '50%' or false
intro.bgColor false Boolean / Number Background color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.titleColor false Boolean / Number Title color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.modalContentColor false Boolean / Number Content color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.modalTypeColor false Boolean / Number Modal type color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.btnColor false Boolean / Number Buttons color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.btnHoverColor false Boolean / Number Buttons Hover color of the intro message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue
continue:{
	enable:true,
	cover:'',
	
	title:'Continue the unfinished tour?',
	content:'Click "Continue" to start with step on which finished last time.',
	
	overlayColor:false,
	overlayOpacity:false,
	width:false,
	bgColor:false,
	titleColor:false,
	modalContentColor:false,
	modalTypeColor:false,
	btnColor:false,
	btnHoverColor:false
}		
Object It contains parameters of the continue message
It may take the values: objects
continue.enable true Boolean This parameter add the ability to continue the unfinished tour.
It may take the values: false or true
continue.cover String Path to the cover of continue message.
It may take the values: "Path to the cover"
continue.title "Continue the unfinished tour?" String Title of continue dialog
It may take the values: "any string value"
continue.content "Click \"Continue\" to start with step on which finished last time." String Content of continue dialog
It may take the values: "any string value"
continue.overlayColor false String / Boolean Color value of overlay layer for continue message
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.overlayOpacity false Number / Boolean Opacity value of overlay layer for continue message
It may take the values: any positive integer from 0 to 1 or false
continue.width false Number / String / Boolean Width of the message continue block, px,%
It may take the values: 320, '320px', '50%' or false
continue.bgColor false Boolean / Number Background color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.titleColor false Boolean / Number Title color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.modalContentColor false Boolean / Number Content color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.modalTypeColor false Boolean / Number Modal type color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.btnColor false Boolean / Number Buttons color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.btnHoverColor false Boolean / Number Buttons Hover color of the continue message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap
tourMap: {	
	enable:true,
	position:'right',
	clickable:true,
	open:false,
	bgColor:false,
	titleColor:false,
	btnColor:false,
	btnHoverColor:false,
	itemColor:false,
	itemHoverColor:false,
	itemActiveColor:false,	
	itemActiveBg:false,	
	itemNumColor:false,	
	checkColor:false,
	checkReadyColor:false
}	
Object It contains parameters of the Tour Map
It may take the values: objects
tourMap.enable true Boolean This parameter add the ability view list of steps.
It may take the values: false or true
tourMap.position "right" String Tour Map Position
It may take the values: "right" or "left"
tourMap.clickable true Boolean If set to false, then links of steps on the tour map will not be clickable
It may take the values: true - clickable, false - disabled, or 'ready' - clickable only completed steps and current
tourMap.open false Boolean Specifies to show or hide the map of the tour at the start of the tour
It may take the values: false or true
tourMap.bgColor false Boolean / Number Background color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.titleColor false Boolean / Number Title color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.btnColor false Boolean / Number Buttons color of the checklist block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.btnHoverColor false Boolean / Number Buttons hover color of the checklist block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemColor false Boolean / Number Item color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemHoverColor false Boolean / Number Item hover color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemActiveColor false Boolean / Number Item Active color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemActiveBg false Boolean / Number Item Active BG color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemNumColor false Boolean / Number Step Number color in the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.checkColor false Boolean / Number Check color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.checkReadyColor false Boolean / Number Check Ready color of the Checklist
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps
steps:[{
	cover:'',
	title:'New Step Title',
	content:'New Step Description',
	position:'auto',				
	target:'uniqueName',			
	disable:false,					
	overlayOpacity:0.5,				
	overlayColor:'#000',			
	spacing:10,						
	shape:0,	
	shapeBorderRadius:5,								
	timer:false,						
	event:'next',
	eventMessage:'Follow the required conditions to continue.',
	skip: false,			
	nextText:'Next',		
	prevText:'Prev',		
	trigger:false,			
	stepID:'',				
	waitElementTime:0,
	loc:false,				
	ready:false,
	width:320,
	autofocus:true,
	keyboardEvent:false,
	bgColor:false,
	titleColor:false,
	modalContentColor:false,
	paginationColor:false,	
	timerColor:false,
	btnColor:false,	
	btnHoverColor:false,
	checkNext:{
		func:function(target){return true},
		messageError:'Fulfill all the conditions!'
	},
	checkPrev:{
		func:function(target){return true},
		messageError:'Fulfill all the conditions!'
	},
	before:function(target){},	
	during:function(target){},	
	after:function(target){},		
	delayBefore:0,			
	delayAfter:0			
}]				
Array Specifies information about each step of the tour
It may take the values: array of objects
steps[n].cover false Boolean / String Path to image file
It may take the values: false or string value of path to image
steps[n].title "New Step Title" String Title of step
It may take the values: "any string value"
steps[n].content "New Step Description" String Description of step
It may take the values: "any string value"
steps[n].position "auto" String

Position of message.
It may take the values: "auto", "center" or positioning code: "xxx"

"auto" - The plugin can automatically choose the best position out of 36 available to display a tour's message.

"center" - The message is displayed in the center of screen and no element is highlighted. The parameter 'target' in this case is not required!

"xxx" - Code which indicates the position of the window with the message

tll, tlc, tlr, tcl, tcc, tcr, trl, trc, trr, rtt, rtc, rtb, rct, rcc, rcb, rbt, rbc, rbb, brr, brc, brl, bcr, bcc, bcl, blr, blc, bll, lbb, lbc, lbt, lcb, lcc, lct, ltb, ltc, ltt

"xxx" - First Symbol: The position of message a relatively selected item.
It may take the values: t (top),r (right),b (bottom),l (left)

"xxx" - Second Symbol: The position of corner a relatively selected item.
a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom);
b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right);

"xxx" - Third Symbol: The position of the window with a message a relatively coner.
a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom);
b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right);

steps[n].target "" String
  1. Search for page elements that need to be highlighted can be done in several ways:

    target: 'uniqueName'	/*<div data-target="uniqueName"></div>*/
    target: '.className'	/*<div class="className"></div>*/
    target: '#idValue'		/*<div id="idValue"></div>*/
    target: '<tagname class="classname">' /*<tagname class="classname">content</tagnam>*/

  2. You can highlight several elements at the same time. To do this, give them the same names or list them separated by commas.

    target: '.name-1, .name-2, .name-3'

  3. Message in center of screen without specifying a specific target.

    target: ''	/*or Absent target parameter.*/

It may take the values: "any string value"

steps[n].disable false Boolean Block access to element
It may take the values: false or true
steps[n].overlayOpacity 0.5 Number Opacity value of overlay layer
It may take the values: any positive number from 0 to 1
steps[n].overlayColor "#000" Number Clor value of overlay layer
It may take the values: Any color format '#000', 'rgb(0,0,0)' or 'black'
steps[n].spacing 10 Number Indent highlighting around the element, px
It may take the values: any positive number
steps[n].shape 0 Number Shape of highlighting
It may take the values: 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
steps[n].shapeBorderRadius 5 Number The corner radius of rounded rectangle shape. Only when "shape" paramenter has value "2"
It may take the values: any positive number
steps[n].timer false Boolean / Number The time after which an automatic switching to the next step, ms
It may take the values: any positive number or false
steps[n].event "next" String / Array An event that you need to do to go to the next step

It may take the values: "next", "click", "mousedown", "mouseup", "mouseenter", "keydown", "keyup", "blur", "submit" and others jQuery events.

If you want to listen for the event in another element, then use the array construction. The first array element is an "event", the second element is a jQuery object

It may take the values: ["eventName","yourSelector"]
"eventName" - Any jQuery event jQuery events
"yourSelector" - Any jQuery selector name (".classname","#idname", and other jquery selectors jQuery selectors)

steps[n].eventMessage "Follow the required conditions to continue." String Message hint for steps with custom events
It may take the values: any text.
steps[n].skip false Boolean Step can be skipped if you set parameter "skip" to true.
It may take the values: false or true.
steps[n].nextText "Next" String The text in the Next Button
It may take the values: "any string value"
steps[n].prevText "Prev" String The text in the Prev Button
It may take the values: "any string value"
steps[n].trigger false String / Boolean An event which is generated on the selected element, in the transition from step to step. jQuery events
It may take the values: Name of Event or false
steps[n].stepID false String Unique ID Name. This name is assigned to the "html" tag as "data-g-stepid" attribute (If not specified, the plugin generates it automatically in the form: "step-N")
It may take the values: "any string value"
steps[n].waitElementTime 0 Number The parameter "waitElementTime" sets the time (ms) to wait for an item to appear
It may take the values: any positive number
steps[n].loc false String The path to the page on which the step should work. It may take the values: "anyPagePath"
steps[n].ready false Boolean This parameter indicates whether the step was completed or not.
It may take the values: false or true.
steps[n].width 320 Number / String

For more convenient display of content, you can adjust the width of the message window.
You can change this width by setting the value in pixels or persent (screen width relative).
The minimum width is 320 pixels.

If you do not specify the width of the window, it will accept the default value.

It may take the values (for example): 500, '500px' or '500%'.
steps[n].autofocus true Boolean

Automatically puts the cursor in the selected form element.

It will accept the default value.

It may take the values: true or false.
steps[n].keyboardEvent false Boolean This parameter sets the permission to trigger custom events for current step.
It may take the values: true or false
steps[n].bgColor false Boolean / Number Background color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].titleColor false Boolean / Number Title color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].modalContentColor false Boolean / Number Content color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].paginationColor false Boolean / Number Pagination color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].timerColor false Boolean / Number Timer color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].btnColor false Boolean / Number Buttons color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].btnHoverColor false Boolean / Number Buttons Hover color of the message block
It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].checkNext
checkNext: {
	func:function(target){return true},
	messageError:'Fulfill all the conditions!'
}
Object An object containing parameters that set conditions for the transition between steps to forward.
It may take the values: array of objects.
steps[n].checkNext.func
function(target){return true}
Function Function in which you can carry out any verification by clicking on the "Next" button.
If the function returns True, the step will be switched.
It must return the values: false or true.
function(target){
	var a = [YOUR DATA];
	var b = [YOUR DATA];
	if(a == b){
		return true;
	}else{
		return false;
	}
}
steps[n].checkNext.messageError "Fulfill all the conditions!" String If the function returns "False" (steps[n].checkNext.func), an error message will appear in the message window
It may take the values: any text
steps[n].checkPrev
checkPrev: {
	func:function(target){return true},
	messageError:'Fulfill all the conditions!'
}
Object An object containing parameters that set conditions for the transition between steps to back.
It may take the values: array of objects.
steps[n].checkPrev.func
function(target){return true}
Function Function in which you can carry out any verification by clicking on the "Prev" button.
If the function returns True, the step will be switched.
It must return the values: false or true.
function(target){
	var a = [YOUR DATA];
	var b = [YOUR DATA];
	if(a == b){
		return true;
	}else{
		return false;
	}
}
steps[n].checkPrev.messageError "Fulfill all the conditions!" String If the function returns "False" (steps[n].checkPrev.func), an error message will appear in the message window
It may take the values: any text
steps[n].delayBefore 0 Number The delay before the element search, ms It may take the values: any positive number
steps[n].delayAfter 0 Number The delay before the transition to the next step, ms It may take the values: any positive number
lang
lang: {	
	cancelTitle: 'Cancel Tour',
	cancelText:	'×',
	hideText: 'Hide Tour Map',
	tourMapText:'≡',
	tourMapTitle: 'Tour Map',
	nextTextDefault:'Next',
	prevTextDefault:'Prev',
	endText:'End Tour',				
	
	contDialogBtnBegin:'Start from beginning',
	contDialogBtnContinue:'Continue',

	introDialogBtnStart:'Start',															
	introDialogBtnCancel:'Cancel',
	
	modalIntroType:'Tour Intro',
	modalContinueType:'Unfinished Tour'
}	
Object It contains information about the text of the interface elements
It may take the values: objects
lang.cancelTitle "Cancel Tour" String The ttitle in the cancel tour button
It may take the values: "any string value"
lang.cancelText "×" String The text in the cancel tour button
It may take the values: "any string value"
lang.hideText "Hide Tour Map" String The text in the hidden tour map button
It may take the values: "any string value"
lang.tourMapText "≡" String The text in the show tour button
It may take the values: "any string value"
lang.tourMapTitle "Tour Map" String Title of Tour map button
It may take the values: "any string value"
lang.nextTextDefault "Next" String The text in the Next Button
It may take the values: "any string value"
lang.prevTextDefault "Prev" String The text in the Prev Button
It may take the values: "any string value"
lang.endText "End Tour" String Sets the text for the close button in the last step of the tour
It may take the values: "any string value"
lang.contDialogBtnBegin "Start from beginning" String Text in the start button of continue dialog
It may take the values: "any string value"
lang.contDialogBtnContinue "Continue" String Text in the continue button of continue dialog
It may take the values: "any string value"
lang.introDialogBtnStart "Start" String Text in the start button of introduction dialog
It may take the values: "any string value"
lang.introDialogBtnCancel "Cancel" String Text in the cancel button of introduction dialog
It may take the values: "any string value"
lang.modalIntroType "Tour Intro" String Type Name of intro dialog
It may take the values: "any string value"
lang.modalContinueType "Unfinished Tour" String Type Name of continue dialog
It may take the values: "any string value"
modalTemplate

modalTemplate: 
'<div class="gWidget">'+
	'<div class="gCover">[modal-cover]</div>'+
	'<div class="gAction">'+
		'<span class="gType">[modal-type]</span>'+
		'<span class="gBtn">[modal-map]</span>'+
		'<span class="gBtn">[modal-close]</span>'+
		'<div class="gTimer">[modal-timer]</div>'+
	'</div>'+
	'<div class="gScroll">'+
		'<div class="gHeader">[modal-header]</div>'+
		'<div class="gContent">[modal-body]</div>'+
	'</div>'+
	'<div class="gFooter">'+
		'<span class="gPage">'+
			'<span class="gPageVal">[step-value]</span>'+
			'<span class="gPageTotal">[step-total]</span>'+
		'</span>'+
		'<span class="gBtn">[modal-prev]</span>'+
		'<span class="gBtn">[modal-next]</span>'+
		'<span class="gBtn">[modal-cancel]</span>'+
		'<span class="gBtn">[modal-start]</span>'+
		'<span class="gBtn">[modal-begin-first]</span>'+
		'<span class="gBtn">[modal-begin-continue]</span>'+
	'</div>'+
'</div>'	
String Modal window template
It may take the values: objects
mapTemplate

mapTemplate: 							//Tour Map template
'<div class="g-map-pos">'+
	'<div class="gMapAction">'+
		'<span class="gBtn">[map-toggle]</span>'+
		'<span class="gBtn">[map-hide]</span>'+
	'</div>'+
	'<div class="gMapHeader">[map-header]</div>'+
	'<span class="gPage">'+
		'<span class="gPageVal">[step-value]</span>'+
		'<span class="gPageTotal">[step-total]</span>'+
	'</span>'+
	'<div class="gMapContent">[map-content]</div>'+
	'<div class="gMapBufer"></div>'+
'</div>'
String Tour Map template
It may take the values: objects
debug false boolean Display of messages in the console
It may take the values: false or true.

Methods

prev()

Switches the tour to the previous step

This method does not accept any arguments


iGuider('prev');
next()

Switches the tour to the next step

This method does not accept any arguments


iGuider('next');
update()

Updating the position of elements highlighting

This method does not accept any arguments


iGuider('update');
map(position)

Sets the tour map in the specified part of the screen

position

Type: String
Map Tour position: "left","right" or "toggle"
"toggle" - changes position to the opposite.


iGuider('map','left');
destroy()

Removes all effects of plugin. It returns all elements in the condition before the initialization of the plugin

This method does not accept any arguments


iGuider('destroy');
setStep(number)

This method switches the tour to the specified step.

number

Type: String or Number
Step number


iGuider('setStep','2');
getStep()

This method returns the active step number.

This method does not accept any arguments


iGuider('getStep');
timerState(state)

This method switches the auto-viewing between states: "play" and "pause".

state

Type: String
timer state: "play" or "pause"


iGuider('timerState','pause');
design(type)

This method allows you to fix the state of the message block at any stage of the tour.

type

Type: String
message type: "intro", "continue" or step number. f.e. "3"


iGuider('design','3');
button(options)

This method shows the preset button to display and start the tour list.

options

Type: Object (for one tour) or Array (for several tours)


iGuider('button',{
	/*...options...*/
});

/* or */

iGuider('button',[
	{/*...options 1...*/},
	{/*...options 2...*/},
	{/*...options N...*/}
]);
set(options)

This method declares a set of parameters for one or several tours in order to be able to run the tour by referring to this set by a unique identifier.
For each tour in the parameters must be specified parameter "tourID", otherwise the set will not be installed.
Sets are declared using an array.
To use the parameters set, use the "run" method.

options

Type: Array

/* Declaring of parameters for one tour */
iGuider('set',[
		{tourID:'anyCustomName',...}
	]
);				

/* Declaring options for multiple tours */
iGuider('set',[
		{tourID:'one',...}, 
		{tourID:'two',...},
		... 
		{tourID:'anyCustomName',...}
	]
);				

The name of the method "set" is optional.

iGuider([
		{tourID:'one',...}, 
		{tourID:'two',...}
	]
);	
			
run(id)

This method starts a tour from the parameter set that matches the passed identifier by "set" method.
Each running tour stops the demonstration of the previous tour.

id

Type: String


iGuider('set',[
		{tourID:'one',...}, 
		{tourID:'two',...}
	]
);	

iGuider('run','one');
			
setTitle(text)

This method allows you to change the name of the step in the information window.

type

Type: String
message type: any string or html code


iGuider('setTitle','new title');
setContent(text)

This method allows you to change description of the step in the information window.

type

Type: String
message type: any string or html code


iGuider('setContent','new content');

Events

create()

Triggered when the plugin is created


iGuider({
	create: function(){}
});
start()

Triggered before first showing the step


iGuider({
	start: function(){}
});
progress()

Triggered together with start any step


iGuider({
	progress: function(data){}
});

data

Type:object
data.step - Step number
data.steps - Total number of steps

end()

Triggered when the tour ended, or was interrupted


iGuider({
	end: function(){}
});
abort()

Triggered when the tour aborted


iGuider({
	abort: function(){}
});
finish()

Triggered when step sequence is over.


iGuider({
	finish: function(){}
});
steps[n].before()

Triggered before the start of step


iGuider({
	steps: [{
		before:function(target){}
	}]
});				
steps[n].during()

Triggered after the onset of step


iGuider({
	steps: [{
		during:function(target){}
	}]
});				
steps[n].after()

Triggered After completion of the step, but before proceeding to the next


iGuider({
	steps: [{
		after:function(target){}
	}]
});				
play()

Triggered when the timer state switches to "play".


iGuider({
	play:function(){}
});				
pause()

Triggered when the timer state switches to "pause".


iGuider({
	pause:function(){}
});				

Additional Functionality

data-iguider

This is interactive data-attribute "data-iguider". In this attribute, you can specify the ID of the tour. If the tour parameters with this identifier were previously declared in the parameter set by the "set" method, then by clicking on the element with the data-attribute, the tour corresponding to the ID will be launched.


<script>
$(window).on('load',function(){
	
	/*This is object with tour options*/
	var opt_one = {
		tourID:'one',
		...
	};
	var opt_two = {
		tourID:'two',
		...
	};

	iGuider('set',[opt_one,opt_two]);
})
</script> 


<a class="btn" data-iguider="one">Start One</a>
<a class="btn" data-iguider="two">Start Two</a>
	

Selector Getter

Addition to the iGuider and iTour plugins.
Gets an unique selector code for any element on the page.

Select one of the options

  • Install from Chrome Web Store
    Does not work on local pages

  • Install from unpacked directory in Developer mode
    You can start by turning on Developer mode. Click the Chrome menu icon and select Extensions from the Tools menu. Ensure that the "Developer mode" checkbox in the top right-hand corner is checked. Now you can reload extensions, load an unpacked directory of files as if it were a packaged extension, and more.
    The packed extension file is located in the "chrome_extension" folder.

After turning on the extension, you will see the boundaries of the page elements by hovering the mouse over them. When you right-click on any element of the page, you get a unique selector code for this element. This code will be displayed in a popup fixed window.

auto-viewing

After you receive the selector code, you can save it to the clipboard, and then paste it into the iGuider plugin initialization code. Popup window can be moved in the any place of your screen, that it does not block the elements you need.


Update History

Version 4.5 (Nov 12, 2019)

NEW FEATURES
  • Added new method "setTitle". This method allows you to change the name of the step in the information window.
  • Added new method "setContent". This method allows you to change the name of the step in the information window.

Version 4.4 (June 02, 2019)

BUGFIXES
  • Fixed a bug where a dynamically created element did not get the "iGuider-highlight" class name
NEW FEATURES
  • Added new parameter "autofocus". It automatically puts the cursor in the selected form element.
CHANGES
  • Added example of a tour in conjunction with datapicker "snippet-datepicker"

Version 4.3 (December 16, 2018)

NEW FEATURES
  • Added interactive data-attribute "data-iguider". In this attribute, you can specify the ID of the tour. If the tour parameters with this identifier were previously declared in the parameter set by the "set" method, then by clicking on the element with the data-attribute, the tour corresponding to the ID will be launched.
  • Added new method "run". This method starts a tour from the parameter set that matches the passed identifier.
  • Added new method "set". This method declares a set of parameters for one or several tours in order to be able to run the tour by referring to this set by a unique identifier.
  • In the checklist, added installation of the viewed step to "ready" state, if this step does not require user events or conditions.
  • Added file "quick-start-tpl.html". This file contains the minimum required code for quick connection and start the tour.
CHANGES
  • Fully redesigned logic of the message automatic positioning.
  • Various other improvements.

Version 4.2 (December 11, 2018)

CHANGES
  • Improved tour navigation across pages.

Version 4.1 (December 10, 2018)

NEW FEATURES
  • Added new method "design". It allows you to fix the state of the message block at any stage of the tour.
  • Added new method "button". This method shows the preset button to display and start the tour list.
  • Added new event "play". This event triggered when the timer state switches to "play".
  • Added new event "pause". This event triggered when the timer state switches to "pause".
  • Added new attribute "data-g-step" into HTML tag. This attribute displays the current step number.
CHANGES
  • The attribute name has been changed, in which the value of the stepID parameter is displayed. Changed "data-step" to "data-g-stepid"
  • Improved block width adaptation with message relative to screen width
  • Improved display of the block with the message when scrolling the page.
BUGFIXES
  • Fixed switching themes in the builder.

Version 4.0 (December 06, 2018)

NEW FEATURES
  • Added new event "start". Triggered before first showing the step
  • Added preview window to the tour builder
  • Added new event "progress". Triggered together with start any step
  • Added restoration of the set checklist position after updating the page
CHANGES
  • Improved work with alternative highlighting
  • Improved operation of "delayBefore" and "delayAfter" parameters
  • Changed the name of the short code in the template for the cover

Version 3.1 (November 30, 2018)

CHANGES
  • Improved visualization for Right to Left text orientation
  • Removed the effect of the highlight shape to scrolling

Version 3.0 (November 30, 2018)

CHANGES
  • Removed the "duration" sub-parameter
  • The sub-parameters "messageNextError" and "messagePrevError" have been removed from "lang" parameter
  • The sub-parameters "introTitle" and "introContent" have been renamed to "title" and "content" and transferred from "lang" to "intro"
  • The sub-parameters "contDialogTitle" and "contDialogContent" have been renamed to "title" and "content" and transferred from "lang" to "continue"

Version 2.12 (November 29, 2018)

NEW FEATURES
  • Added new value "ready" for sub-parameter "clickable" in to tourMap Options. This value makes clickable only completed steps and current
  • Added new sub-parameter "eventMessage" in to Step Options. This parameter sets message hint for steps with custom events
  • Added new parameter "keyboardEvent" in to General Options. This parameter sets the permission to trigger custom events: true or false (default)
  • Added new sub-parameter "keyboardEvent" in to Step Options. This parameter sets the permission to trigger custom events for current step: true or false (default)
CHANGES
  • Improved translations: czech and slovakia

Version 2.11 (November 27, 2018)

NEW FEATURES
  • Added new parameter "timerType" in to General Options. Sets shape type of the timer progress bar: "line" (default) or "circle"
  • Added auto-view control buttons: "play" and "pause"
  • Added new method "timerState". This method switches the auto-viewing between states: "play" and "pause".
CHANGES
  • Changed user interaction logic with auto-viewing.
BUGFIXES
  • Improved work with missing elements on the page.

Version 2.10 (November 26, 2018)

BUGFIXES
  • Added local storage clearing of all plugin data when the tour is completed.
  • Fixed corner display conditions in the message window.

Version 2.9 (November 26, 2018)

NEW FEATURES
  • Added new method "setStep". This method switches the tour to the specified step.
  • Added new method "getStep". This method returns the active step number.
BUGFIXES
  • Added overlay layer while waiting for the first element to appear. Checklist will be open only after the appearance of the item.
  • Improved the behavior of the block with the message at extremely small screen resolutions.
  • Improved the behavior of the block with a message that is larger than the visible area of the screen.

Version 2.8 (November 24, 2018)

BUGFIXES
  • Improved scrolling in the help tour on the tour builder page (parameters generator).
  • Fixed a situation in which there was a search for a non-existent object and error display in the debager.
  • Corrected positioning of the message in conditions of lack of space at the top or bottom of the target block.

Version 2.7 (November 23, 2018)

BUGFIXES
  • Fixed positioning of the highlighting when scrolling the page while waiting for the hidden item to appear.

Version 2.6 (November 22, 2018)

BUGFIXES
  • Fixed the problem of incorrect display of steps in the checklist on devices with a small screen height

Version 2.5 (November 22, 2018)

NEW FEATURES
  • Added new parameter "bgColor". Global background color of the message block.
  • Added new sub-parameter "bgColor" for the parent parameters: intro, continue, tourMap and steps.
  • Added new parameter "titleColor". Global title color of the message block.
  • Added new sub-parameter "titleColor" for the parent parameters: intro, continue, tourMap and steps.
  • Added new parameter "modalContentColor". Content color of the intro message block.
  • Added new sub-parameter "modalContentColor" for the parent parameters: intro, continue and steps.
  • Added new parameter "modalTypeColor". Global modal type color of the message block.
  • Added new sub-parameter "modalTypeColor" for the parent parameters: intro and continue.
  • Added new parameter "paginationColor". Global pagination color of the message block.
  • Added new sub-parameter "paginationColor" for the parent parameter: steps.
  • Added new parameter "timerColor". Global timer color of the message block.
  • Added new sub-parameter "timerColor" for the parent parameter: steps.
  • Added new parameter "btnColor". Global buttons color.
  • Added new sub-parameter "btnColor" for the parent parameters: intro, continue, tourMap and steps.
  • Added new parameter "btnHoverColor". Global buttons hover color.
  • Added new sub-parameter "btnHoverColor" for the parent parameters: intro, continue, tourMap and steps.
  • Added new sub-parameter "itemColor" for the parent parameter: tourMap. Item color of the Checklist
  • Added new sub-parameter "itemHoverColor" for the parent parameter: tourMap. Item hover color of the Checklist
  • Added new sub-parameter "itemActiveColor" for the parent parameter: tourMap. Item Active color of the Checklist
  • Added new sub-parameter "itemActiveBg" for the parent parameter: tourMap. Item Active BG color of the Checklist
  • Added new sub-parameter "itemNumColor" for the parent parameter: tourMap. Item Number color of the Checklist
  • Added new sub-parameter "checkColor" for the parent parameter: tourMap. Check color of the Checklist
  • Added new sub-parameter "checkReadyColor" for the parent parameter: tourMap. Check Ready color of the Checklist
CHANGES
  • In connection with the emergence of new style control parameters, from the package removed themes: light, dark, aero, violet, snow, club

Version 2.4 (November 17, 2018)

BUGFIXES
  • Fixed bug with using destroy method together with tour without steps.

Version 2.3 (November 13, 2018)

NEW FEATURES
  • Added new theme "Neon". The old "Neon" theme is no longer in the archive.
  • Added new theme "Violet". The old "Violet" theme is no longer in the archive.

Version 2.2 (November 9, 2018)

NEW FEATURES
  • Added new theme "Material"
  • Added the transfer of the target object in the functions: before, during, after.
  • Improved work with multi-page tours. Accounted for more options toggle between pages.

Version 2.1 (November 5, 2018)

NEW FEATURES
  • Added additional automatic scrolling of the page in order to maximally place an object and a block with a large message in the screen.
  • Added new demo "test-large-message". For Large content testing.
  • Added new demo "snippet-check-fields". For required fields.
  • Added new sub-parameter "width" into the parameters of intro. This parameter set the width of the intro message block.
  • Added new sub-parameter "width" into the parameters of continue. This parameter set the width of the continue message block.

Version 2.0 (November 4, 2018)

NEW FEATURES
  • Added new parameter "toggle" for method "map".
  • Added new theme "Relate"
  • Added control by arrows on the keyboard. Left - the previous step, right - the next step.
  • Added parameter "keyboard" to enable / disable the ability to control the tour using the keyboard.

Version 1.11 (November 3, 2018)

NEW FEATURES
  • Added automatic scrolling in the block with a list of steps to ensure that the active step is always visible.
  • Improved automatic search for the best position of the message for blocks with a high height.
  • Added the transfer of the target object in the function heckNext, chechPrev.

Version 1.10 (October 30, 2018)

NEW FEATURES
  • Added new parameter "loc". Global path to the page on which the step should work. Used to link a tour to a specific page.
  • Added new parameter "timer". Global time value after which the tour automatic switching to the next step.

Version 1.9 (October 30, 2018)

NEW FEATURES
  • Added new parameter "spacing". This parameter set the global indent highlighting around the element.
  • Added new parameter "width". This parameter set the global width of the message block.
  • Added new parameter "shapeBorderRadius". Global corner radius of rounded rectangle shape.
  • Added new parameter "shape". This parameter set the global shape of highlighting.
BUGFIXES
  • Fixed a bug causing incorrect calculation of the z-index of dynamic elements.

Version 1.8 (October 29, 2018)

NEW FEATURES
  • Added new sub-parameter "width". This parameter sets width of the message block for a specific step.

Version 1.7 (October 28, 2018)

CHANGES
  • A part of the logic was rewritten in order to make the plugin more flexible to extend the functionality.

Version 1.6 (October 27, 2018)

NEW FEATURES
  • The plugin code from this day provide for the declaration of numerical values of parameters in brackets, as string value.
  • Added sub-parameter "waitElementTime". This parameter sets the time (ms) to wait for an item to appear
  • Added sub-parameters "checkNext" and "checkPrev". Functions in which you can carry out any verification by clicking on the "Next" or "Prev" button.
  • Saving the progress of the tour after updating the page
  • Added the ability to continue the tour after refreshing the page.

Version 1.5 (May 24, 2018)

BUGFIXES
  • Fixed bug of calculating the coordinates of the highlighted area.

Version 1.4 (April 27, 2018)

NEW FEATURES
  • Added a warning message when the plugin is working on local pages in the browser Internet Explorer 11 and highest.

Version 1.3 (April 19, 2018)

NEW FEATURES
  • In a files set added WordPress version of plugin
  • Added chrome extension, which gets an unique selector code for any element on the page
  • Innovation. To display a message in the center, do not specify the target
  • Added iGuider Builder

Version 1.2 (April 05, 2018)

NEW FEATURES
  • Changes have been made to the processing of the values for the parameters "cover"

Version 1.1 (January 12, 2018)

NEW FEATURES
  • Added new rectangle shape with rounded corners

Version 1.0 (November 27, 2017)

Release