I'm trying to use the "stars" example as a simple background in a html page, with html content on the page as well (I'm far from being into js. - simple html- and css-handling is ok).
What do I have to put into:
- css (separate or inline)
- html head
- html body
I'm just looking into the .js use as a background. I managed to strike the mouse parameter as vector defining out of the stars code. This runs ok now just as is, but I either turn up in showing just the .js or the html content with missing the stars background. Thanks alot in advance!
This is what I have setup in my CSS
body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
margin: 0px;
padding: 0px;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
Hope this helps
Related
I found this overlay scrollbar (https://github.com/KingSora/OverlayScrollbars) which is absolutely perfect except for one detail... it screws up the sticky footer.
The sticky footer I'm using is straight from the template in Visual Studio when creating a new .net core mvc project. For convenience though I'll copy the relevant styles here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 45px;
}
After including the appropriate css and js files in the appropriate places, I initialize like so:
<script>$("body").overlayScrollbars({});</script>
But this causes the footer to always show up even when the page is not scrolled to the bottom as shown in the attached picture. I've been tinkering with styles but I really have no clue how to fix this or why it's even occurring to begin with.
This CSS code is in the default AMP style sheet:
html, body {
height: auto !important;
}
It becomes a problem if you want to use flexbox to make sure the body of the HTML document takes up the whole screen, even if there is not enough content to take up the full screen. For that to work, you need to set the height of html, body to 100%.
Here is an example of using flexbox to make sure your footer is at the bottom even when there is not enough content on the page.
Any way to accomplish this and still remain Google AMP compatible?
I don't know how to fix your flexbox issue, however, I came to this page looking for a way to get 100% background and managed to figure out how to get the html element to 100% page height. However, because amp sets position: relative!important; on the body element, the same trick cannot be used to set body height. So - to end, no, I don't have a solve to your issue. But maybe a start or perhaps will help someone else with the background issue.
<html class='max'></html>
.max {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
html {
background: #c5975b no-repeat url("<img-URL>");
background-size: auto 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
You can use min-height: 100vh;
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
full sample code: https://amp-cover-image.glitch.me/
You can achieve this by setting min-width: 100% to body and html.
The posted question does not have a clear solution. The height auto rule can not be overwritten by using the following example.
html, body{
height: 100% !important;
}
I assume the Amp team noticed this and replaced your example:
html, body {
height: auto !important;
}
with the following code:
html:not([amp4ads]),
html:not([amp4ads]) body{
height: auto !important;
}
After this change it is now possible to overwrite height auto rule by using the same selector:
html:not([amp4ads]),
html:not([amp4ads]) body{
height: 100% !important;
}
I know very little to nothing of jQuery or JavaScript. So after fiddling - and failing - for hours here's my question:
In the header of my website (http://dev.shespeakswithpassionmembership.com/index.php), I have got an svg image that shrinks on scroll. Great, it works!
But, what happens is: the menu doesn't jump next to the shrinking image. I want that because it saves a lot of space and it looks nicer.
This is what I've done so far:
The image is centered on load. For this I have added this CSS to the navbar-header:
.navbar-header {
width: 100%;
}
The image has got this CSS:
header.large img {
height: auto;
margin: 10px auto;
max-width: 100%;
width: 900px;
display: block;
}
When you scroll the image shrinks. As you can see the header has a class of .large and the image is shrunk by removing that class and replacing it with .small:
header.small img {
height: 49px;
max-height: auto;
width: 154px;
max-width: 100%;
margin: 10px 5px 0 10px;
}
This is done by this jQuery script:
function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})});
$(function() {
$('[data-rspnsv]').rspnsv({delay: 200, duration: 3000});
});
For the menu to jump to the right of the svg image, I need to remove the width: 100%; and to assign a width: auto; to it. I would like to do that by adding a line of code to the script above so that it not only replaces header.large with header.small, but does the same trick with the navbar-header.
Is there anyone who can append the script to do this? To me it would seem rather simple for someone who knows about jQuery (which I don't).
Thanx in advance,
Thom
This is a CSS question. It doesn't require any jQuery changes. Add this CSS
header.small .navbar-header{
width: auto;
}
If you want the menu to remain at the bottom, this is one way of doing that.
header.small #js-meganavi{
margin-top: 46px;
}
I am aiming to create a simple image grid using css floats with certain 'featured' blocks which are double the size of the others.
I have it mostly working fine however when a block is featured I'm unable to get the next block to fit underneath it correctly.
I've included a jsfiddle to make the problem much clearer. You will see that at the bottom of the output there is a block on a row of it's own to the right of the featured element (with the class 'problem'). I would like this to instead be on the left of the featured block and on the same row as it is currently so that I can add another 2 blocks to create a completed grid but I can't work out how.
CSS:
.grid {
ul {
padding: 0;
margin: 0;
width: 100%;
li {
width: 20%;
float: left;
list-style: none;
box-sizing: border-box;
white-space: nowrap;
list-style: none;
line-height: 0;
img {
width: 100%;
}
}
}
.featured {
width: 40%;
}
}
(Nested css is due to scss).
Full fiddle: Link
Any help is greatly appreciated.
Technically this is called Dynamic Grid Layout
As per your requirement you have to use jquery here because there is no solid solution available using only css and html.
There are ready made plugins available online.
You can see or download the demo from here:
Reference 1:
Reference 2:
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/