Solved

how to hide hopscotch tour popup page reload?

Posted on 2016-08-29
2
129 Views
Last Modified: 2016-09-02
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
0
Comment
Question by:Johnson Thomas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41775905
Refer to this PAQ they might have what you are looking for.

The PAQ discusses how to conditionally hide content when reloading a page

https://www.experts-exchange.com/questions/28965779/Back-Button-Causing-Issues-With-Hidden-Divs.html
0

Featured Post

Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question