I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine.
This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to correctly calculate the positions. However sadly this is the case and I think it may be related to my sidebar menu.
JSFiddle
Using jQuery(window).load(function(){ does not seem to resolve the issue. Adding the position fixed to the right side container does fix the issue but breaks the scroll and prefer not to use this method if it can be avoided.
I've take the time to add this project to a JSFiddle to help diagnoses this issue.
Dev Site
JsFiddle
Screenshot of Issue
HTML
Unrelated full code can be reviewed on the JsFiddle or my Dev Site.
<div class="amino-wrapper">
<div class="amino-wrapper-left"><!-- SIDE BAR --></div>
<main class="amino-wrapper-right">
<div class="grid">
<div class="grid-sizer"></div>
<img src="#">
<img src="#">
<img src="#">
</div>
</main>
</div>
CSS
Unrelated full code can be reviewed on the JsFiddle or my Dev Site.
img {
max-width: 100%;
height: auto;
}
.amino-wrapper {
height: 100%;
width: 100%;
}
.amino-wrapper-left {
background-color: #1c1c1c;
border-right: 1px solid #eee;
color: #eee;
height: 100%;
left: 0;
padding: 4rem 2rem;
position: fixed;
top: 0;
width: 300px;
}
.amino-wrapper-right {
margin-left: 300px;
overflow-x: hidden;
position: relative;
top: 0;
width: calc(100% - 300px);
}
.amino-wrapper-left header {
left: 0;
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 300px;
text-align: center;
}
.grid-sizer, .grid-item {
width: calc(100% / 3);
width: 33.33%
}
.grid {
overflow: hidden;
}
JavaScript
jQuery(window).load(function() {
jQuery('.grid').masonry({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
gutter: 0,
percentPosition: true
})
});
The following CSS fixed this practical problem for me:
body { overflow-y: scroll; }
Related
I have a div that acts as drawer that the user can pull down from the top of the window, that contains a dozen of buttons with some styling.
the code for expanding/collapsing that div while pulling on it is:
drawer.style.height = `${Math.min(drawerParams.maxheight,drawerParams.startHeight + event.y - drawerParams.startY)}px`;
It works fine on a computer, but I have serious lagging on a mobile phone. Here is a picture of the chrome devtools for mobile devices:
Here is the structure and CSS for that layout:
<style>
.main {
position: relative;
width: 100%;
height: 100%;
}
.drawer {
position: absolute;
top: 0;
width: 100vw;
background-color: lightgreen;
min-height: 7px;
z-index: 4;
}
.drawer-content {
position: absolute;
bottom: 7px;
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
.handle {
position: absolute;
width: 100%;
bottom: 0;
height: 7px;
}
</style>
<div class="main">
<div class="drawer">
<div class="drawer-content">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
<div class="button">button...</div>
<div class="button">button10</div>
</div>
<div class="handle">
<!-- some svg -->
</div>
</div>
</div>
If I set the initial drawer's position to "top:200px", I see that the content is already there, and when pulling on it from that position, I have the same performance issues.
I tried to use transform:translateY() like in this article:link, but it had no effect. (I assume it is because instead of having one translate from the begining of the transition to the end, I have one for each pixel of mouse movement..?)
So the questions are (from the picture):
1: is the browser repainting the div each time the drawer element's height changes?
2: why?
3: what can I change to avoid that?
I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
I am trying to create a push animation, where one element 'pushes' the other. Something like this:
I finally got it implemented, thanks to this answer. But now I have another problem. I want #slider, leftBox, and rightBox to have a height based on its content. I don't want to set a fixed height to it.
If I remove their heights, and because their heights will be based on its content, I cannot assign a fixed margin-top to #buttons, so I will also have to remove margin for #buttons. Now that I had to remove all that, the #slider is hidden.
Also, I don't want #buttons in #wrapper, I want it in its own div places elsewhere.
How can I have a push animation like the above GIF, with the height being dynamic?
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
position: relative;
}
#leftBox,
#rightBox {
width: 400px;
display: inline-block;
position: absolute;
}
#rightBox {
left: 400px;
}
#slider {
position: absolute;
width: 800px;
}
#buttons {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
<br/>See you
</div>
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
I'm pretty sure i managed to get what you want.
I have two JSFiddles for you, the first one is supported by all (decent) browsers, while the second one probably fits what you want better but is only supported in all browsers except for internet explorer.
The first one:
http://jsfiddle.net/Ljmxe5cx/
#leftBox,
#rightBox {
width: 400px;
float: left;
}
#slider {
width: 800px;
}
The boxes do not fill the container completely height-wise but as i said this should have wider support.
The second one: http://jsfiddle.net/hr8nzde8/
#leftBox,
#rightBox {
width: 400px;
}
#slider {
width: 800px;
display:flex;
}
The boxes do fill the containers completely in this version, this should also just generally cause less trouble if you decide to change some CSS for the boxes themselves
Here is the problem, I'm using the Skrollr plugin to make a Parallax effect / animation site to present a product for one of my clients.
Now I am having a big problem with positioning, I'd need to position elements just outside the viewport, but they must be attached to a fixed wrapper, and animate to the center of the div.
I'd love to do this only in css to avoid too much js (Skrollr uses the css code ton animate anyways).
What I have tried is mearly positioning my elements with +200% or -200%, this works well on smaller screens, but on huge ones, we still see those elements. So this isn't a good solution.
I've tried to use the css3 values VH and VW, but to get them positioned in the center of the screen is a problem after, and it seems buggy between Firefox and Chrome.
Here is also my testings, this one is using %:
http://natcom.fr/commun/sites_construction/animation/old
And this is using VH and VW:
http://natcom.fr/commun/sites_construction/animation
I thank you all in advance for any help you could give.
Here you go =), but one problem is when the inner-div gets the position absolute/relative it doesn't work anymore.
But i don't know your full html structure etc.
You could also take the object out of the inner-div?
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.outer-div {
left: -200px;
right: -200px;
position: absolute;
}
.object {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background: #0000FF;
}
.move-object {
transition-duration: 10s;
margin-left: -100px;
left: 50%;
}
.inner-div {
width: 500px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
height: 200px;
}
</style>
<script>
function moveit() {
var element = document.getElementById('testobj');
element.setAttribute('class', 'object move-object');
}
</script>
</head>
<body>
<button onclick="moveit();">Click</button>
<div class="outer-div">
<div class="inner-div">
<div class="object" id="testobj">
</div>
</div>
</div>
</body>
</html>
I am trying to vertically center some text over an image that appears on a mouseover. I have come to a solution that works with chrome (15.0.874.106) on a mac (10.7.2), but it seems to have issues in Safari (5.1.1), odd since they are both webkit based. I believe it also has the same problem in Firefox.
The text is vertically centered in relation to the parent div in chrome, but seems to center to the body or window in Safari. Am I doing something wrong or does anyone have a better solution?
jsbin: http://jsbin.com/iceroq
CSS:
.content {
width: 300px;
position: relative;
}
.content-text {
width: 100%;
height: 100%;
background: black;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: none;
}
HTML:
<div class="content">
<div class="content-image">
<img src="http://placehold.it/300x500/E01B4C" />
</div>
<div class="content-text">
Google
</div>
</div>
.content-text a {
color: white;
position: relative;
top: 50%;
margin-top: -0.5em;
}
JS:
$(document).ready(function() {
$('.content').hover(
function() {
$(this).children('.content-text').show();
}, function() {
$(this).children('.content-text').hide();
});
});
I edited your jsbin: http://jsbin.com/iceroq/3
The edits were all CSS changes to .content-text a. Making the link absolutely positioned and giving it a height allows you to know what margin-top to give it (half of the height).
.content-text a {
display: block;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
margin-top: -10px;
color: white;
}