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.
Related
I have a navbar which contains some useful buttons and information. I don't want it to be sticky or something like this, I just want it to be on the top.
I have a problem with the scroll appearing on my page because:
I have this navbar
I sometimes want to center some things on page, therefore I use tricks like height: 100%
The rest of the question is me explaining myself but you can see exactly what I mean here: https://codesandbox.io/s/vigilant-fast-wtoc5:
the scroll appears
the content is not centered until I scroll
The expected output for me is: the content below the navbar takes the space it needs to the end of the page's height (without adding more height and scroll) and is centered (vertically and horizontally) - within its own div.
So let's go into the details:
This is the navbar:
const AppBar = styled.header`
color: white;
margin-bottom: 0.1rem;
width: 100%;
position: sticky;
`;
It's styled-components syntax but you know the drill, it's a header with this style. Anyway, this page header is rendered above anything else, it's present on every page. The problem that I have is:
When I have a page with like one <span> centered on it (so not too much of content), the page renders with a scroll, because the navbar has its height, so I can scroll as much as it takes to cover it up fully (and no more).
This is a problem for me since when I don't scroll, the text is not centered on the page. And if I do, then it's centered, but I don't want to have to scroll to see the desired output.
Anyway, this are my global styles:
html, body, #root {
height: 100%;
margin: 0;
}
And this is how I center text on the page (this is the style of the div in which span is put):
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
I know I can do position: fixed but then if some page is not centered (its content should appear just below the navbar) then its content is getting covered by the page header.
So my question is: Is there a way to have this navbar not add a scroll to my page (I imagine it would be like painted "over" the page?) or somehow center my pages differently (when I want to) to make this centering work with the navbar present as it is now?
P.S I use React but I composed this example in plain HTML&CSS.
I modified some of your code(in your link). I hope this is what you want and be helpful to you.
html,
body {
height: 100%;
margin: 0;
display: flex; /* add this */
flex-direction: column; /* add this */
}
.navbar {
background-color: blue;
color: white;
margin-bottom: 0.1rem;
width: 100%;
height: 300px;
position: sticky;
flex-shrink: 1; /* add this */
}
.center {
font-size: 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*height: 100%;*/
flex-grow: 1; /* add this */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="navbar"></header>
<div class="center">Centered content</div>
</body>
</html>
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'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
This appears to be an issue with jqLite, which I came across while working with angular.js. To see the problem, open the console tab and click "run with js" in this jsbin. left.css("width") is returning an empty string when it shouldn't be.
HTML
<!doctype html>
<html ng-app>
<head>
<meta name="description" content="Angular Template" />
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="left"><span id="test">left</span></div>
<div class="right">right</div>
</div>
</body>
</html>
CSS
.container {display:table; width:100%;}
.left {border: 1px dashed purple; display:table-cell; overflow:hidden; width: 66%; height: 20px;}
.right {display:table-cell; background:green; width: 34%; height: 20px;}
JS
var innerSpan = document.getElementById("test");
var left = angular.element(innerSpan);
console.log(left.css("width"));
When I inspect the element using the chrome dev tools panel, the computed width is definitely not the empty string? What am I missing here?
You can't use .css('width') to get the width of an element. You use it to get the styled width. Since you didn't define the width in the element's style attribute, you get no value.
Try .prop('offsetWidth') instead.
Also, when using jsbin.com, your script is automatically included. Including script.js is just throwing a 404.
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