Solved

how to hide hopscotch tour popup page reload?

Posted on 2016-08-29
2
49 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
2 Comments
 
LVL 51

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now