Flag

Flag is Javascript library for non-blocking notifications. this library don't need to any libraries ✈️

Refer to the Flag website for examples. check it.

Features

• Fast
• Support ie7+
• Simple design
• Many options and methods support
• Lightweight, No dependencies

How to use

If you want to use flag, you need to load our files.

<link rel="stylesheet" href="flag.css">
<script type="text/javascript" src="flag.js"></script>

Before using this function, you need to set position. If you don't initialize position, then flags are located in top-right of your screen.

flag.init(); // default position is top-right.
flag.init('right'); // set flag position right.

If you want to change position after you call flag.init(), use flag.setPos() function.

flag.setPos('center'); // set flag position center.

After you set position, you can make flag by using under 4 methods with message, title, size parameter.

flag.info('Info message.', 'info', 'middle'); // info type
flag.success('Success message.', 'success', 'big'); // success type
flag.warning('Warning message.', 'warning', 'small'); // warning type
flag.error('Error message.', 'error'); // error type

flag will remove in 5 seconds. If you want to remove it immediately, just click flag which you want to remove. You can remove all flag by calling flag.clean().

flag.clean(); // clear all flags.

Options

• Choose the flag position & size.
• Browse website without annoying alert box and sound.
• Know message type immediately by watching flag color.

Callbacks& Methods

Initialize

// flag.init({position});
flag.init(); // default position is top-right.
flag.init('top-left');

We provide 5 positions(top-left, top-right, left, right, center) to initialize. If you don't pass any position parameter on this function, then it works like top-right option.

Change flag position

//flag.setPos({position});
flag.setPos('center');

We provide 5 positions(top-left, top-right, left, right, center) to set flag position.

Make flag

There are 4 types(info, success, warning, error) to make flag. You can pass 3 parameters at most, and ignore title, or size parameters. size parameter can be 3 options(big, middle, small) and default value is middle.

Make info flag

//flag.info({message}, {title}, {size});
flag.info('Info message.', 'info', 'middle');
flag.info('Info message.', 'info');
flag.info('Info message.');

If you ignore title, then title would be set 'Info'.

Make success flag

//flag.success({message}, {title}, {size});
flag.success('Success message.', 'success', 'big');
flag.success('Success message.', 'success');
flag.success('Success message.');

If you ignore title, then title would be set 'Success'.

Make warning flag

//flag.warning({message}, {title}, {size});
flag.warning('Warning message.', 'warn', 'small');
flag.warning('Warning message.', 'warn');
flag.warning('Warning message.');

If you ignore title, then title would be set 'Warning'.

Make error flag

//flag.error({message}, {title}, {size});
flag.error('Error message.', 'error', 'middle');
flag.error('Error message.', 'error');
flag.error('Error message.');

If you ignore title, then title would be set 'Error'.

Remove all flags

flag.clean();

You can remove all flags in your website.

License

You are free to use this in any way you want, in case you find this useful or working for you but you must keep the copyright notice and license. The MIT License (MIT)

Contact

If you have something, please contact me

• Author : 우영준, 장준호
• Mail : a at hax0r.info or [email protected]
• Issue Reports : https://github.com/webhacking/flag/issues