I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;
Related
My engagement-filtercontainer div used to sit directly above my engagement-graphcontainer unless it was expanded via button click, in which case it drops down into the graphcontainer overlapping. Now the engagement-filtercontainer has grown in size because of additional content and it overlaps my graph container which contained my svg. I need it to dynamically not do this even if my filter increases in size.
I have some divs that are contained in this order:
<div class="Engagement-Container">
<div class="Engagement-Body">
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer"
</div>
<div class="Engagement-GraphContainer"
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
</div>
</div>
</div>
</div>
Notice that the engagement-filtercontainer and graphcontainer are both within the engagement-graph div, and that my svg is contained within the graphcontainer.
In the below image you can see that the filter now with more content expands into the area (I have hidden with css thats why im showing it in dev mode, ive tried various methods to work around this but I think i need a definitive solution.
The CSS:
engagement-graph(parent div)
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
#include tablet() {
width: 65%;
}
}
Engagement-graph-container (contains the svg graph that i want to protect from unwanted overlap)
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
#include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
#include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
Filter-container (that is overlapping)
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
visibility: hidden;
&--Visible {
transform: translateY(0) !important;
}
#include landscape {
transform: translateY(-436px);
}
}
I wish for the filter to work as usual so when its expanded it will appear into the screen but when it is not, I don't want it encroaching upon the graph, no matter how large it gets. When the filter was smaller it was fine it never came into the screen, so it must not be dynamic in how it is sized.
Thank you if you can help.
Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.
Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/
Any help is greatly appreciated!
You issue is background-attachment
Chris Ruppel writes:
[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.
The culprit is your header background image.
it is fixed and is consistently getting repainted on scroll behind your page content.
In you CSS file you have this
.section-parallax {
background-attachment: fixed;
}
If you remove that then you smooth scrolling without trouble but you loose the parallax effect.
If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.
for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:
/*
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function() {
$(window).scroll(function(e) {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
$('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
$('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
}
});
body {
background: rgba(230, 231, 232, 1);
height: 4600px;
}
/* foreground (balloons/landscape)*/
div#parallax-bg-1 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3 {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div {
background-repeat: no-repeat;
position: absolute;
display: block;
overflow: hidden;
}
div#bg-3-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
width: 529px;
height: 757px;
top: -100px;
right: 100px;
}
div#bg-3-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
width: 603px;
height: 583px;
top: 1050px;
right: 70px;
}
div#bg-3-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
width: 446px;
height: 713px;
top: 1800px;
right: 140px;
}
div#bg-3-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
width: 1104px;
height: 684px;
top: 2800px;
right: 0px;
}
/* middle layer clouds */
div#parallax-bg-2 div {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-2-1 {
top: 100px;
left: -310px;
}
div#bg-2-2 {
top: 270px;
right: -70px;
}
div#bg-2-3 {
top: 870px;
left: -300px;
}
div#bg-2-4 {
top: 1120px;
right: -130px;
}
div#bg-2-5 {
top: 1620px;
left: 140px;
}
div#bg-2-6 {
top: 720px;
left: 340px;
}
/*background layer clouds */
div#parallax-bg-1 div {
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-1-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 200px;
right: 450px;
}
div#bg-1-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 420px;
left: 0px;
}
div#bg-1-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 850px;
right: -290px;
}
div#bg-1-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 1350px;
left: 200px;
}
div#bg-1-5 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 1200px;
left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="parallax-bg-3" class="parallax-bg">
<div id="bg-3-1"></div>
<div id="bg-3-2"></div>
<div id="bg-3-3"></div>
<div id="bg-3-4"></div>
</div>
<div id="parallax-bg-2" class="parallax-bg">
<div id="bg-2-1"></div>
<div id="bg-2-2"></div>
<div id="bg-2-3"></div>
<div id="bg-2-4"></div>
<div id="bg-2-5"></div>
<div id="bg-2-6"></div>
</div>
<div id="parallax-bg-1" class="parallax-bg">
<div id="bg-1-1"></div>
<div id="bg-1-2"></div>
<div id="bg-1-3"></div>
<div id="bg-1-4"></div>
<div id="bg-1-5"></div>
</div>
</body>
</html>
In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so
.element {
position: relative;
}
.elemnt:before {
content: ' ';
position: fixed; /* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; /* creates a new paint layer */
z-index: -1;
}
And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.
Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.
Resources:
https://www.w3.org/TR/css-will-change-1/
http://caniuse.com/#feat=will-change
https://www.youtube.com/watch?v=QU1JAW5LRKU
https://developers.google.com/web/tools/chrome-devtools/
From looking at your site, there are a few parts of it that are slowing down the rest. Here are a few easy ways to speed it up.
Use a CDN
A CDN (Content Distribution Network) ensures that everything is loaded faster because it doesn't depend on your own Wordpress server and will allow access times to be consistent across the world. There are a few good ones out there like CloudFlare and Incapsula. Here is an article listing a few more.
In addition, you can host your images (I see that one is coming from Wikipedia) on a slightly faster
Compress images
This step is as easy as converting photos to a .jpg. JPEG automatically compresses the data by getting rid of unnecessary information in the photos. You can also use compression software to get the file size down.
Leverage caching
Use a caching plugin (there are tons of great ones for Wordpress) to cache data on your server and can really speed up things for your site.
Search for more ways to optimize
Use tools like Pingdom and Google PageSpeed Insights to identify bottlenecks and resolve them.
Hope this helps you!
Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}
Here is the HTML code
.Box {
position: absolute;
bottom: 60px;
right: 0px;
left: 65px;
display: block;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
When I view this box on larger resolution (2560*1440) it expands both right side and left side. I tried using the width attribute which fixes the box from right side but the fix width hinders the responsiveness and the box width doesn't change with the length of the text within.
How can I make this Box div stay in same position in any screen size using either CSS or Javascript, also making it responsive as per the length of the content in it?
Just need to remove the right and max-width and then the width will adjust based on the content.
.Box {
position: absolute;
bottom: 60px;
left: 65px;
display: block;
background-color: #fedd2d;
padding: 15px;
opacity: 0.8;
}
right:0; seems to be in the way. it will pull container all the way to right side, but max-width is set too, so it stops at 60% of width as set. You rules are not coherent together.
since absolute, display is not really needed.
unless i missunderstand and max-width is in the way , ... or else ?
.Box {
position: absolute;
bottom: 60px;
left: 65px;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
`
I have 2x Divs and 1x Img with the following CSS
#StageDiv {
position: absolute;
left: 50%;
margin-left: -200px;
}
#LogoDiv {
position: absolute;
margin-top: 135px;
left: 50%;
margin-left: -500px;
}
#logoimg {
/* max-width: 75%; /* */
width: 1000px; /* */
}
inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes
http://jsfiddle.net/3KLUW/1/
Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.
Thoughts?
Edit:
window.onresize=function(){
var img = document.getElementById('logoimg');
var width = img.offsetWidth;
var div = document.getElementById('LogoDiv');
div.style.marginLeft= "-" + width/2 + "px";
};
still would be interested in a CSS solution
If you can get away with a wrapper div for the whole logo:
<div id="logo">
<div id="StageDiv">...</div>
<div id="LogoDiv">
<img id="logoimg" src="..." />
</div>
</div>
Then you can set the width and max-width on it, and use margin: auto to center it on the page:
#logo {
width: 1000px;
max-width: 75%;
margin: auto;
position: relative;
}
And positioning the other elements become much easier:
#LogoDiv {
top: 135px;
position: absolute;
}
#StageDiv {
text-align: center;
}
#logoimg {
width: 100%;
}
The margin: auto and text-align: center together give us the automatic margin you wanted.
Updated fiddle: http://jsfiddle.net/3KLUW/2/
The canvas will need to be scaled though, as you said on the question.