Link to home
Start Free TrialLog in
Avatar of Johnson Thomas
Johnson Thomas

asked on

how to hide hopscotch tour popup page reload?

Hi
I am using hopscotch tour, i want hide hopscotch tour after page reload and not showing returning users is it possible? Please help me.
below my code.

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */


var tour = {
  id: 'hello-hopscotch',
  steps: [{
    target: 'MiddleContent_btndocuments',
    title: 'Welcome to Hopscotch!',
    content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
    placement: 'bottom',
    arrowOffset: 60
  },{
    target:'Downloads',
    title: 'Where to begin',
    content: 'At the very least, you\'ll need to include these two files in your project to get started.',
    placement: 'right',
    yOffset: -20
  },{
    target: 'list-lenders',
    placement: 'bottom',
    title: 'Define and start your tour',
    content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
  },{
    target: 'support',
    placement: 'bottom',
    title: 'Starting your tour',
    content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
  },{
    target: 'login',
    placement: 'bottom',
    title: 'Basic step options',
    content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
  },{
    target: 'index',
    placement: 'bottom',
    title: 'Hopscotch API methods',
    content: 'Control your tour programmatically using these methods.',
  }],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},
init = function() {
  var startBtnId = 'startTourBtn',
    calloutId = 'startTourCallout',
    mgr = hopscotch.getCalloutManager(),
    state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }
  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }
  });
};
init();

Open in new window

hopscotch.js
tour.js
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial