jq-flash is a lightweight jQuery plugins that aims to give you access to minimalistic and stylish flash messages.
What do I mean by "flash messages" ? These are, typically, the kind of messages displayed to the user when they successfully achieve an action (e.g. "You are now logged in") or when there has been an error (e.g. "Invalid credentials").
npm install --save jq-flashdist/flash.cssrequire("path/to/jq-flash")(/*jQuery*/);WARNING The actual jQuery plugin is in {installation path}/dist/flash.js
jq-flash is quite straight forward, you can either use it dynamically or statically (or even both :O).
To use a flash message statically, use the following structure (very first in body tag, stack them if needed):
<div class="flash flash-folded">
<button class="flash-close">✖</button>
<p>Your message here</p>
</div>
<!-- note that ✖ is a nice ✖ that fits perfectly-->
You can trigger a new flash message using jQuery:
$.flash("my_type", "my message");
This will insert at the very top of the body tag the following structure:
<div class="flash flash-folded flash-my_type">
<button class="flash-close">✖</button>
<p>my message</p>
</div>
And will automatically unfold it to please your eyes!
Note that, whenever you close the flash message, there's a delay of 2s before it is removed from the DOM. As you can see, you can use custom classes to define a number of additional CSS rules.
You can also add the flash-embed class if you want to manually put it inside a container (which should probably have position: relative).
Since v2.0.0 you can use the special class flash-embed to specify that the flash message isn't in the global scope (i.e. it is within another element than <body>).
Since v2.0.1 you can now flash has the following signature : $.flash(type, message, context). You can provide the context argument (which expects an HTMLElement) to specify where to embed it. This works also with shorthands (e.g. $.flash.info("PINGAS", document.getElementById("flash_holder"))).
It now also exposes $("#flash_holder").flash("info", "PINGAS") as a shorthand for embedding.
The following is the basic HTML structure for an embed :
<div class="someContainer">
<div class="flash flash-folded flash-embed">
<button class="flash-close">✖</button>
<p>Dem Messages</p>
</div>
<div class="someOtherContent">
[...]
</div>
</div>
Since v2.0.0, jq-flash has been using Sass, more specifically the scss syntax. You can find the source files under src.
You might have noticed that $.flash(type, message) needs a message but also authorizes you to pass along a type that is actually used to construct a class name : with x as your type, the generated class name is flash-x.
You can then use a custom rule to modify the colors of the flash message (there are already two examples, flash-success and flash-failure):
@import "~jq-flash/src/flash"; //using webpack
.flash-x{
@include flashTheme(
pink, //bg color
yellow, //text color
unset, //box shadow
10px 10px #00ff00 //text shadow
);
}
jq-flash comes with 4 built-in settings : the default one, flash-success,flash-failure, flash-info (a very basic demo is included).
Note that you can also change Sass variables like this :
$flashPadding: 3px;
$flashRed: orange;
@import "~jq-flash/src/flash"; //using webpack
If you use it as intended (at the very top of the body tag) then yes it is completely responsive, the text breaks on a new line if there would be overflow on the x-axis and the paragraph becomes scrollable if there's too much text for it to handle.
This section is empty for now, feel free to ask any questions, they might end up here :D!
jq-flash is really handy if you use something like Slim+SlimViews+Twig for you back-end !
For instance, here is my general purpose flash.twig file:
{% if flash.success %}
<div class="flash flash-folded flash-success">
<button class="flash-close materialShadow">✖</button>
<p>{{ flash.success }}</p>
</div>
{% endif %}
{% if flash.failure %}
<div class="flash flash-folded flash-failure">
<button class="flash-close materialShadow">✖</button>
<p>{{ flash.failure }}</p>
</div>
{% endif %}
{% if flash.info %}
<div class="flash flash-folded flash-info">
<button class="flash-close materialShadow">✖</button>
<p>{{ flash.info }}</p>
</div>
{% endif %}
This allows me to use $app->flash("failure", "Incorrect password") and gets the job done in no time !
I'd like to emphatize on the fact that this plugin was conceived to be used with Roboto (built-in for most browsers) and the special character ⅶ.
I'll probably drop a new CSS library called material-shadows (this part will be updated once released) that will allow you to use a variety of different inset shadows for your flash messages, I pulled out the best one yet for this plugin ;)!
An interesting behavior is that they stack on top of each other, which is pretty nice with dem shadows :3 !
FAQs
A lightweight jQuery plugin for stylish flash messages
The npm package jq-flash receives a total of 3 weekly downloads. As such, jq-flash popularity was classified as not popular.
We found that jq-flash demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.