Solved

how to hide hide popup page refresh second time?

Posted on 2016-08-25
10
214 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
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)

695 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