I'm trying to create a vertical progress bar by using a CSS transform. I want the progress bar to take up the full height of the screen.
The problem is that, since I use CSS rotate, the progress bar's height is equal to the width of the screen, not its height. I created a fiddle to demonstrate this: the length of the progress bar will change depending on how wide you make the 'Result' section. This is incorrect: it should always take up the entire screen. Here's the code:
HTML:
<progress max="1" value="0.8"></progress>
CSS:
progress {
margin: 0;
height: 5px;
width: 100%;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom left;
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
As it's a progress bar, its size cannot be larger than the screen height, otherwise the progress indication will be off. I've looked at this solution but this won't work for me because screen dimensions can change at anytime (e.g. switching between portrait and landscape on a tablet), so a JavaScript solution won't do.
Is there a way to force the progress bar to take up the full height of the screen using just CSS? Any other solution to create a vertical progress bar without using rotations, would also be great!
I'm not quite sure what you mean, however try replacing width:100%, with width:100vh;.
As #jaunt just said, using width: 100vh would do the trick, as it takes in consideration the viewport height to assign a width for the progress. Below you can find the list of browsers that support this:
http://caniuse.com/#feat=viewport-units
Related
when I press on an image its supposed to blow up into a larger picture. However, I changed the size so the image isn't fully touching the bottom and top of the screen by changing the height to 90vh. However, now when I press the image you can see it shift up that 10vh before expanding the image. Can someone help me remove that jump?
https://darrientu.com/
.pswp { height:100vh !important;
margin:auto!important;top:0 !important;
bottom:0 !important;
}
.pswp__scroll-wrap {
height:90vh !important;margin:auto!important;top:0 !important;
bottom:0 !important;
}
It may be worth undoing any styling that you've applied to it and see if this kind of functionality is supported out of the box:
Using the barsSize option:
https://photoswipe.com/documentation/options.html
Or the parseVerticalMargin event:
https://photoswipe.com/documentation/api.html
I was able to achieve a gap at the top and bottom of the image at the PhotoSwipe demo site by selecting All Controls and adding the styles below to hide/disable the UI with CSS:
.pswp__ui {
opacity: 0!important;
pointer-events: none;
}
Using that in combination with the barsSize option should allow you to customise how big the gap is between the image and the browser viewport, though you probably won't be able to use vh as a unit, and will need to use something like Math.round(window.innerHeight*.1) to calculate 10% view height, or use a pixel value instead.
It's also worth looking into the Custom HTML in Slides topic in the documentation, as you may be able to add a spacer div before and after your image.
For a CSS only fix:
If you don't have access to change how PhotoSwipe is initialised, then the CSS below makes the animation less jumpy on your site, however, it does make the image go to full height first for a moment, before transitioning to 90vh.
Remove:
.pswp__scroll-wrap {
height: 90vh !important;
}
Add:
.pswp__scroll-wrap {
transition: transform 222ms cubic-bezier(.4,0,.22,1);
}
.pswp--animated-in .pswp__scroll-wrap {
transform: scale(.9);
}
To resolve the bounce, please change height: 90vh !important line under .pswp__scroll-wrap selector to 100vh. Like so:
.pswp__scroll-wrap {
height: 100vh !important;
margin: auto !important;
top: 0 !important;
bottom: 0 !important;
}
If you still want to have padding on top & bottom of the images while removing bounce bug, then either downsize the thumbnail image (one that is not used for slider) to match the full sized one (on that is duplicated via slider and scaled up) or add some kind of padding to the images.
Another workaround is to add padded blocks in .pswp__scroll-wrap:before and .pswp__scroll-wrap:after like so:
.pswp__scroll-wrap:before,
.pswp__scroll-wrap:after {
display: block;
content: "":
padding: 50px; // Set this to your preferred padding!
background: #ffffff; // also add transition for background, so it fades in nicely!
}
I couldn't find code where you defined slide thumbnail size prior the scaling, but my guess is that resizing it would also help keep the padding while having no bounce issue.
The whole issue is around you having those 90vh under the wrap while resizing the duplicate of the original image.
Scenario:
In HTML, I have 2 element (top bar and images). The top bar need to be
at position:fixed (which will break the flow, I understand that). And
the 2nd element has margin-top to push down the image after the
"top bar". This has no issue until I minimised my browser width, the
content in the "top bar" push the container height and overlap the 2nd
element, which is the image. And this look ugly.
Anyway to have the 2nd element in flow with the 1st element, so that no matter how I minimised my browser width, the 2nd element is
smart enough to push down.
Code: CSS
.TopBar { /* 1st Element */
background-color: #000000;
opacity: 0.5;
width: 100%;
position:fixed;
padding:10px;
}
.TopBar > div {
color:white;
}
.carousel { /* 2nd Element */
display: inline-block;
margin-top:73px;
}
.carousel_img {
width: 100%;
}
Problem:
As you already know, you can't force position:fixed to flow, so there isn't an answer to your question to do it the way you want.
But the way you describe the problem, it's about supporting different browser sizes. If that's the case, then it sounds to me as if media queries are the answer to your problem.
CSS supports #media { ... } blocks, which allow you to specify styles that only come into play at certain browser sizes. So in order to solve your problem, you need to find out what browser width causes the layout to change (resize very slowly; it will flip out at a specific size), and write a media query that changes your stylesheet for sizes lower than that.
Without (a lot) more detail of your layout, I can't really give you specific code, but there are a lot of resources available online to learn about media queries if you don't already use them.
It's also worth noting that position:fixed can often be troublesome at small browser sizes, so much so that a lot of mobile browsers deliberately didn't even support it for some time. That's changed now, but it can still cause layout gremlins, so you may want to use the media query to switch it off entirely in low-width browsers.
Respond to answer given by Spudley on using the #media to solve the issue, I have try to find some page that has the effect of "fixed" & overflow element, and inspect the code by viewing it through web editor. And this is what I get. I slowly delete all the CSS and related element one by one till I got the "fixed" not working. And while the is still set on position:relative, there is a CSS that attached to it, which when I remove it, the "fixed" effect was gone.
reference URL:
https://www.w3schools.com/css/css3_colors.asp
I filter the source file:
https://drive.google.com/drive/folders/0BzbdjY-H_HzZTC1Rci1nY0F4VFU?usp=sharing
Screen Capture of the coding that solve my problem (I guess)
Click Here to see the screen shot
If I understand what you want to achieve, there's a workaround to achieve similar results.
First, you effectively can't make your TopBar behaving like a flowing bloc element with position: fixed. So, let's make static.
The "fixed" behaviour will be provide by setting the body properties
body {
/* NOTICE the vertical flex box, makes the height adjust
automaticaly (no need to toggle)*/
display: flex;
flex-direction: column;
max-height: 100vh; /* Restrain the body to the window height */
overflow-y: hidden; /* Prevent scrollbar on body */
}
.TopBar {
display: block; /* Blocks have 100% widht by default, don't need to
specify */
padding: 10px;
position: static; /* No need to specify, it's the default value */
/* Helpers to make the TopBar easier to track */
background-color: #000000;
opacity: 0.5;
/* This is not part of the solution, it's only to make the height inversely proportional to window width
e.g. make it grow while the other decrease
*/
height: calc(200px - 10vw);
}
/*
Just under the TopBar, lets place a container element that will act
as scrolling window
*/
.container {
height: 100vh; /* max-height is superfluous because of the overflow. */
/* This will simply make the scrolling on the container instead of the body */
overflow-y: scroll;
}
.TopBar {
/* 1st Element */
}
.TopBar > div {
color: white;
}
/* simply to display some text */
p {
width: 50%;
margin: 1em auto;
}
Place your carousel inside the container and voilà! No need for position nor z-index fiddling. TopBar and container are flowing and the former will "push" the later.
That being said, some media query adjustments wouldn't hurt. According to your picture, elements in your TopBar are inlines (inline or inline blocks). You should consider making them "block". Flex-boxes would also worth some consideration.
Hope this help
I am using Bootstrap and am having trouble with the navbar. In my navbar, I have a few divs that I want to be the full height of the navbar, but the navbar constantly seems to be just a bit taller than the divs inside. I figured this was due to some padding on the navbar somewhere, but I can't find it. Check out this jsFiddle:
https://jsfiddle.net/2fax4vme/
Note the three .rhombus divs. They should be the full height of the navbar, but there is 5 pixels of extra space under them. If I make the rhombus divs 5 pixels taller, the navbar just stretches.
I'm sure this is something simple I'm not missing, but I just can't spot it.
I would not try and edit the bootstrap navbar css. In stead, why dont you just counter the padding by adding a negative margin bottom to your rhombus (and add an extra few pixels to the height)
.rhombus{
height:50px; /* + 5px */
width: 35px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
display: inline-block;
margin:0px;
padding:0px;
margin-bottom: -5px; /* counter the padding */
}
and the updated fiddle: https://jsfiddle.net/2fax4vme/2/
What about changing the height of .rhombus to height:50px;. It works for me.
For HTML5, it's also necessary to add margin-bottom:-5px per Pevara.
Tested: https://jsfiddle.net/2fax4vme/3/
.rhombus {
height: 50px;
}
#navbar {
line-height: 0;
}
I found there are few elements set to 50px in Bootstrap, so probably also make yours to the same height is a good plan to avoid editing those default values.
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}
I want to have a GIF that stays in the centre of the page regardless of where the user scrolls. I want there to be the illusion that the image is 'floating above the page' rather than it being on it.
I believe CSS would be the way to go about doing this? Assuming a have an image called foo.gif, what would the CSS be to do this?
Without more specific guidance on what you want, and why, the best I can offer is:
img {
position: fixed; /* forces the element to stay fixed in relation to the viewport */
top: 50%; /* sets the top of the image 50% of the page height */
left: 50%; /* sets the left side of the image 50% across the page */
margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
margin-top: -93px; /* moves the image half its height 'up' the page */
box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating'
border-radius: 1em;
}
JS Fiddle demo.
It works with iiz's solution if you change position:absolute to position:fixed.
I created a jsfiddle for you to see.
I also included a drop shadow (from here) to make the image "float".
It's all a bit pasted together, but it will work and you can alter it in any way you wish...