Making a FAB go away

I tried all kinds of things to make a FAB disappear / hide.
This is the only thing that worked.

constants.PaymentFab is …
this.PaymentFab = document.getElementById(“idFabPurchase”);

So the FAB does now go away, but the .close() did not work.

Also, is there any way to construct a FAB in Javascript?

1 Like

Don’t use document.getElementById(“idFabPurchase”); use f7 query selector. Then just do $$(’.fab’).hide() and $$(’.fab’).show() or $$(’#dFabPurchase’).hide() for your custom id.

1 Like

Yeah, I previously did try what you suggested and it didn’t work.
I have to get out a new sprint, so I had to take out the one FAB button in question.
Will try again.

1 Like

What would be great?

If you can use javascript to create a FAB just like notifications or toast. Which I used in place of FAB for this one use case.

1 Like

You can dynamically create them. Just generate the html as a string and append it to a page. However, I don’t think it would be appropriate for a situation that a toast or notification would be useful.

$$('.page').append('<div class="fab fab-extended fab-center-bottom">\n' +
'  <a href="#">\n' +
'    <i class="icon f7-icons">add</i>\n' +
'    <!-- Element with FAB text  -->\n' +
'    <div class="fab-text">Create</div>\n' +
'  </a>\n' +
1 Like

Thank-you! I will be coming back to address this on the next sprint. Had to pull it for now.