Skip to Navigation | Skip to Content

Products

Nitobi Spotlight

Overview

Nitobi Spotlight

Download our Spotlight web tour component to provide stylish instructions and commentary for the users of your site.

Spotlight allows the developer to visually highlight parts of a webpage, provide a guided tour for a user, and mimick user interactions, all through a simple JavaScript API interface.

Live Demo | View Source

Our Tax Form sample shows the form interactions that you can develop using the Nitobi Spotlight component, to guide user through complex forms. You can view it here.

Example Source Code (hide)

JavaScript Code

function runTour() {
	// NONE, GREYSWIPE, MODAL
	var taxForm = document.forms[0];
	var wT = new nitobi.spotlight.Spotlight('GREYSWIPE', 'peanut_talkbubble', 'square');
	wT.createCalloutStep(null, 'We\'ll Help', 'Now we\'ll give you a rundown of this form and try to explain how to run through it. Click the arrow to continue');	
	wT.createCalloutStep('personalInfo', 'Your Personal Details', 'Here you just need to provide some basic information about yourself so we know who you are: your name, date of birth, Social Insurance Number, and so-on.<br><br>Click the arrow to continue.');
	wT.createMouseStep('APPEARONOBJECT', 'personalInfo',400);
	wT.createFormHelperStep(taxForm['lname'], "TYPETEXT", 400, "Doe");
	wT.createFormHelperStep(taxForm['fname'], "TYPETEXT", 400, "John T.");
	wT.createFormHelperStep(taxForm['dbirth'], "TYPETEXT", 400, "1975/03/10");
	wT.createCalloutStep('enumber', 'Employee Number', 'This field is optional. <b>It only applies if you were employed in the previous tax year.</i>', 2000);
	wT.createFormHelperStep(taxForm['enumber'], "TYPETEXT", 400, "7432423872");
	wT.createFormHelperStep(taxForm['caddress'], "TYPETEXT", 400, "3468 Sofa Ave.\nNorth Vancouver, WA\nV7N3I9\nUSA");
	wT.createCalloutStep('cresidence', 'Country of Residence', 'This field is optional. <b>It only applies if you lived in another country for more than 180 days last year.</i>', 400);	
	wT.createCalloutStep('SSN', 'Social Security Number', 'This field is mandatory. <b>It is a 10 digit number. You will find it on your SSN card or last year\'s tax return.</i>', 400);	
	wT.createFormHelperStep(taxForm['SSN'], "TYPETEXT", 400, "1234567890");
	wT.createCalloutStep('fm2_1', 'Basic Personal Amount', 'This you will find on your T4 form. It is the amount of income you earned from your employers last year.', 400);	
	wT.createFormHelperStep(taxForm['fm2_1'], "TYPETEXT", 400, "$45,000");
	wT.createCalloutStep('fm2_2', 'Age Amount (Optional)', 'This only applies if you were 65 or older as of December 31, 2007. It won\'t be more than $30,936.', 400);	
	wT.createFormHelperStep(taxForm['fm2_2'], "TYPETEXT", 400, "$30,936");	
	wT.createCalloutStep('fm2_3', 'Pension Income Amount (Optional)', 'This only applies if you received pension payments last year.<br><br>This does not include CPP, QPP, OAS, or GIS.. only private pension plans.', 400);		
	wT.createFormHelperStep(taxForm['fm2_3'], "TYPETEXT", 400, "$2,000");
	wT.createCalloutStep('fm2_4', 'Educational Payments (Optional)', 'Read the instructions here, but keep in mind that you can deduct only amounts that you paid on text books for <b>full time</b> study.', 400);	
	wT.createFormHelperStep(taxForm['fm2_4'], "TYPETEXT", 400, "$4,500");		
	wT.createCalloutStep('fm2_5', 'Disability Amount (Optional)', 'If the taxpayer was disabled during the last year, enter your Tax Credit amount, the maximum of which is $6890.', 400);	
	wT.createFormHelperStep(taxForm['fm2_5'], "TYPETEXT", 400, "$0");		
	wT.createCalloutStep('fm2_6', 'Spousal Amount (Optional)', 'If you are supporting your spouse whose net income is less than $759, enter $7,581 here.', 400);	
	wT.createFormHelperStep(taxForm['fm2_6'], "TYPETEXT", 400, "$0");	
	wT.createCalloutStep('finishButton', 'Click here to Save', 'When you\'re done click here to save your data.', 400);		
	wT.createCodeStep("clearForm()", 10);	
	wT.createCalloutStep(null, 'For more support..', 'That\'s it! If you need more assitance, call our 24 hour hotline at 1-800-555-1234. Operaters will be happy to assit you.');	
	wT.play();
}
function clearForm() {
	var taxForm = document.forms[0];
	for (var i = 0; i <taxform.length; i++) { if ((taxform[i].type="text" ) || (taxform[i].type="textarea" )) { taxform[i].value="" ; } } } function runsuggestion() { nitobi.html.css.precacheimages(); now we create a new one mycallout="new" nitobi.callout.callout("peanut_talkbubble"); we attach it to the element with id myname mycallout.attachtoelement('gethelp'); mycallout.settitle('need help?'); mycallout.setbody('click here for a brief explanation of this form.'); mycallout.setexpire(5000); now we show it. settimeout("mycallout.show()", 2000); } nitobi.html.attachevent(window,"load",runsuggestion); < textarea>
            </div>
			
			
			<div class="grid-3x3">
				<div id="overview-detail" class="selected"><a name="overview"></a>
					<h2>Overview</h2>
					<div class="col1">
						<h3>Simple JavaScript Interface</h3>
						<p>Easily script your tours using JavaScript to create callouts, mouse movements, and execute custom JavaScript.</p>
						<h3>Create Stylish Callouts</h3>
						<p>Nicely skinned Callouts allow developers to add training material, commentary, or helpful hints to Spotlight tours (requires <a href="../../products/callout">Nitobi Callout</a>)</p>
						<h3>Simulated Form Interactions</h3>
						<p>Simulate typing into forms using built-in form helpers.</p>
						<h3>Integrates with Adobe Dreamweaver</h3>
						<p>Simply drag and drop Ajax components into sites and applications using Adobe Dreamweaver CS3.</p>
					</div>
					<div class="col2">
						<h3>Script Mouse Movement</h3>
						<p>Generate simulated mouse movements, and clicks.</p>
						<h3>Cross Browser</h3>
						<p>Nitobi components have full support for an array of modern browsers including IE6+, Firefox, Mozilla 1.3+, Camino, and Netscape 7+, and Safari.</p>
						<h3>Execute Custom JavaScript</h3>
						<p>Easily execute JavaScript to give users a tour of an Ajax based web application.</p>
					</div>
				</div>
            </div>			
		</div>
		<hr class="hide"/>
		<div class="col2 product-nav">
			<h2>Products</h2>
			<ul class="secondary-nav">
				<li><a href="../../products/grid">Grid</a></li>
				<li><a href="../../products/treegrid">TreeGrid</a>
           		<li><a href="../../products/combobox">Combobox</a></li>
				<li><a href="../../products/tabstrip">Tabstrip</a></li>
				<li><a href="../../products/tree">Tree</a></li>
				<li><a href="../../products/fisheye">Fisheye</a></li>
				<li><a href="../../products/callout">Callout</a></li>
				<li class="selected"><a href="../../products/spotlight">Spotlight</a>
				<ul>
					
				    <li><a href="../../products/spotlight/simpletour">Simple Tour</a></li>
					<li><a href="../../products/spotlight/ashjewelry">Ash Jewelry</a></li>
					<li><a href="../../products/spotlight/picrific">Picrific</a></li>
					<li class="selected"><a href="../../products/spotlight/taxform">Tax Form</a></li>
					
				</ul></li>
				<li><a href="../../products/calendar">Calendar</a></li>
				<li><a href="../../products/toolkit">Toolkit</a></li>
			</ul>
		</div>
	</div>
</div></div>
<hr class="hide"/>
<div id="footer"><div class="wrap">
	<p>© Copyright 2008, Nitobi Software, all rights reserved <span class="sep">|</span> <a href="mailto:sales@nitobi.com">sales@nitobi.com</a> <span class="sep">|</span> +1 (604) 685-9287</p>
	<p class="socialites">
		Nitobi on: <a href="http://www.facebook.com/pages/Nitobi-Software/5948204158">Facebook</a> <span class="sep">|</span> <a href="http://twitter.com/nitobi">Twitter</a> <span class="sep">|</span> <a href="http://www.flickr.com/photos/tags/nitobi/">Flickr</a> <span class="sep">|</span> <a href="../../planet-sub/index">Planet Nitobi</a> <span class="sep">|</span> <a href="/" class="rss">RSS</a>
	</p>
</div></div>
</div></div>
<div id="grid-overlay"></div>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> <script type="text/javascript"> var pt = _gat._getTracker("UA-94271-5"); pt._initData(); pt._trackPageview(); </script></body>
</html>