Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

how to hide hopscotch tour popup page reload?

Posted on 2016-08-29
2
Medium Priority
?
215 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
1 Comment
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

578 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