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

x
?
Solved

how to hide hide popup page refresh second time?

Posted on 2016-08-25
10
Medium Priority
?
445 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
  • 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
Technology Partners: 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses
Course of the Month13 days, 15 hours left to enroll

580 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