Solved

how to hide hide popup page refresh second time?

Posted on 2016-08-25
10
163 Views
Last Modified: 2016-08-29
Hi I am using jquery hemiintro i want to hide intro in after page second time refersh
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
  • 6
  • 4
10 Comments
 
LVL 2

Expert Comment

by:Kyaw Wanna
ID: 41770010
You can save the status value in cookie or localStorage for the first time.
When you refresh the page, it can be checked the value from cookie/localStorage whether it has a value or not.
If the value is having in cookie or localStorage, just hide your popup.

You can refer the example as per below :

$(document).ready(function() {  
    var first = localStorage.getItem("fTime");
    if(!first){ 
       localStorage.setItem("fTime", true);
       // Show Popup
    } else {
       // Hide Popup
    }
});

Open in new window

2
 

Author Comment

by:Johnson Thomas
ID: 41770068
Thanks for comment

please check my code below, check the attachment for js

        <!-- Modal -->
                  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                              <div class="modal-content">
                                    <div class="modal-body">
                                          Platform
                                    </div>
                                    <div class="modal-footer">
                                          <button type="button" class="btn button-md button-rounded btn-primary" data-dismiss="modal">Start</button>
                                    </div>
                              </div>
                        </div>
                  </div>
 <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:");
                                    }
                              });
                              intro.start();
                              
                        });
                        //-->
                  </script>
    <!-- LOAD JS FILES -->
jquery.hemiIntro.js
0
 
LVL 2

Expert Comment

by:Kyaw Wanna
ID: 41770111
Hi,

I just updated the last few lines which is around the "intro.start();" in javascript. Please check and let me know if still has problem.

<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 (localStorage.getItem('fTime') === null)
								{
								   localStorage.setItem("fTime", true);
								   intro.start();
								}  
                              
                        });
                        //-->
                  </script>
    <!-- LOAD JS FILES -->

Open in new window

1
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Johnson Thomas
ID: 41770118
Thanks for comment

i am just add the script  that's time popup not working.
0
 
LVL 2

Expert Comment

by:Kyaw Wanna
ID: 41770141
Is it not working even in the first time?
If so, let me know which browser and version you are using.
0
 

Author Comment

by:Johnson Thomas
ID: 41770151
Thanks for comment

google chrome Version 52.0.2743.116 m (64-bit)
0
 
LVL 2

Accepted Solution

by:
Kyaw Wanna earned 500 total points
ID: 41770445
Please use the detail codes as per below.
It just need to change from "localStorage" to "sessionStorage" in your code.
Before you run this, please clear the browser cache.

 
 <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

0
 

Author Comment

by:Johnson Thomas
ID: 41771449
Thank you very much it's working
0
 
LVL 2

Expert Comment

by:Kyaw Wanna
ID: 41771482
You're welcome.
1
 
LVL 2

Expert Comment

by:Kyaw Wanna
ID: 41772598
I would appreciate, if you may choose as correct answer to get points for me. Thanks.
1

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 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