codrops / notificationstyles Goto Github PK
View Code? Open in Web Editor NEWVarious simple ideas and effects for unobtrusive notifications on a website.
Various simple ideas and effects for unobtrusive notifications on a website.
I tried the bouncy flip demo on my iPhone 5 iOS 8 and it flickers during the drop
Could you integrate a Sass Version? Because I use bower to install this feature and sass for compiling.
It seems that is not possible to create stacks of notification, right now all the notifications are overlapped each other.
Any hint?
The thumbslider notification div is created on notification init, when close is called the notification closes but its div
is never destroyed. The below code stays in the wrapper in which it was created:
<div class="ns-box ns-other ns-effect-thumbslider ns-type-warning ns-show"><div class="ns-box-inner"><span class="ns-close"></span></div>
Also, when notification.show();
is called multiple times, multiple divs are created and none of them are destroyed on close.
Tested rest of the notifications, div is destroyed in that case.
Hi,
i'm currently using your notification style on the web app we are developing. and i seem to have trouble.
I'm using the loading circle and applied it on yii2, it's for adding questions and the notification message will show on the loading circle.
SCRIPT 1
<?php
$this->registerJs(
'(function() {
var svgshape = document.getElementById( "notification-shape" ),
bttn = document.getElementById( "notification-trigger" );
bttn.disabled = false;
bttn.addEventListener( "click", function() {
var notification = new NotificationFx({
wrapper : svgshape,
message : "'.Html::encode($model->_message).'",
layout : "other",
effect : "loadingcircle",
ttl : 15000,
type : "notice",
onClose : function() {
bttn.disabled = false;
}
});
notification.show();
// this.disabled = true;
} );
})();
'
);
?>
The structure is the same with a normal scripting style, so I hope it's understandable.
Aside from this code, I have this pre loader script,
SCRIPT 2
(function($){
$(window).load(function() {
$(".tloader").fadeOut("slow");
})
})(jQuery);
Now the SCRIPT 2 is messing up with my loading circle, it doesn't finish loading it.
maybe you can help me do something about the loading circle? like letting it finish to load first before the SCRIPT 2 loads?
By the way, thanks for this widget! ๐
I can not minify css, someone had the same problem?
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.