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
}
});
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 would like to run javascript code after the frontend image editor dialog shows up. How can I do that? That's what I have so far:
function ${namespace}editWithImageEditor(
editItemURL, uploadItemURL, fileEntryFilename, fileEntrySrc) {
Liferay.Util.editEntity(
{
dialog: {
destroyOnHide: true,
zIndex: 100000
},
id: 'dlImageEditor',
stack: false,
title: '${editLanguageKey} ' + fileEntryFilename,
uri: editItemURL,
urlParams: {
entityURL: fileEntrySrc,
saveParamName: 'imageEditorFileName',
saveURL: uploadItemURL
},
dialogIframe: {
after: {
load: function(event) {}
}
}
},
AUI().bind('${namespace}_onSaveEditSuccess', this)
);
}
It works, but it's executing before all dialog content is loaded. How to run script after the dialog is fully loaded? Thanks!
just add a delay/timeout to delay the javascript you want to run, I've made the delay here 1 second, but you could make it as short or as long as you'd want
function ${namespace}editWithImageEditor(
editItemURL, uploadItemURL, fileEntryFilename, fileEntrySrc) {
Liferay.Util.editEntity(
{
dialog: {
destroyOnHide: true,
zIndex: 100000
},
id: 'dlImageEditor',
stack: false,
title: '${editLanguageKey} ' + fileEntryFilename,
uri: editItemURL,
urlParams: {
entityURL: fileEntrySrc,
saveParamName: 'imageEditorFileName',
saveURL: uploadItemURL
},
dialogIframe: {
after: {
load: window.setTimeout(function(event) {
//code here
}, 1000)
}
}
}
},
AUI().bind('${namespace}_onSaveEditSuccess', this)
);
}
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.
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);
}
});