• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 112
  • Last Modified:

How to hide jquery hemiintro in returning user?

Hi i want to hide intro in returning users only showing intro in first time user visit in website is it possible? please help me. Below and attached my code.

<script type="text/javascript">
				//<!--
				$(function () {
					var intro = $.hemiIntro({
						debug: false,
						steps: [
							{
								selector: ".Downloads",
								placement: "bottom",
								content: "Text text text text text text text text text text",
								showButtons: true,
                                scrollToElement: true,
								offsetTop: 300
								
							},
							{
								selector: ".list-lenders",
								placement: "bottom",
								content: "Text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2",
								offsetTop: 300
							},
							{
								selector: ".support",
								placement: "bottom",
								content: "Text2 text2 text2 text2 text2 text2",
								offsetTop: 300
							},
							{
								selector: ".login",
								placement: "bottom",
								content: "Text2 text2 ",
								offsetTop: 300
								
							},
							{
								selector: ".index",
								placement: "top",
								content: "Text3 text3 text3 text3 text3 text3 text3",
								offsetTop: 300
							},
						],
						startFromStep: 0,
						backdrop: {
							element: $("<div>"),
							class: "hemi-intro-backdrop"
						},
						popover: {
							template: '<div class="popover hemi-intro-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
						},
						buttons: {
							holder: {
								element: $("<div>"),
								class: "hemi-intro-buttons-holder"
							},
							next: {
								element: $("<span>Next: Steps</span>"),
								class: "btn button-md button-rounded btn-info"
							},
							finish: {
								element: $("<span>Finish</span>"),
								class: "btn button-md button-rounded btn-success"
							}
						},
						welcomeDialog: {
							show: true,
							selector: "#myModal"
						},
						scroll: {
							anmationSpeed: 0
						},
						currentStep: {
							selectedClass: "hemi-intro-selected"
						},
						init: function (plugin) {
							console.log("init:");
						},
						onLoad: function (plugin) {
							console.log("onLoad:");
						},
						onStart: function (plugin) {
							console.log("onStart:");
						},
						onBeforeChangeStep: function () {
							console.log("onBeforeChangeStep:");
						},
						onAfterChangeStep: function () {
							console.log("onAfterChangeStep:");
						},
						onShowModalDialog: function (plugin, modal) {
							console.log("onShowModalDialog:");
						},
						onHideModalDialog: function (plugin, modal) {
							console.log("onHideModalDialog:");
						},
						onComplete: function (plugin) {
							console.log("onComplete:");
						}
					});
					if (sessionStorage.getItem('fTime') === null)
				 { 
						 sessionStorage.setItem("fTime", true);
						 intro.start();
				 }   
                           }); 
				//-->
			</script>
    <!-- LOAD JS FILES -->

Open in new window

jquery.hemiIntro.js
0
Johnson Thomas
Asked:
Johnson Thomas
1 Solution
 
Julian HansenCommented:
Take a look at this question https://www.experts-exchange.com/questions/28965779/Back-Button-Causing-Issues-With-Hidden-Divs.html
The question is about how to show hidden divs and then to keep them shown when back button is pressed.

The principle is the same here.

Working sample here

CSS
<style type="text/css">
.hidden-div {
  display: none;
}
body.has-state .hidden-div {
  display: block;
}
body.has-state .show-divs {
  display: none;
}
</style>

Open in new window

HTML
    <div>
      <button class="btn btn-danger" id="reset">Reset</button>
      <input type="radio" value="localstorage" id="localstorage" name="storage" checked/> Local Storage <input type="radio" value="cookie" name="storage" id="cookie"/> Cookie
	  <a href="#" class="show-divs btn btn-primary">Show</a>
    </div>
    <div class="hidden-div"> This is invisible on first read</div>
    <div class="hidden-div"> This is invisible on first read</div>

Open in new window

jQuery
<script>
$(function() {
  if (typeof Storage === 'undefined') {
  $('#localstorage').prop({checked: false, disabled: true});
  $('#cookie').prop('checked', true);
  }
  var state = getState();
  if (state) {
    $('body').addClass('has-state');
  }
  
  $('.show-divs').click(function(e) {
    e.preventDefault();
    $('body').addClass('has-state');
    var type = $('input[name="storage"]:checked').val();

    setState(type);
  });
  
  $('#reset').click(function(){
  if (typeof Storage !== 'undefined') {
    localStorage.clear();
  }
  document.cookie = "__state=; expires=0";
  location.reload();
  });
});
function getState()
{
  var state = false;
  if (typeof Storage !== 'undefined') { // Localstorage
    state = localStorage.getItem('__state');
  }
  
  if (!state) {
    state = getCookie('__state');
  }
  
  return state;
}

function setState(type)
{
  if (type == 'localstorage' && typeof Storage !== 'undefined') { // Localstorage
    localStorage.setItem('__state', '1');
  }
  else { // Cookies
    document.cookie = "__state=1";
  }
}

function getCookie(cookie) {
  var ret = false;
  var cookies = document.cookie;
  var pattern = cookie +'=(.*?);';
  var regex = new RegExp(pattern);
  var val = cookies.match(regex);
console.log(val);  
  if (val) ret = val[1];
  
    return ret;
}
</script>

Open in new window

1

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now