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
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="myModalLa bel" 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("onBeforeChang eStep:");
},
onAfterChangeStep: function () {
console.log("onAfterChange Step:");
},
onShowModalDialog: function (plugin, modal) {
console.log("onShowModalDi alog:");
},
onHideModalDialog: function (plugin, modal) {
console.log("onHideModalDi alog:");
},
onComplete: function (plugin) {
console.log("onComplete:") ;
}
});
intro.start();
});
//-->
</script>
<!-- LOAD JS FILES -->
jquery.hemiIntro.js
please check my code below, check the attachment for js
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLa
<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
</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
},
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("onBeforeChang
},
onAfterChangeStep: function () {
console.log("onAfterChange
},
onShowModalDialog: function (plugin, modal) {
console.log("onShowModalDi
},
onHideModalDialog: function (plugin, modal) {
console.log("onHideModalDi
},
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.
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 -->
ASKER
Thanks for comment
i am just add the script that's time popup not working.
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.
If so, let me know which browser and version you are using.
ASKER
Thanks for comment
google chrome Version 52.0.2743.116 m (64-bit)
google chrome Version 52.0.2743.116 m (64-bit)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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 :
Open in new window