<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="list-group wizard-menu">
<a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
<h4 class="list-group-item-heading">1. Plan</h4>
<p class="list-group-item-text">Draft a Rough Concept</p>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">2. Write</h4>
<p class="list-group-item-text">Write and Create the Page/Post</p>
</a>
<a href="#" class="list-group-item step-3-menu" data-for=".step-3">
<h4 class="list-group-item-heading">3. Optimize</h4>
<p class="list-group-item-text">Test this page against alternatives</p>
</a>
<a href="#" class="list-group-item step-4-menu" data-for=".step-4">
<h4 class="list-group-item-heading">4. Social</h4>
<p class="list-group-item-text">Spread the word to get your FairShare</p>
</a>
<a href="#" class="list-group-item step-5-menu" data-for=".step-5">
<h4 class="list-group-item-heading">5. Advertising</h4>
<p class="list-group-item-text">Jumpstart your AB testing or push people to a sales page</p>
</a>
<a href="#" class="list-group-item step-6-menu" data-for=".step-6">
<h4 class="list-group-item-heading">6. Publish</h4>
<p class="list-group-item-text">Hit Go</p>
</a>
<a href="#" class="list-group-item step-7-menu" data-for=".step-7">
<h4 class="list-group-item-heading">7. Analyze</h4>
<p class="list-group-item-text">Page specific analysis of SEO & traffic</p>
</a>
</div>
</div>
<div class="col-md-8">
<!-- Load content in-->
<div class="well wizard-content">
</div>
<!-- Content to load-->
<div class="hide">
<div class="step-1">
<div class="row">
<div class="col-md-12">
<!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form -->
<form method="post" action="#" data-action="index.php">
<div class="form-group">
<label for="inputEx1">Title</label>
<input id="inputEx1" type="text" class="form-control" placeholder="Title" required><br>
<label for="inputEx2">Concept</label>
<input id="inputEx2" type="text" class="form-control" placeholder="Concept" required>
</div>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="1">Next step</button>
</div>
</form>
</div>
</div>
</div>
<div class="step-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Bold">
<i class="fa fa-bold"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Italic">
<i class="fa fa-italic"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Underline">
<i class="fa fa-underline"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Strikethrough">
<i class="fa fa-strikethrough"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Undo">
<i class="fa fa-reply"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Redo">
<i class="fa fa-share"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Align left">
<i class="fa fa-align-left"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Align center">
<i class="fa fa-align-center"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Align right">
<i class="fa fa-align-right"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Align justify">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Numbered list">
<i class="fa fa-list-ol"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Bulleted list">
<i class="fa fa-list-ul"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Link">
<i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Unlink">
<i class="fa fa-unlink"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Picture">
<i class="fa fa-picture-o"></i>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="HTML table">
<i class="fa fa-table"></i>
</button>
</div>
</div>
<div class="panel-body">
<h2>
Hello and welcome</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut <a href="http://www.jquery2dotnet.com/2013/12/brand-icons-design-using-css.html">Brand Icons Design Using Css</a> aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-success">
Save</button>
<button type="button" class="btn btn-primary">
Cancel</button>
<div class="pull-right">
<button type="button" class="btn btn-danger">
<i class="fa fa-trash-o"></i> Delete</button>
</div>
</div>
<div class="pull-right wizard-nav"><br>
<button type="submit" class="btn btn-primary wizard-next" data-current-step="2">Next step</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-3">
<div class="row">
<div class="col-md-12">
<!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form -->
<form method="post" action="#" data-action="index.php">
<div class="form-group">
<label for="inputEx1">Title: <em>This is the Fake Title for this page is title.</em><br>
<span class="label label-success">Includes Keywords</span>
<span class="label label-warning">100 Characters - Can you remove a word?</span>
<span class="label label-danger">Very Similar Title to "{enter title here}</span>
</label><br>
<label for="inputEx2">Metric 2</label><br>
<label for="inputEx2">Metric 3</label><br>
<label for="inputEx2">Metric 4</label><br>
<label for="inputEx2">Metric 5</label>
</div>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="3">Next step</button>
</div>
</form>
</div>
</div>
</div>
<div class="step-4">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>Social <small>{{twitter, facebook, pinterest, <abbr title="Email is interesting because we could actually create templates to contact out to PR contacts immediately upon the push of a post, but also templates to notify internal teams of new content, and templates to send notifications to RSS subscribers or to add this content to weekly/monthly summary emails.">email</abbr>}}</small></h3>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">#</th>
<th class="text-center">Account</th>
<th class="text-center">Date & Time</th>
<th class="text-center">Tweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>@alorum</td>
<td>Immediately Upon Publish</td>
<td>New Post: {{title}} - {{url}}</td>
</tr>
<tr>
<td>2</td>
<td>@sparkcatalyst</td>
<td>5 Minutes</td>
<td>RT @alorum New Post: {{title}} - {{url}}</td>
</tr>
<tr>
<td>3</td>
<td>@ckluis</td>
<td>1 Hour</td>
<td>RT @alorum New Post {{title}} - {{url}}</td>
</tr>
<tr>
<td>4</td>
<td>@alorum</td>
<td>4 Hours</td>
<td>Share Your Thoughts: {{title}} - {{url}}</td>
</tr>
<tr>
<td>5</td>
<td>@alorum</td>
<td>24 Hours</td>
<td>Add Your Input: {{title}} - {{url}}</td>
</tr>
<tr>
<td>6</td>
<td>@alorum</td>
<td>24 Hours</td>
<td>Add Your Input: {{title}} - {{url}}</td>
</tr>
<tr>
<td>7</td>
<td>@alorum</td>
<td>5 Days</td>
<td>Did you miss {{title}} - {{url}}?</td>
</tr>
<tr>
<td>8</td>
<td>@alorum</td>
<td>30 Days</td>
<td>{{title}} - {{url}}</td>
</tr>
<tr>
<td>9</td>
<td>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@alorum <span class="glyphicon glyphicon-user pull-right"></span></a>
<ul class="dropdown-menu">
<li><a href="#">@sparkcatalyst <span class="glyphicon glyphicon-user pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">@ckluis <span class="glyphicon glyphicon-user pull-right"></span></a></li>
</ul>
</li>
</ul>
</td>
<td><input type="text" placeholder='Date & Time' class="form-control"/></td>
<td><input type="text" placeholder='Tweet' class="form-control"/></td>
</tr>
</tbody>
</table> <p>Also considering a tool like - https://tweetsquad.co - which would allow you to auto-tweet from fans accounts?</p>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a><br><br>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="4">Next step</button>
</div>
</div>
</div>
<div class="step-5">
<div class="row">
<div class="col-md-12">
<h2>Advertising</h2>
<p>Set up facebook, twitter, google ads</p>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="5">Next step</button>
</div>
</div>
</div>
</div>
<div class="step-6">
<div class="row">
<div class="col-md-12">
<h2>Publish</h2>
<p>Click publish means you will be</p>
<ul>
<li>go live</li>
<li>send 3 tweets now and schedule 20 tweets for the future</li>
<li>post to facebook</li>
<li>schedule an ad campaign with 200 visitors to monitor which version of the page performs better</li>
<li>send an email to {group, person, etc} using the {announcement, PR, etc} template</li>
<li>send an email to {different group} using {different} template</li>
</ul>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="5">Next step</button>
</div>
</div>
</div>
</div>
<div class="step-7">
<div class="row">
<div class="col-md-12">
<h2>Analyze</h2>
<p>What's interesting is that by creating a Marketing Suite wrapped around each page we can:</p>
<ul>
<li>incorporate AB testing in the Write & Optimize sections</li>
<li>incorporate analytics for each page to measure how it works within the flow of the site and how it impacts sales/lead likeliness <em>(how likely is someone who has seen this page to have become a lead vs other pages)</em></li>
<li>but the really interesting thing is we can also create marketing campaigns around the page from analytics... see which title/c2a/page variation works best by sending xxx people to eacb version of this page with CPC</li>
<li>this could be expanded to include AB testing of the ad to the page</li>
<li>this step by step process allows marketers to stop in the process where they feel comfortable, but also nudgingly sends them further up their sophistication</li>
<li>facebook, google, etc ads - could be put in place and potentially make a little on the sales of those ads</li>
<li> http://wptavern.com/responsible-plugin-adds-a-responsive-testing-kit-to-the-wordpress-admin-bar - show traffic by device size and show what that traffic sees</li>
<li> http://moz.com/blog/calculating-estimated-roi-for-keywords - start to do intelligent analytics</li>
</ul>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="6">Next step</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
.container {
margin-top: 1%;
}
/*Wizard*/
.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
background-color: #7aba7b;
border-color: #7aba7b;
color: #ffffff;
}
.list-group-item.success > h4 {
color: #ffffff;
}
.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
background-color: #d59392;
border-color: #d59392;
color: #ffffff;
}
.list-group-item.error > h4 {
color: #ffffff;
}
.nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background:#fff;
}
.dropdown {
background:#fff;
border:1px solid #ccc;
border-radius:4px;
width:150px;
}
.dropdown-menu>li>a {
color:#428bca;
}
.dropdown ul.dropdown-menu {
border-radius:4px;
box-shadow:none;
margin-top:20px;
width:150px;
}
.dropdown ul.dropdown-menu:before {
content: "";
border-bottom: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -10px;
right: 16px;
z-index: 10;
}
.dropdown ul.dropdown-menu:after {
content: "";
border-bottom: 12px solid #ccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
position: absolute;
top: -12px;
right: 14px;
z-index: 9;
}
/**
* Created by: Alexander Mahrt
* Date: 20.11.13
* Time: 03:00
*/
$(document).ready(function() {
loadDataOnReady();
loadDataOnClick();
changeSteps();
nextStep();
finishWizard(function() {
//ON FINISH EVENT
});
});
function finishWizard(onFinish) {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-fin', function(event) {
var finButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
//Update button
finButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
finButton.addClass('disabled');
//AJAX SUBMIT FORM
var getMethod = currForm.attr('data-method');
var getAction = currForm.attr('data-action');
$.ajax({
url: getAction,
type: getMethod,
data: currForm.serialize(),
success: function() {
//AJAX success
wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');
thisMenu.addClass('success');
//Update button
finButton.html('Finish');
finButton.removeClass('disabled');
window.setTimeout(function() {
//UI
$('.alert').hide();
//FINISHED WIZARD
//FUNCTION HERE
onFinish();
},500);
},
error: function() {
//Ajax failure
wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
thisMenu.addClass('error');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
thisMenu.removeClass('error');
thisMenu.addClass('active');
//Update button
finButton.html('Finish');
finButton.removeClass('disabled');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(currStep.html());
}
},2000);
}
});
});
}
function nextStep() {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-next', function(event) {
var prevButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
//Update button
prevButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
prevButton.addClass('disabled');
//AJAX SUBMIT FORM
var getMethod = currForm.attr('data-method');
var getAction = currForm.attr('data-action');
$.ajax({
url: getAction,
type: getMethod,
data: currForm.serialize(),
success: function() {
//AJAX success
wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');
thisMenu.addClass('success');
//Update button
prevButton.html('Next step');
prevButton.removeClass('disabled');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(nextStep.html());
}
},500);
},
error: function() {
//Ajax failure
wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
thisMenu.addClass('error');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
thisMenu.removeClass('error');
thisMenu.addClass('active');
//Update button
prevButton.html('Next step');
prevButton.removeClass('disabled');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(currStep.html());
}
},2000);
}
});
});
}
function changeSteps() {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-prev', function(event) {
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var prevStep = $('.step-' + (currStep - 1));
var prevMenu = $('.step-' + (currStep - 1) + '-menu');
//Update menu
wizardButtons.removeClass('active');
prevMenu.addClass('active');
prevMenu.removeClass('success');
//Get "data-for" attribute and find element
var dataLoad = prevStep.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(prevStep.html());
}
});
}
function loadDataOnReady()
{
var wizardContent = $('.wizard-content');
//Get "data-for" attribute and find element
var dataFor = $('.wizard-menu .list-group-item.active').attr('data-for');
var elementFor = $(dataFor);
var dataLoad = elementFor.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(elementFor.html());
}
}
function loadDataOnClick()
{
var wizardButtons = $('.wizard-menu .list-group-item');
var wizardContent = $('.wizard-content');
wizardButtons.on('click', function(event) {
event.preventDefault();
//Change active state
wizardButtons.removeClass('active');
$(this).addClass('active');
//Get "data-for" attribute and find element
var dataFor = $(this).attr('data-for');
var elementFor = $(dataFor);
var dataLoad = elementFor.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(elementFor.html());
}
});
}
