hakanersu / amaranjs Goto Github PK
View Code? Open in Web Editor NEWNice, sleek and stylish notifications.
Home Page: http://amaranjs.com/
License: MIT License
Nice, sleek and stylish notifications.
Home Page: http://amaranjs.com/
License: MIT License
I am using a "css font size animation' to increase the size of the font (so that it becomes more readable on large screens) when user hovers mouse on any message.
.amaran:hover {
font-size: 150%; /*Zoom the text size for readability on mouse hover*/
}
It works great and font size increases when mouse is hovered, and goes back to normal when mouse leaves. As a side effect this is changing the size of the "container div width and height" to accommodate for the increase, which is fine.
But the problem is, this is changing the size of all message containers as seen in the below images.
I would expect only the particular one which has large-font to also increase its width - but at present all messages are increasing their width (irrespective of their font size)
jquery.amaran.min.js:1` Uncaught TypeError: Cannot read property 'top' of undefined
at o.getInfo (jquery.amaran.min.js:1)
at o.getPosition (jquery.amaran.min.js:1)
at o.slide (jquery.amaran.min.js:1)
at o.animation (jquery.amaran.min.js:1)
at o.close (jquery.amaran.min.js:1)
at new o (jquery.amaran.min.js:1)
at Function.t.amaran (jquery.amaran.min.js:1)
at showToast (tikman.js:56)
at Object.success (<anonymous>:34:1)
at u (jquery.min.js:2)
getInfo @ jquery.amaran.min.js:1
getPosition @ jquery.amaran.min.js:1
slide @ jquery.amaran.min.js:1
animation @ jquery.amaran.min.js:1
close @ jquery.amaran.min.js:1
o @ jquery.amaran.min.js:1
t.amaran @ jquery.amaran.min.js:1
showToast @ tikman.js:56
success @ VM2364:34
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
tryToConnect @ VM2364:28
onclick @ (index):1
jquery.min.js:2
check image:
https://ibb.co/xGL1dpZ
Hello I found this plugins very interesting but the one thing I need in it is a link for each notification. When the notification is clicked, redirect to the given url.
Messages are automatically disappearing after sometime, which is great.
But, I would like to keep the message there if user hovers his mouse on it (perhaps, he is examining the message content).
The use case is like this:
1. By default, messages should disappear after some time as usual, if user does nothing about them
2. However, if user hovers the mouse on it (then he may want to select and copy the content of the message with mouse), then the message should become sticky that gets close only upon click of the x button.
How to achieve this. One way is:
this library can have a new option something like "no autoclose on hover" that when set to true, changes it behavior to be "sticky=true, closeOnClick=false, closeButton=true" automatically whenever mouse hovers on any message.
The otherway is, to reset and renew the timer to be some configurable value user passes on, like this one does here: http://codeseven.github.io/toastr/demo.html
Select the "progressbar" option and hover the mouse on the message - it renews the timer.
I am not able to see a way to copy the error messages displays using this package. Any click on the displayed message removes it from screen.
When displaying errors, it is important that users can copy | paste
the error message displayed in the alert (so that they can communicate it with admin / support later regarding the problem) - but right now, they just disappear once the user clicks on them.
I was hoping that with the 'close button' option or 'sticky' option, the message would go away only when clicked on the close button - but doesn't seem to be so. Clicking anywhere, no matter with or without close button - removes the message.
How to make it work that only when clicked on the 'close button' (the small x button on top right) it would go away, otherwise it would stay?
Hello, first thing thank you very much for your plugin, its very good!
Im trying to use the overlay option and its not working
my amaran function:
function overlayingMsg() {
$.amaran({
'message' :'My first example!',
'overlay' :true,
'sticky':true,
'inEffect':'slideTop',
'outEffect':'slideLeft',
'overlayColor': 'orange'
});
};
my application of the function:
<button type="button" class="btn btn-success btn-lg" style="margin: 10px"
onclick="overlayingMsg()">Show overlaying message</button>
<script src="../assets/javascripts/data/alerts/amaran/overlayingMsg.js"></script>
I'm using jquery 2.2.4
same thing happens with the stickyButton option.
thanks in advance
Thank you for sharing the good work.
Just wondering if it would be possible to include element specific notifications (like this one at http://notifyjs.com/ does).
For example, when specified something like $(".textbox").amaran()
the notification would be displayed relative to that textbox, which would be great way to show errors and all for inputs.
My custom theme has slightly light (white) background and as such the close button (the small x button on the top right corner) is not visible.
How to customize its appearance? Would like to change its color to something dark.
Thanks for sharing this good work. The entry and exit animations are good.
But, when multiple notifications are to be displayed the way old items move up/down to give place to new ones is not at all smooth.
It would be great if old items move "smoothly" up / down. (Is there any option to control their animation behavior also, just like entry and exit animation?)
I needed to call a specific function to your notification plugin so I added this code to createElements
if (this.config.clickfunct){
var bu = this;
$(element).on('click',function(){
bu.config.clickfunct();
});
}
then pass the function in with the options
apprve_opts.clickfunct = function(){ window.location = "/memberusers/useradmin"; };
$.amaran(apprve_opts);
be nice if this was or something like it was added to the next release.
Thanks for all you do.
Jeff
Your hosting account is, uhm, suspended. Docs, etc, were on there…
Is this package available on any CDN?
I am planning to use this (the theme capability is good feature) - but downloading and maintaining local copies would be problematic. Hence hesitating.
Wondering if this could be made available on any CDN (e.g., https://github.com/cdnjs/cdnjs ) so that more people can get access to it and easy to maintain.
Is there any way the notification can be positioned at center of screen?
Would love to have the ability to call the closing function via any of the handlers.
this.close()
Which would close the popup the exact same way it is being dismissed with following options already set.
Hi..
I need to some solution for use this library in my project.
Is there any way to changed 'default-spinner' circle color?
I ask it because currently it is only display green("#27ae60") color.
I need display 'default-spinner' circle in different color according to status like following:
'SUCCESS' : GREEN COLOR
'WARNING': YELLOW COLOR
'INFO': BLUE COLOR
'ERROR': RED COLOR
So, It is possible to give custom color to 'default-spinner'?
I've discover your plugin, and directly, first bug.
when we call in first time
$.amaran({
'theme' :'colorful',
'overlay' :true,
'sticky':true,
'content' :{
bgcolor:'#199be9',
color:'#fff',
message: 'Loading ...'
},
'position' :'bottom right',
'outEffect' :'slideRight'
});
setTimeout(function(){
$.amaran({
'message' :'My first example!',
'clearAll' :true
});
},3000);
For the awesome theme, arguments should not be called message, file, size but instead: title, content, hint
I tried to access the demo and documentation at http://hakanersu.github.io/AmaranJS/, but was redirected to http://ersu.me/cgi-sys/suspendedpage.cgi which says:
This Account has been suspended.
Contact your hosting provider for more information.
Could you please provide us with the link to the new page where the Demo and Documentation has migrated to in the README.md
. I was unable to find it online. Seems like a recent issue.
Hi,
Looks like a cool library, but having trouble getting it going. The docs should be updated to reflect:
-folder name is 'theme' not 'themes'
-there is no 'jquery.amaran.min.css' file
-you may wish to leave off 'http:' for the hrefs in case users are working in an http environment
-all-themes has an http: import which will not work in an https environment
With the master branch:
-when I tried doing the example notification, it didn't look proper with the default css
-when I tried doing the awesome theme, I got a green circle for the icon
Going to give the new branch a try I guess - I just need to figure out why I'm getting the green circle instead of whatever icon I specify. ie. icon: 'fa fa-download'
I'll post back with what I see from the new branch.
Thanks
Mark
Не работать
The close() method is not called - so the "
" element stays in DOM...Just implemented your code and i have issues with it. Take a look, maybe you can give me a clue as what I'm doing wrong. http://electricianwebsite.net/index-test.html
You can try it on your demo page: http://hakanersu.github.io/AmaranJS/
I toke a look in the source code and saw that the afterEnd callback is only called when using "slide" effect but not when using "fade" effect...
Thank you for sharing this good work.
But when using this, getting some messages in the console such as below
Close False Button True
Request you to kindly remove them
Hi, is this possible to have a clickable link into the box?
Hi,
Is there a way to clear all currently showing notifcations?
Thanks
Mark
Are you planning to add background overlay effect?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.