Floating Action Button (FAB)


Topic: Floating Action Button (FAB)

sjol pro asked 6 years ago

Hi, There are a few issues with the Floating Action Button on touch devices: - is it possible to have it work on clicking events and not hover? - on touch device when clicking on it then cancelling then clicking again it will not show the menus it will just select the first item or maybe I missed something?

mark.sauer pro answered 6 years ago

I was able to correct a similar issue with my "fixed-action-btn". There are functions created in the page load for openFAB() and closeFAB(). They are bound to mouseenter and mouseleave events only though. So I created a single function and added it to my main.js library (see below). All it does it make the same calls but it will behave like a toggle depending on if the "active" class exists on the button". Just bind the "toggleFABMenu" function to the click event of the button. Works pretty good and retains hover functionality for those working with a mouse.
$('#btnFixed1').on({
	click: function (e) {
	e.preventDefault();
        toggleFABMenu($('#btnFixed1'));
        return false;
    }
});
Here is the function to create/add.
function toggleFABMenu(btn) {

    $this = btn;
    if ($this.hasClass('active') === false) {
        $this.addClass('active');
        $this.find('ul .btn-floating').velocity({
            scaleY: ".4",
            scaleX: ".4",
            translateY: "40px"
        }, {
            duration: 0
        });

        var time = 0;
        $this.find('ul .btn-floating').reverse().each(function () {
            $(this).velocity({
                opacity: "1",
                scaleX: "1",
                scaleY: "1",
                translateY: "0"
            }, {
                duration: 80,
                delay: time
            });
            time += 40;
        });
    } else {
        $this.removeClass('active');
        var time = 0;
        $this.find('ul .btn-floating').velocity("stop", true);
        $this.find('ul .btn-floating').velocity({
            opacity: "0",
            scaleX: ".4",
            scaleY: ".4",
            translateY: "40px"
        }, {
            duration: 80
        });
    }
}

Michal Szymanski staff pro premium priority answered 6 years ago

Hi, FAB requires a fix and it will be fixed soon. Right now unfortunately it works like that, I'm sorry.

NeedlSolutions pro answered 6 years ago

Thanks very much Mark! Your code worked brilliantly for me
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No