Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to hide jquery hemiintro in returning user?

Posted on 2016-08-26
1
Medium Priority
?
113 Views
Last Modified: 2016-08-29
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
Comment
Question by:Johnson Thomas
1 Comment
 
LVL 62

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41771470
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

Build your data science skills into a career

Are you ready to take your data science career to the next step, or break into data science? With Springboard’s Data Science Career Track, you’ll master data science topics, have personalized career guidance, weekly calls with a data science expert, and a job guarantee.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Microsoft Access has a limit of 255 columns in a single table; SQL Server allows tables with over 255 columns, but reading that data is not necessarily simple.  The final solution for this task involved creating a custom text parser and then reading…
In this article, we will show how to detach and attach a database and then show how to repair a corrupt database and attach it, If it has some errors. We will show how to detach and attach using SSMS or using T-SQL sentences.
Viewers will learn how to use the INSERT statement to insert data into their tables. It will also introduce the NULL statement, to show them what happens when no value is giving for any given column.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

584 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