How to use floating save button for large forms and hide that when actual save button is visible angularjs whose location is not just bottom of page

Question

Hi I want to use a floating save button in my div

.fw_circle{
        background-color: #53beb6;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        text-align: center;
        font-size: 20px;
        padding: 13px;
        color: white;
        z-index: 100;
    }

<div class="div1">
  <!-- Floating save button -->
  <div class="fw_circle">
       <i class="fa fa-floppy-o" aria-hidden="true"></i>
  </div>
  
  <div class="form-group">
      <label>Name:</label>
      <input type="text" ng-model="Name" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name2:</label>
      <input type="text" ng-model="Name2" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name3:</label>
      <input type="text" ng-model="Name3" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name4:</label>
      <input type="text" ng-model="Name4" class="form-control"                      maxlength="200" required/>
  </div>
  <!-- And so many other input fields-->
</div>

<div class="div2">
<!--Don't want that float button to be shown in this div as it has only a save button -->
<button class="btn">Save</button>
</div>

I want that the floating button should be visible in above div (i.e div1) with input fields

So that the user can save the form anytime in between and no need to scroll to the bottom to save the form. But when he scrolled to the bottom and then he can see the save button in another div (i.e div2), in that case, the floating button should not be visible.
And the actual Save button is not exactly at the bottom of page

But the floating button is showing even if the save button is visible. Please suggest some method to achieve this.

Possible duplicate of [when reaching bottom the button should hide](https://stackoverflow.com/questions/27518587/when-reaching-bottom-the-button-should-hide) — Kumar_Vikas, Dec 19 '17 at 13:15

score 1 · Accepted Answer · 2017-12-19T13:25:57.593

1

You just need hide it with JavaScript:

var button = (find button)

$(div).css('display', 'none')

You can make that a function and trigger it on your convenience.

If it is as I understand in your code, you can select the button with: $('.fw_circle')

If you want to trigger it depending on whether the user has reached the bottom or the page, you can do so with the following piece of code from another answer here in SO:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
 };

edited Dec 19 '17 at 13:25

answered Dec 19 '17 at 13:20

I don't want to hide the original button, I want to hide the floating button. How I came to know that original button is visible or not and then accordingly hide the floating button – user11 Dec 19 '17 at 13:25
When then instead of selecting the original button you select the floating button which you have not shown in your html as far as I see, but the procedure is the same. – Dec 19 '17 at 13:27

How to use floating save button for large forms and hide that when actual save button is visible angularjs whose location is not just bottom of page

1 Answers1