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).
I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.
Does anyone have any resources or knowledge that could assist? Thank you
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js">
</script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<h3>Page content</h3>
<hr>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e">
</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.
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.
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.
Here you are:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Read more about it here:
https://material.io/design/components/buttons-floating-action-button.html
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
Related
Assuming I have a folowing code - fiddle - with font-size attribute set for <html> tag. This styling along with header and footer is generated via js script which cannot be removed. This is already existing page for a long time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="bootstrap4.css">
<link rel="stylesheet" href="myCustomCss.css">
<link rel="stylesheet" href="cssLoadedByJs.css">
</head>
<body>
<div>
Header (need to stay as it is now with smaller font)
</div>
<div class="content"> <!-- (need to reset it 100%, so content will be sized as I want...) -->
Content
<h2>
H1 here
</h2>
</div>
<div>
Footer (need to stay as it is now with smaller font)
</div>
</body>
</html>
Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:
html {font-size: 62.5% !important;}
myCustomCss.css - what I was trying to do:
html .content {
/* font-size: 100% !important; */
/* font-size: unset; */
/* font-size: 16px; */
}
How to reset font-size attribute for content div only and preserve header and footer as it is?
I've tried to set font-size: unset; or font-size: 100% for content div but no result. font-size: 16px let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check fiddle for better understanding and tests...
I'm not sure why exactly are you using font size on html tag directly but maybe the following hack can help overcome your problem.
html > body > div.content,
html > body > div.content * {
font-size: 137.5%;
}
I seriously advise not using this approach and styling specific elements instead.
Check this: https://jsfiddle.net/5jdrta16/1/
I took the font-size... important setting off of the <html> and applied it to the <body> element (without important). I also moved all the styling into the CSS.
.content {
font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}
body {
font-size: 62.5%;
}
What about:
.content, .content * {
font-size: initial;
}
I have been trying to use particle effect in the background and have some text centred in that div and have the particle effect in the background.
The javascript files refer to the particleJS files which you can find here.Github ParticleJS.
But Im just not able to centre it in the middle, is it because JS is rendering it simultaneously is there a way I can do it.
Link to codepen
body{
margin:0px;
padding: 0px;
}
canvas{
display:block;
height: 100%;
vertical-align:bottom;
}
#particles-js{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
#name{
color: white;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href = "particle.js"></script>
<link rel="stylesheet" media="screen" href="style.css">
<title>Linko</title>
</head>
<body>
<div id="wrapper">
<div id="particles-js">
<script src="particles.js"></script>
<script src="app.js"></script>
<div id="name">
<p>Hello there</p>
</div>
</div>
</div>
</body>
</html>
You can add position: absolute; to the #name div for him to go above the canvas.
Then change align-content:center by align-items:center in #particles-js div.
Here is a updated codepen :)
https://codepen.io/anon/pen/vqWePJ
The position:absolute is needed because HTML element by default (posistion:static) are positioned as a flow, one after another in their parents, so you can't have one overlapping another. Adding the position:absolute to one of the element will remove it from this flow, and position it as if it was alone in his parent, so now it can overlap the others.
You can see this link for more complet explanations on CSS positionning.
https://www.w3schools.com/css/css_positioning.asp
For the align-content/align-items issue, align-content is used for multi line alignement, and align-items for alignement in the inverse of the flex box direction.
The naming here is discutable and a bit confusing since justify-content is used for single line alignement in the flex box direction I think, but I was not here during this discussion, they probably had a reason to do it this way.
You can see this question What's the difference between align-content and align-items? for more details on that.
Try:
#name{
color: white;
align-self: center;
}
This will cause the 'name' div to be horizontally centered inside of the 'particles-js' div.
I am trying to override the typical jQuery Mobile background with a .jpg. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html loads as a picture fades in. (This CSS override works perfect)
After the image has faded in, I do a $.mobile.changePage() to another page, not a multipage format
This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
First, you need commas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle.net/ezanker/5GgR9/
I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck
I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.