Topic: When I click a "fixed-action-btn", it navigates back to the calling page

mark.sauer pro asked 6 years ago


When I click a "fixed-action-btn", it navigates back to itself. If I mouse over it, I get the other action item buttons. On mobile, if I touch the button, it navigates rather than display the action buttons. It seems like some event handling script that prevents the default action (click) is not binding to the button. Am I missing some dependency or a setting? I used the following example code...
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>

mark.sauer pro answered 6 years ago


I found a solution that works, but this may not be the correct way to do this. The example on the MDB website DOES work, so not sure why I needed this workaround. The Workaround 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
        });
    }
}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

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
Tags