Making a FAB go away

Questions
1

I tried all kinds of things to make a FAB disappear / hide.
This is the only thing that worked.
appDom7(constants.PaymentFab).removeClass(‘fab’);

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
2

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
3

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.
Thanks.

1 Like
4

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
5

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' +
'</div>')
1 Like
6

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