How Can I Create A Fixed Floating Plus Button?

October 27, 2023 Post a Comment

I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).

Solution 1:

The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?

The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.

.ui-footer {
  border-width: 0!important;
  background: transparent !important; 
}

.ui-grid-d  {
  overflow: visible !important;
  background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
  text-align: center !important;
  background: transparent !important;
  padding-top: .3em;
  padding-bottom: .9em;
}

.ui-icon-big {
  height: 40px!important;
  width: 40px!important;
  margin-top: -18px!important;
  border-radius: 20px!important;
}
.ui-icon-big:after {
  width: 32px!important;
  height: 32px!important;
  background-size: 22px!important;
  background-color: #F4123D!important;
  background-color: rgba(244, 18, 61, 0.8) !important;
  margin-top: -16px!important;
  margin-left: -16px!important;
}

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><linkhref="https://fonts.googleapis.com/css?family=Jura"rel="stylesheet"><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"><linkrel="stylesheet"href="style.css" /><scriptsrc="https://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><scriptsrc="script.js"></script></head><body><divdata-role="page"id="page-one"><divdata-role="content"><h3>Page content</h3><hr></div><divdata-role="footer"data-position="fixed"data-tap-toggle="false"><divclass="ui-grid-d"><divclass="ui-block-a"></div><divclass="ui-block-b"></div><divclass="ui-block-c"></div><divclass="ui-block-d"></div><divclass="ui-block-e"><ahref="#"class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a></div></div></div></div></body></html>

Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.

Solution 2:

this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.

Solution 3:

I think this pen would help you. It has a tutorial link.

To make sure that your button is above all other elements, add z-index: 999 to your button in css.

You can think of z-index as layers. So a z-index: 2 element will be above a z-index:1 element.

For further details about the z-index css property go here and here.

Solution 4:

Here you are: https://material.io/develop/web/components/buttons/floating-action-buttons/

Solution 5:

Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?

Hope this helps, it's the first idea that comes to mind.

https://www.w3schools.com/cssref/pr_class_position.asp

Build Html5