-
Notifications
You must be signed in to change notification settings - Fork 0
messages
Mike Byrne edited this page Jan 25, 2022
·
2 revisions
Growl like messages
- CSS to style messages
- target - optional - target node for appending message, otherwise appends to body
- nothing
messages(); // (inset in your application JS on DOM ready)- 1 - "Logged in message"
triggerCustomEvent(document,"message",{
message: "Logged In"
});
// inserts
// <div class="message s-hide"><span>Logged In</span></div>- 1 - Show a message for a longer time
triggerCustomEvent(document,"message",{
message: "Logged In",
time: 5000 // time defined in ms
});
// inserts
// <div class="message s-hide"><span>Logged In</span></div>- 3 - custom type, "error message"
triggerCustomEvent(document,"message",{
message: "Could not add to favorites",
type: "error"
});
// inserts
// <div class="message message--error s-hide"><span>Could not add to favorites</span></div>Includes a helper class of "message--TYPE"
- 4 - on load message
<body>
<div id="a17" data-message-target data-message="On load message">- 4 - on load message, with type
<body>
<div id="a17" data-message-target data-message="On load message" data-message-type="error">Styling and positioning of message, alternative types and hiding of the message with message--hide.
Eg:
.message {
position: fixed;
right: 20px;
top: 20px;
max-width: 100%;
pointer-events: none;
transition: top .25s linear;
}
.message.s-hide {
top: -50px;
}
.message span {
display: inline-block;
padding: 5px 8px;
background-color: #000;
font-size: 12px;
line-height: 20px;
color: #fff;
}On message event trigger, markup is inserted with hide class. Hide class is removed to reveal the message. After 3 seconds, hide class is added to hide message and then 250ms later the message is removed from the DOM.