Comments (8)
This should work for you:
var stack_center = {"dir1": "down", "dir2": "right", "firstpos1": 25, "firstpos2": ($(window).width() / 2) - (Number(PNotify.prototype.options.width.replace(/\D/g, '')) / 2)};
$(window).resize(function(){
stack_center.firstpos2 = ($(window).width() / 2) - (Number(PNotify.prototype.options.width.replace(/\D/g, '')) / 2);
});
new PNotify({text: "Hi there.", stack: stack_center});
from pnotify.
you can recenter the notification every time the screen is re-sized
function get_center_pos(width, top){
// top is empty when creating a new notification and is set when recentering
if (!top){
top = 30;
// this part is needed to avoid notification stacking on top of each other
$('.ui-pnotify').each(function() { top += $(this).outerHeight() + 20; });
}
return {"top": top, "left": ($(window).width() / 2) - (width / 2)}
}
$(document).ready(function () {
new PNotify({
title: "this is center",
text: "blablabla",
opacity: 0.90,
type: "info",
width:"390px",
before_open: function (PNotify) {
PNotify.get().css(get_center_pos(PNotify.get().width()));
}
});
$(window).resize(function () {
$(".ui-pnotify").each(function () {
$(this).css(get_center_pos($(this).width(), $(this).position().top))
});
});
});
from pnotify.
ok I found a solution
$.pnotify({
title: "this is center",
text: "blablabla",
opacity: 0.90,
type: "info",
width:"390px",
before_open: function(pnotify){
pnotify.css({
"top":"50px",
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
}
});
from pnotify.
when you do this though, the notification doesn't move when the screen is re-sized. so if you're resizing to a smaller screen you just lose your notification/alert/form offscreen. any hints for a fix?
from pnotify.
Hi,
I'm using latest PNotify - is it possible that before_open is not called?
Above center example does not work....
from pnotify.
Yeah this trick does not work in the latest release.Confirmed from myend.
from pnotify.
This should be done with a stack.
from pnotify.
Thanks hperrin! That stack should be included on the release.
from pnotify.
Related Issues (20)
- pnotify close not working
- Laravel installation not possible HOT 1
- The alert background color is not revert after the error function call HOT 1
- Integration with Nuxt.js HOT 1
- Does pnotify support HTML tag? HOT 2
- A modalish stack that pushes to the top must use the close maxStrategy - migrated from v4 HOT 1
- ES5 - ES6 Installation Errors HOT 5
- Countdown + Bootstrap4 not working
- Potential issue with Desktop permission. Notice may become module controlled after opening. Needs investigation.
- ECS6 Error (Uncaught SyntaxError: The requested module './node_modules/@pnotify/core/dist/PNotify.js' does not provide an export named 'alert') HOT 1
- Pnotify with html tag
- Cannot change default FontAwesome5 icons
- npm run build errors HOT 2
- Why Svelte.... HOT 1
- Temporal fix for compile-time errors on angular apps for "pnotify": "^5.2.0" HOT 2
- Desktop module Make onclick functional
- Bootstrap5 support? HOT 8
- Keep only one dialog
- Doesnt work
- Node install fails on PNotify HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pnotify.