paulkaplan/demo.html

## demo.html
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="walkthrough.js"></script>

<link rel="stylesheet" href="walkthrough.css" />

<body>

  <div class='walkthrough-container'>
    <div class="walkthrough-steps">
      <div
        class="walkthrough-step"
        data-title="Hello world!"
        >
        <p> hello world ,this is the first step!</p>
      </div>

      <div
        class="walkthrough-step"
        data-title="Next step"
        >
        <p> wowsa!</p>
      </div>

      <div
        class="walkthrough-step"
        data-title="the last step"
        >
        <p> oh no! this is my last step!</p>
      </div>
    </div>
  </div>

  <script>
    $('.walkthrough-container').walkthrough({
      width:600,
      height: 600,
      // showStepNumber : false,
      // showNextPrevButtons : false
    });
  </script>
</body>

## walkthrough.css
.walkthrough-container {
  position:relative;
}
.walkthrough-container.debug * {
  border:1px solid #faa;
}

.walkthrough-step {
  display:none;
}
.walkthrough-step.active {
  display:block;
}
.walkthrough-progress-step:hover {
  cursor:pointer;
}
.walkthrough-progress-step.active {
  background:#eee;
}

.walkthrough-progress-step {
  padding:1em;
  display:inline-block;
  width:120px;
}

span.step-number {
  display:inline-block;
  padding:5px;
}
span.step-title {
  display:inline-block;
  padding:5px;
}

.step-nav-button {
  display:block;
  width:100px;
  position:absolute;
  bottom:0;
  text-align:center;
}
.step-nav-button#prev-step {
  left:0;
}
.step-nav-button#next-step {
  right:0;
}

## walkthrough.js
(function ($) {

  var defaults = {
    showStepNumber : true,
    showNextPrevButtons : true,
    debug : false
  }

  var GLOBALS = {};

  GLOBALS.step_number = 1;
  GLOBALS.n_steps = 0;
  GLOBALS.container = null;


  function initWalkthrough(el) {

    // apply a container class for css reasons
    el.addClass('walkthrough-container');
    if(GLOBALS.opts.debug) {
      el.addClass('debug');
    }
    GLOBALS.container = el;
    GLOBALS.n_steps = el.find('.walkthrough-step').length;

    // create the walkthrough navigation
    createStepNavigation(el);

    // set the first step as active
    setActiveStep();
  }

  function createProgressBar(el) {
    el.prepend( $("<div id='walkthrough-progress'></div>") );

    // add the steps to the progress bar
    var progressBar = $("#walkthrough-progress");
    var number = 1;

    el.find('.walkthrough-step').each(function () {
      // put data-step-number attribute to make it easier to keep track
      $(this).attr('data-step-number', number);

      // Create the progress step
      var title  = $(this).attr('data-title');
      var progressStep = $("<div class='walkthrough-progress-step'></div>");

      progressStep.attr('data-step-number', number);
      if (GLOBALS.opts.showStepNumber) {
        progressStep.append($('<span class="step-number">'+number+'</span>'));
      }
      progressStep.append($('<span class="step-title">'+title+'</span>'));

      progressBar.append(progressStep);

      // bind clicking progress bar to change steps
      progressStep.click(function () {
        GLOBALS.step_number = parseInt($(this).attr('data-step-number'));
        setActiveStep();
      })

      number += 1;
    })
  }

  function setActiveStep() {
    // remove active from all steps
    $(".walkthrough-step, .walkthrough-progress-step").removeClass('active');

    // find the new active step and add active class
    var step_el = GLOBALS.container.find('[data-step-number='+GLOBALS.step_number+']');
    step_el.addClass('active');

    // disable or enable prev/next buttons based on number
  }

  function createStepNavigation(el) {
    createProgressBar(el);
    createNextPrevButtons(el);
  }

  function createNextPrevButtons(el) {
    if (GLOBALS.opts.showNextPrevButtons) {
      // create the next/prev buttons
      el.append($("<a class='step-nav-button' id='prev-step' href='#'>Previous</a>"))
      el.append($("<a class='step-nav-button' id='next-step' href='#'>Next</a>"))

      // bind next/prev actions
      $("#next-step").click(nextStep);
      $("#prev-step").click(prevStep);
    }
  }

  function nextStep() {
    GLOBALS.step_number = Math.min(GLOBALS.n_steps, GLOBALS.step_number+1);
    setActiveStep();
    return false; // because it is bound to a click action
  }

  function prevStep() {
    GLOBALS.step_number = Math.max(1, GLOBALS.step_number-1);
    setActiveStep();
    return false; // because it is bound to a click action
  }

  function setOptions() {
    // css options
    if (GLOBALS.opts.width) {
      GLOBALS.container.width(GLOBALS.opts.width);
    }

    if (GLOBALS.opts.height) {
      GLOBALS.container.height(GLOBALS.opts.height)
    }
  }

  $.fn.walkthrough = function (opts) {
    opts = opts || {};

    GLOBALS.opts = $.extend({}, defaults, opts);

    // initiate the plugin on the element
    initWalkthrough( $(this) );

    setOptions( $(this) );

    return self;
  }
}( jQuery ));
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="walkthrough.js"></script>

	<link rel="stylesheet" href="walkthrough.css" />

	<body>

	<div class='walkthrough-container'>
	<div class="walkthrough-steps">
	<div
	class="walkthrough-step"
	data-title="Hello world!"
	>
	<p> hello world ,this is the first step!</p>
	</div>

	<div
	class="walkthrough-step"
	data-title="Next step"
	>
	<p> wowsa!</p>
	</div>

	<div
	class="walkthrough-step"
	data-title="the last step"
	>
	<p> oh no! this is my last step!</p>
	</div>
	</div>
	</div>

	<script>
	$('.walkthrough-container').walkthrough({
	width:600,
	height: 600,
	// showStepNumber : false,
	// showNextPrevButtons : false
	});
	</script>
	</body>
	.walkthrough-container {
	position:relative;
	}
	.walkthrough-container.debug * {
	border:1px solid #faa;
	}

	.walkthrough-step {
	display:none;
	}
	.walkthrough-step.active {
	display:block;
	}
	.walkthrough-progress-step:hover {
	cursor:pointer;
	}
	.walkthrough-progress-step.active {
	background:#eee;
	}

	.walkthrough-progress-step {
	padding:1em;
	display:inline-block;
	width:120px;
	}

	span.step-number {
	display:inline-block;
	padding:5px;
	}
	span.step-title {
	display:inline-block;
	padding:5px;
	}

	.step-nav-button {
	display:block;
	width:100px;
	position:absolute;
	bottom:0;
	text-align:center;
	}
	.step-nav-button#prev-step {
	left:0;
	}
	.step-nav-button#next-step {
	right:0;
	}
	(function ($) {

	var defaults = {
	showStepNumber : true,
	showNextPrevButtons : true,
	debug : false
	}

	var GLOBALS = {};

	GLOBALS.step_number = 1;
	GLOBALS.n_steps = 0;
	GLOBALS.container = null;


	function initWalkthrough(el) {

	// apply a container class for css reasons
	el.addClass('walkthrough-container');
	if(GLOBALS.opts.debug) {
	el.addClass('debug');
	}
	GLOBALS.container = el;
	GLOBALS.n_steps = el.find('.walkthrough-step').length;

	// create the walkthrough navigation
	createStepNavigation(el);

	// set the first step as active
	setActiveStep();
	}

	function createProgressBar(el) {
	el.prepend( $("<div id='walkthrough-progress'></div>") );

	// add the steps to the progress bar
	var progressBar = $("#walkthrough-progress");
	var number = 1;

	el.find('.walkthrough-step').each(function () {
	// put data-step-number attribute to make it easier to keep track
	$(this).attr('data-step-number', number);

	// Create the progress step
	var title = $(this).attr('data-title');
	var progressStep = $("<div class='walkthrough-progress-step'></div>");

	progressStep.attr('data-step-number', number);
	if (GLOBALS.opts.showStepNumber) {
	progressStep.append($('<span class="step-number">'+number+'</span>'));
	}
	progressStep.append($('<span class="step-title">'+title+'</span>'));

	progressBar.append(progressStep);

	// bind clicking progress bar to change steps
	progressStep.click(function () {
	GLOBALS.step_number = parseInt($(this).attr('data-step-number'));
	setActiveStep();
	})

	number += 1;
	})
	}

	function setActiveStep() {
	// remove active from all steps
	$(".walkthrough-step, .walkthrough-progress-step").removeClass('active');

	// find the new active step and add active class
	var step_el = GLOBALS.container.find('[data-step-number='+GLOBALS.step_number+']');
	step_el.addClass('active');

	// disable or enable prev/next buttons based on number
	}

	function createStepNavigation(el) {
	createProgressBar(el);
	createNextPrevButtons(el);
	}

	function createNextPrevButtons(el) {
	if (GLOBALS.opts.showNextPrevButtons) {
	// create the next/prev buttons
	el.append($("<a class='step-nav-button' id='prev-step' href='#'>Previous</a>"))
	el.append($("<a class='step-nav-button' id='next-step' href='#'>Next</a>"))

	// bind next/prev actions
	$("#next-step").click(nextStep);
	$("#prev-step").click(prevStep);
	}
	}

	function nextStep() {
	GLOBALS.step_number = Math.min(GLOBALS.n_steps, GLOBALS.step_number+1);
	setActiveStep();
	return false; // because it is bound to a click action
	}

	function prevStep() {
	GLOBALS.step_number = Math.max(1, GLOBALS.step_number-1);
	setActiveStep();
	return false; // because it is bound to a click action
	}

	function setOptions() {
	// css options
	if (GLOBALS.opts.width) {
	GLOBALS.container.width(GLOBALS.opts.width);
	}

	if (GLOBALS.opts.height) {
	GLOBALS.container.height(GLOBALS.opts.height)
	}
	}

	$.fn.walkthrough = function (opts) {
	opts = opts \|\| {};

	GLOBALS.opts = $.extend({}, defaults, opts);

	// initiate the plugin on the element
	initWalkthrough( $(this) );

	setOptions( $(this) );

	return self;
	}
	}( jQuery ));