Fab Buttons, Message Box, Cookie Law Alert and Contact Form (4 in 1)

fab-buttons.min.js

A simple pure Javascript plugin.

1

About

A simple pure Javascript plugin. For corner sweet buttons, cookie law alerts, working contact forms, message boxes and much more.... Main Features:

Show Examples
2

Installation

STEP 0 : If you dont have any Font icon library please add any icon library for the font icons.
You can use Fontawesome or Google Material Icon Library or etc.

STEP 1 : This plugin uses just one small CSS

				<link rel="stylesheet" href="src/css/fab-buttons.min.css">
			

STEP 2 : Then, just include plugin javascript file to your document:

				<script src="src/js/fab-buttons.min.js"></script>
			
3

How To Use


<!--Example 1 -->
<!--FAB BUTTON DEMO HTML START -->
<div class="m-fab-box" id="example1">
  <button class="m-fab-button m-fab-blue">
	<span class="m-fab-icon-default"><i class="material-icons">menu</i></span>
	<span class="m-fab-icon-open"><i class="material-icons">close</i></span>
  </button>
  <ul class="m-fab-menu">
	<li><a href="#" class="m-item m-fab-dark"><i class="material-icons">account_box</i></a><span class="m-tooltip">My account</span></li>
	<li><a href="#" class="m-item m-fab-green"><i class="material-icons">comment</i></a><span class="m-tooltip">Comments</span></li>
	<li><a href="#" class="m-item m-fab-yellow"><i class="material-icons">bookmark</i></a><span class="m-tooltip">Saved</span></li>
	<li><a href="#" class="m-item m-fab-blue"><i class="material-icons">notifications</i></a><span class="m-tooltip">Notifications</span></li>
	<li><a href="#" class="m-item m-fab-white"><i class="material-icons">settings</i></a><span class="m-tooltip">Settings</span></li>
  </ul>
</div>
<!--FAB BUTTON DEMO HTML END -->


<!--Example 2 -->
<!--COOKIE LAW ALERT DEMO HTML START -->
<div class="m-fab-box" id="example2">
  <button class="m-fab-button m-fab-blue">
	<span class="m-fab-icon-default"><i class="material-icons">info</i></span>
	<span class="m-fab-icon-open"><i class="material-icons">close</i></span>
  </button>
  <div class="m-fab-panel">
	<p>The Premier League website employs cookies to improve your user experience. We have updated our cookie policy to reflect changes in the law on cookies and tracking technologies used on websites. If you continue on this website, you will be providing your consent to our use of cookies.</p>
	<button class="m-fab-form-button m-fab-blue" id="acceptCookiesButton">Accept and Close</button>
  </div>
</div>
<!--COOKIE LAW ALERT DEMO HTML START -->


<!--Example 3 -->
<!--CONTACT FORM DEMO HTML START -->
<div class="m-fab-box" id="example2">
  <button class="m-fab-button m-fab-red">
	<span class="m-fab-icon-default"><i class="material-icons">comment</i></span>
	<span class="m-fab-icon-open"><i class="material-icons">close</i></span>
  </button>
  <div class="m-fab-panel">
 	<h3 class="m-fab-title">Leave a message</h3>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	<form action="php/PHPMailer/sendmail.php">
	  <input class="m-fab-element" type="text" name="name" placeholder="Name" autocomplete="off" data-required="true">
	  <input class="m-fab-element" type="text" name="email" placeholder="Email" autocomplete="off" data-required="true" data-validation="email">
	  <textarea class="m-fab-element" name="message" placeholder="Your message" data-required="true"></textarea>
	  <!--delete this block if you do not want captcha -->
	  <div class="m-fab-captcha">
		<button class="m-fab-refresh" type="button"><i class="material-icons">refresh</i></button>
		<div class="m-fab-column m-fab-numbers"></div>
		<div class="m-fab-column">
		  <input class="m-fab-element" type="text" name="captcha" placeholder="Enter value" autocomplete="off">
		</div>
	  </div>
	  <!--delete this block if you do not want captcha -->
	  <button type="submit" class="m-fab-form-button m-fab-purple">Send your message</button>
	</form>
  </div>
</div>
<!--CONTACT FORM DEMO HTML START -->


<!--INITIALIZING THE PLUGIN-->
<script type="text/javascript">
	var fab1 = new fabButton({
		selectorId : '#example1',
		position : 'top-right'
	});

	var fab2 = new fabButton({
		selectorId : '#example2',
		autoOpen: true,
		overlay: false,
		position: 'bottom-left',
		cookieAlert: true,
		cookieExpireDay : 365,
		cookieAcceptButtonId : 'acceptCookiesButton',
		cookieName: 'fab_cookiealert1'
	});
	
	var fab3 = new fabButton({
		selectorId : '#example3',
		overlay: false,
		position: 'bottom-right',
		panelWidth:350
	});

</script>
4

Options

All fab button options:

Name Type Default Description
selectorId string null you have to set plugin id attribute
zIndex integer 9999 Plugin z-index parameter
autoOpen boolean false If set true, plugin auto open with initializing.
overlay boolean false If set true, overlay showing.
overlayColor string "rgba(0,0,0,0.4)" overlay color value. you can change with any color
overlayClose boolean true Overlay click and close the fab panel. if set false dont close fab.
panelWidth integer 300 Fab panel width
position string "bottom-right" Fab button corner position. Value : 'bootom-left', 'bottom-right', 'top-left' and 'top-right'
positionType string "fixed" Fab button position type: Values : 'fixed', 'absolute' and 'relative'
horizontal boolean false If set true, fab button opening with horizontal.
cookieAlert boolean false If you set true, you can make cookie law notification alert.
cookieExpireDay integer 365 Cookie expire day from now.
cookieAcceptButtonId string null For the cookie law alert. If using cookie alert, set here accept button id.
cookieName string "fab_cookiealert" Your cookie name. so that more than one cookie alerting box can be used.
onInit function null Fab button initialize action. for the example open the index10.html
onBeforeOpen function null Fab button before open action. for the example open the index10.html
onAfterOpen function null Fab button after open action. for the example open the index10.html
onBeforeClose function null Fab button before close action. for the example open the index10.html
onAfterClose function null Fab button after close action. for the example open the index10.html
5

Global Methods

Plugin have 3 global method.

				<!--Example-->
var myFab = new fabButton({
	selectorId : '#example',
	......
	......
});

<!--show fab button method.-->
myFab.show();

<!--close fab button method.-->
myFab.close();

<!--destroy fab button method.-->
myFab.destroy();

			
6

Styles

You can change any styles with css. Find the element you want to change and make the changes you want with css.

Some CSS Helpers:

				/*Fab button color helpers*/
.m-fab-red
.m-fab-retro-red
.m-fab-turquoise
.m-fab-green
.m-fab-green-dark
.m-fab-blue
.m-fab-yellow
.m-fab-dark
.m-fab-purple
.m-fab-primary
.m-fab-white
.m-fab-pink
.m-fab-orange

/*6 columns grid system helpers*/
.m-fab-row
.m-fab-column
.m-fab-col-1
.m-fab-col-2
.m-fab-col-3
.m-fab-col-4
.m-fab-col-5
.m-fab-col-6

/*Example: How to change panel background color with CSS?*/
.m-fab-panel{
    background-color:#fee9d7;
}