Trip.js example

Change class name on click in jQuery

by André Masson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trip.js/3.3.3/trip.min.js"></script>
<h1>
  Trip.js tests
</h1>

<button id="btnStart">Start Trip.js</button><br>
<button id="btnToggler">Toggle DIV2 visibility</button>
<button id="btnClassRemover">Toggle trip class from DIV2</button>

<div class="trip-elements">
  <div id="div1" class="trip-element context_restaurant_2">div 1</div>
  <div id="div2" class="trip-element context_restaurant_3">div 2</div>
  <div id="div3" class="trip-element context_restaurant_4">div 3</div>
</div>

CSS

body {
  margin-left: 200px;
}

.trip-elements {
  margin-top: 60px;
}

.trip-element {
  text-align: center;
  margin-bottom: 10px;
  background-color: grey;
  width: 200px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3)
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05)
  }
  70% {
    -webkit-transform: scale(0.9)
  }
  100% {
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }
  60% {
   ...

JavaScript

var tutorial = [{
  "header": "<i class='fa fa-map-marker' style='margin-right:11px;'></i>Restaurant Selector",
  "content": "Select the restaurants to work on using this tool.",
  "position": "screen-center",
  "expose": true
}, {
  "sel": ".context_restaurant_2",
  "header": "Search",
  "content": "In this field, type information about the restaurant, such as its unique ID or the street it is on.",
  "position": "s",
  "expose": true
}, {
  "sel": ".context_restaurant_3",
  "header": "Search Again!",
  "content": "You can also search for groups of restaurants.  For example, you could type the name of a region and select it.  This would select all your stores that belong to that region.",
  "position": "s",
  "expose": true
}, {
  "sel": ".context_restaurant_4",
  "header": "Start Over",
  "content": "Click here to remove all selected restaurants and start over with a clean slate.",
  "position": "n",
  "expose": true
}];

var options = {
  delay: -1,
  showNavigation: true,
  showHeader: true
};

$("#btnToggler").click(function() {
  $('#div2').toggle();
});
$("#btnClassRemover").click(function() {
  $('#div2').toggleClass('context_restaurant_3');
});
$("#btnStart").click(function() {
  var adaptedTutorial = prepareTutorial();
  var trip = new Trip(adaptedTutorial, options);
  trip.start();
});

function prepareTutorial() {
  var adaptedTutorial = [];

  tutorial.forEach(function(e) {
    if (!e.sel) {
      adaptedTutorial.push(e);
    } else {
      var element = $(e.sel);
      if (element.length && element.is(':visible')) {
        adaptedTutorial.push(e);
      }
    }
  });

  return adaptedTutorial;
}