Javascript Functions

For using javascript easily with beauter, javascript functions are being tested to call and interect with beauter elements directly without scripting from scratch.

You can include the downloaded script file 'beauter.min.js' at the end just before the </body> tag.

Or you can use CDN such as:

https://rawgit.com/outboxcraft/beauter/master/beauter.min.js

-close class

To make an element that can be closed by clicking on some element inside it, you can use -close class. Note that the -close class will only close the parent element.

<div class = "jumbo _purple" style="transition:2s">
<h3>I am a jumbo</h3>
<p>The button below can close me.</p>
<button class="-close _yellow">hit me</button>
</div>

showsnackbar('#id')

This function can be used to open a snack bar. Just call the id of the snackbar using the showsnackbar(id of snackbar div) on a button using onclick() or the event you want to triger and the snackbar will pop.

topnav('#id')

This function can be used to open a top navigation bar. Just call the id of the topnav using the topnav(id of navbar div) using onclick() on the -icon class and the navbar will become responsive.

Learn more at navigation documentation.

openmodal('#id')

This function can be used to popup the modal box. Just call the id of the openmodal using the openmodal(id of modal box div) on a button using onclick() or by automatic popup or the event you want to triger and the modal box will pop.

Learn more at modal box documentation.

openimg('#id')

This function can be used to popup the imgmodal box. Just call the id of the imgmodal along with the image of imgmodal using the openmodal(id of modal box div, id of the image) on a button using onclick() or the event you want to triger and the modal img will pop.

Learn more at modalimg documentation.

opentab('#id')

This function can be used to focus the tab. Just call the id of the tab along with the tab button using the opentab(id of tab div, id of tab button) or on button using onclick() or the event you want to triger and the tab will show.

Learn more at tabs documentation.