How to remove random jump on image when zooming in on it - html

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.

Related

Need to use position:fixed but still need element in flow. How to do it?

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

CSS Sidebar Background Color Full Width

Hi I’m developing a site: HERE
My sidebar background color seems to be not getting in full width ,it has weird margin at right part. I have tried to manage by increase the size and move left by adjusting the padding at the left but the right side seems to be at is even if making the size of the background to 100% or 200%.
`
.sidebar .widgettitle {
margin-left: -50px; !important;
background:#606060;
padding:10px 0px 10px 25px;
text-transform:uppercase !important;
width: 210%;
max-width: 210%;
background-size: 210% auto !important;
height: auto;
}
`
It seems that css class container has a padding on both left and right at the value of 50 pixels. You can overwrite this in your own CSS file.
pic showing .container style in grid.css
The answer by Anmol Nandha is correct - it is caused by the .container element having padding-left and padding-right of 50px.
You could remove the specific styling in your grid.css, or if you don't want to edit framework files, you might consider adding a id attribute on the .container element, and cancel out the effects by setting padding-left and padding-right to 0.
Note that if you do that, then the contents in the left (main) part will stick to the edge. You might want to add padding-left: 50px on the .entry-content-wrapper to compensate for it.
Of course there is the option to tweak the CSS of your sidebar instead, but I have outlined the easiest way (in my opinion) to fix it.

Making images responsive in CSS

http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/