PLINGâ– JS

A tiny inline javaScript library for displaying custom alerts or pop-ups.

The file size is 2kb, nothing to worry about!

Helps you write fashionable alerts directly with HTML without needing to write your JavaScript inside a script tag.







HOW TO USE

The source link should be placed inside the head section of your html document.

To start using, you either link from the CDN

<script src="https://rawcdn.githack.com/stonny71/pling/95d346c1c9ad0faa10c73ee3c041ea8e1fb8a4e8/pling.js"> "> </script>

OR download the source and host from your computer.

<script src="pling.js"> </script>

Quick Template

<!DOCTYPE html>
<html>
<<head>
<title>Pling js </title>
<script src="https://rawcdn.githack.com/stonny71/pling/95d346c1c9ad0faa10c73ee3c041ea8e1fb8a4e8/pling.js"></script>
</head>
<body>

<button onclick="Pling('Hello world')">demo</h1>

</body>
</html>

Displaying alerts using pling.js

The main syntax is Pling(syntax1, syntax2, syntax3)
where:
syntax1 is the content of the alert.
syntax2 is the title of the alert (optional).
syntax3 is used for adding custom css styles to the alert(optional).

Displaying alerts with a title.

The first argument is the content of the alert while the second argument is the title.

<button onclick="Pling('I am the content', 'I am the title')"> demo </button>


Displaying alerts without a title.

To display alert without a title, the second argument should not be included.

<button onclick="Pling('I am the content')"> demo </button>


Using pling.js inside JavaScript environment.

Pling.js works like JavaScript alert() function, just that Pling.js provides extra parameters for adding more features to your alerts.
All you just need is replace alert with Pling

<script>

Pling('I am the content');

</script>

Using pling.js inside another function

In the below sample, Pling.js is used to display the current year.

<script>

function showYear(){
d= new Date();
year = d.getFullYear();
Pling(year, "The current year is");
}

</script>

Adding css styles to your pling.js alert

To add a custom css to the alert, include the third argument.

The third argument is a name you will use inside your css sheet;

sample:
Pling("hello my button is red", "red button", "custom");

Pling.js has several class names you can use to add customized styles to your alert.

.btn is the "ok button"
.title is the title of the alert.
.content is the content of the alert. .box is the alert container itself.

Customizing the alert using css

Using custom as the third argument.
You can always use any name as the third argument. (any name used as the third argument should be used inside your css sheet to style the alert.
you can give different names to different alerts in your project.
<button onclick = 'Pling( "content", "title", "custom")'>
</button>

Inside your css sheet:
<style>

/**main container**/
.custom .box{
background:#333 !important;
color:#fff !important;
}

/**title of the alert**/
.custom .title{
background:#64B5F6 ! important;
color:#fff !important;
}

/**content of the alert**/
.custom .content{
color:#fff !important;
}

/**ok button**/
.custom .btn{
background:#333 !important;
color:#fff !important;
}

</style>

NOTE

Always add !important while trying to add custom colors in the css sheet. e.g

.custom .btn{
background:red !important;
color:white !important
}
Do not us \n for new lines inside the Pling() function, use <b/> instead.
You can always use HTML markup inside Pling() function

sample

Pling("Have a nice day my friend <br/> I wish you good luck");