How to set the opening time for a popup?
<script type="text/javascript">
mgsjQuery(window).load(function () {
if(mgsjQuery(window).width() > 991) {
if(getCookie('newsletter')!='nevershow'){
if (mgsjQuery('#newsletter').length) {
mgsjQuery.magnificPopup.open({
items: {
src: '#newsletter'
},
type: 'inline'
});
}
}
}
});
</script>
I think that i should include the code below, but i do not know where?
setTimeout( NAME, 8000 );
Here's setTimeout method documentation.
So where the NAME is, you should insert your function name or anonymous function.
So in your case it'll be something like:
mgsjQuery(window).load(function () {
if(mgsjQuery(window).width() > 991) {
if(getCookie('newsletter')!='nevershow'){
if (mgsjQuery('#newsletter').length) {
setTimeout(function(){ // <- Inserted - below code will run after 8 seconds
mgsjQuery.magnificPopup.open({
items: {
src: '#newsletter'
},
type: 'inline'
});
}, 8000); // <- Inserted 8000 ms = 8 sec.
}
}
}
});
If you just need to wait some time before the popup opens, you can use delay(). You can call the method after the .open()
Like this:
<script type="text/javascript">
mgsjQuery(window).load(function () {
if(mgsjQuery(window).width() > 991) {
if(getCookie('newsletter')!='nevershow'){
if (mgsjQuery('#newsletter').length) {
mgsjQuery.magnificPopup.open({
items: {
src: '#newsletter'
},
type: 'inline'
}).delay(1000);
}
}
}
});
</script>
In this case, the delay function will wait 1 second (the parameter is given in miliseconds) before opening the popup.
Related
I created this function that checks for user's cookies and then shows a newsletter Popup. I need to load this after the user has spent 10 seconds navigating on the site. I've use window.setTimeout but it hasn't worked so far. The script works beautifully except for this 10 second delay execution. Any idea what I'm doing wrong?
theme.ModalNewsletter = function() {
if ($.cookie('tada-cookies')) {
}
else {
var el = $('#newslettermodal');
if (el.length) {
$('#newslettermodal').removeClass("hide");
$.magnificPopup.open({
items: {
src: el
},
type: 'inline'
});
}
}
$.cookie('tada-cookies', 'true', { expires: 7});
}
Make sure your timeout passes the function itself and doesn't execute it.
Correct way:
setTimeout(theme.ModalNewsletter, 10000);
Incorrect way:
setTimeout(theme.ModalNewsletter(), 10000);
Is this the right approach?
setTimeout(theme.ModalNewsletter, 10000); {
theme.ModalNewsletter = function()
if ($.cookie('tada-cookies')) {
}
else {
var el = $('#newslettermodal');
if (el.length) {
$('#newslettermodal').removeClass("hide");
$.magnificPopup.open({
items: {
src: el
},
type: 'inline'
});
}
}
$.cookie('tada-cookies', 'true', { expires: 7});
}
I have a function which calls a service.
submitPost(value:any)
{
this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
data => {
this.responseStatus = data;
if(this.responseStatus.status == 1)
{
localStorage.setItem('admin_id', this.responseStatus.detail.id);
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 5000 });
top.location.href = 'admin/dashboard';
}
else
{
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-danger', timeout: 2000 });
}
},
err => {
console.log(err)
},
() => {}
);
this.status = true;
}
My concern is with this section of code:-
if(this.responseStatus.status == 1)
{
localStorage.setItem('admin_id', this.responseStatus.detail.id);
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 5000 });
top.location.href = 'admin/dashboard';
}
Is there any way by which the redirect action could take place after the flash message disappears after 5000 ms? Something like this:-
if(this.responseStatus.status == 1)
{
localStorage.setItem('admin_id', this.responseStatus.detail.id);
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: {function(){ top.location.href = 'admin/dashboard'; }, 5000 });
}
The following code should navigate after the message disappears. Yout flashMessage will be displayed for 5000 ms and your navigate should happen after 7000ms
if(this.responseStatus.status == 1)
{
localStorage.setItem('admin_id', this.responseStatus.detail.id);
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 5000 });
setTimeout(()=>{
top.location.href = 'admin/dashboard';
},7000);
}
I would do this by having the _flashMessagesService.show() return an Observable.
In the _flashMessageService, something like this:
myObserver : Observer<any>
function show(){
// do stuff
return Observable.create(observer =>{
this.myObserver =observer;
});
}
When you're ready to resolve the Observable, you can do:
this.myObserver.next('Possibly some value here');
this.myObserver.complete();
In your invoking code
this._flashMessagesService.show()
.subscribe(result=> { top.location.href = 'admin/dashboard'});}
I have been working on something similar.
An alternate approach, perhaps simpler is to just use Observable.timer in your main component:
Observable.timer(5000).subscribe(result=> { top.location.href = 'admin/dashboard'});
I prefer the first way, because it is contingent on the flashMessage service deciding when the flash message goes away, not on a hard coded time value.
I'm slowly trying to slug my way through learning OOJS by building an accordion toggle and I'm having a hard time.
EDIT: Slowly getting there. I've got the toggle functioning how I want to. Unfortunately I'm calling the add / remove class incorrectly(?).
I'm currently calling it like:
accordion.ELEMENTS.TRIGGER.click(function() {
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
And I would rather call it via the EVENTS.OPEN & EVENTS.CLOSE or even throw both of this into the EVENTS.BIND and have BIND sort out whether or not if it is open or not :
Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.
var accordion = {
ELEMENTS: {
HOME: $('.js-accordion-toggle'),
TRIGGER: $('.js-accordion-trigger'),
PANEL: $('.js-accordion-panel')
},
CLASSES: {
OPEN: 'open'
},
EVENTS: {
OPEN: function() {
if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
console.log(this + "open");
ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
}
else {
console.log("this should close");
this.close();
}
},
CLOSE: function() {
accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
},
//BIND: function() {
// accordion.ELEMENTS.HOME.each(function() {
// accordion.EVENTS.OPEN();
// });
//}
},
fn: {
attachEvents: function() {
accordion.ELEMENTS.TRIGGER.click(function() {
console.log(this);
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
}
},
init: function() {
accordion.fn.attachEvents();
}
}
accordion.init();
I managed to get your original fiddle to work by invoking accordion.init() after your object definition. I also had to replace your line 37 with accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN); to get rid of some undefined object error.
As for your new codes, you can simplify your codes by removing the if..else statement in line 19 and 22 with jQuery.toggleClass, to make it looks like:
$(this).closest(toggleHome).toggleClass(toggleClass);
In my app i try to create a preloader with jquery.html5loader like this :
$.html5Loader({
filesToLoad: 'load.json', // this could be a JSON or simply a javascript object
onBeforeLoad: function () {
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function () {
$('#load').hide();
console.log('Complete Loaded');
},
onElementLoaded: function ( obj, elm) { },
onUpdate: function ( percentage ) {
// sleep(100000);
console.log(percentage);
$("#load").text(' '+percentage);
}
});
the script correctly work and i get Complete loaded log in console when all script loaded but i get another error on angular
Uncaught object angular.js:36
in my json file i load all script except jquery,angular.js,angular-route.js . i think the problem is because i have a this code in my html :
<html ng-app="myApp">
Probably you are doing something wrong. I've created this simple jsfiddle embedding angularjs in the page and everything seems to work.
$.html5Loader({
filesToLoad: {
files: [{
"type": "SCRIPT",
"source": "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js",
"size": 4.096,
}]
},
onBeforeLoad: function() {
console.log('Before load');
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function() {
$('#load').hide();
console.log('Complete Loaded');
},
onUpdate: function(percentage) {
// sleep(100000);
console.log(percentage);
$("#load").text(' ' + percentage);
}
});
I'm implementing jgrowl on my website, but did not find any indication on the plugin's website nor on the internet on how to display the message with a lag. Ideally I'd like the Jgrowl message to appear 10 seconds after the page loads. Is it possible?
<script type="text/javascript">
$(function () {
if($.cookie("new_visitor") != "true") {
$.cookie("new_visitor", "true", { expires: 1, path: '/' });
$.jGrowl("A message with a header", { header: 'Important' });
}
});
</script>
exactly what the others said. See it in code.
$(function () {
if($.cookie("new_visitor") !== "true") {
$.cookie("new_visitor", "true", { expires: 1, path: '/' });
setTimeout(function(){
$.jGrowl("A message with a header", { header: 'Important' });
},10000); // display after 10 seconds
}
});