Javascript – Angular Material FAB Button Floating Position

angularjsangularjs-materialhtmljavascript

I'm trying to use the FAB button from angular material, however, I have trouble properly positioning the button to float above the main content on my page, this is my code snippet:

<div layout="row" ng-cloak>
  <div layout="column">
    <div flex>
      <md-fab-speed-dial md-open="false" md-direction="down" ng-class="'md-scale'">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon class="material-icons">menu</md-icon>
          </md-button>
        </md-fab-trigger>
        <md-fab-actions>
          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Twitter">format_list_bulleted</md-icon>
          </md-button>
          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Facebook">insert_chart</md-icon>
          </md-button>
          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Google Hangout">face</md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </div>
  <div layout="row" style="width: 100%">
    <div flex>
      <ui-view></ui-view>
    </div>
  </div>
</div>

The field <ui-view> pertains to my main view. This is how it looks on my browser:

I've read something about floating the FAB button in github but I can't find how to implement it nor does it say it was already implemented last update was 2015.

Best Answer

Just got it, for anyone who wants to implement this kind of solution, please refer to the code snippet:

<div layout="row" ng-cloak>
  <div layout="row" style="width: 100%;">
    <div flex>
      <div style="float: <right or left>;">
        <THIS IS WHERE MY FAB BUTTON CODE GOES>
      </div>
      <ui-view></ui-view>
    </div>
  </div>
</div>

And the result is:

This is when FAB Button is floated to the right:

This is when FAB Button is floated to the left:

Related Solutions

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Or in plain JavaScript, the following would work:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Best Answer

Related Solutions

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

Javascript – Retrieve the position (X,Y) of an HTML element

Related Topic