Link to home
Start Free TrialLog in
Avatar of Johnson Thomas
Johnson Thomas

asked on

how to hide hide popup page refresh second time?

Hi I am using jquery hemiintro i want to hide intro in after page second time refersh
Avatar of Kyaw Wanna
Kyaw Wanna
Flag of Thailand image

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

Avatar of Johnson Thomas
Johnson Thomas

ASKER

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
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

Thanks for comment

i am just add the script  that's time popup not working.
Is it not working even in the first time?
If so, let me know which browser and version you are using.
Thanks for comment

google chrome Version 52.0.2743.116 m (64-bit)
ASKER CERTIFIED SOLUTION
Avatar of Kyaw Wanna
Kyaw Wanna
Flag of Thailand image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you very much it's working
You're welcome.
I would appreciate, if you may choose as correct answer to get points for me. Thanks.