Solved

how to hide hide popup page refresh second time?

Posted on 2016-08-25
10
122 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Performance for Office 365 6 47
When we use cache:false ajax? 1 33
where is team.js? 3 24
Client Validating 2 date fields, required & comparison 1 24
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…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)

776 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