For a small project, I experience a behaviour in Firefox (both mobile and desktop) that I believe is a bug : using chromium I don't have the bug and inspecting the html triggers a repaint and solves the problem.
In an attempt for a responsive design I have a side panel that is absolutely positionned and slides in and out. In this side panel, I am willing to have a fixed element. The fixed position is only specified for bottom, and the fixed element should therefore translate sideways with the containing panel. In firefox the position is however not updated properly, and the fixed element does not translate lateraly. Searching, I came up with a hacky workaround, but this fix is not perfect, and introduces tiny bugs where other browsers didn't have any. I therefore also desigend a test to check whether the browser experiences the bug, so that I only use the hack when necessary. Here is a minimal example derived from my code.
/* Fix to programatically force fixed element repositionning */
var trigger = document.getElementById('trigger');
var container = document.getElementById('container');
var child = document.getElementById('child');
function from_and_back(evt) {
if (container.children.length) {
container.removeChild(child);
setTimeout(function() {
container.appendChild(child);
}, 300);
}
}
trigger.addEventListener('mouseenter', from_and_back);
trigger.addEventListener('mouseleave', from_and_back);
/* Simulate the bug to check whether the browser experiences it */
var bug_status = document.getElementById('bug-status');
bug_status.innerText = (function() {
//create an absolutely positionned element
var abs = document.createElement('div');
abs.style.position = 'relative';
abs.style.left = '0px';
//create a fixed element to put inside
var fix = document.createElement('div');
fix.style.position = 'fixed';
//insert it into the document
abs.appendChild(fix);
document.body.appendChild(abs);
//test
fix.getBoundingClientRect(); /************ this line *************/
abs.style.left = '20px';
var fix_left = fix.getBoundingClientRect().left;
var abs_left = abs.getBoundingClientRect().left;
//remove test elements from the document
document.body.removeChild(abs);
//send the result
return abs_left !== fix_left;
})();
/* Wrapper class to trigger the effect */
.trigger {
width: 220px;
border: 1px solid #000;
display: inline-block;
}
.trigger:hover .container {
left: 200px;
}
/* Absolutely positionned element */
.container {
position: relative;
width: 20px;
height: 20px;
left: 0px;
background: #aaa;
transition: all .25s ease-out;
}
/* Fixed element inside the absolute one */
.child {
position: fixed;
width: 20px;
height: 20px;
background: #aaa;
top: 100px;
}
<!-- Display the bug test result -->
Your browser has the bug : <span id='bug-status'></span>
<br/>
<br/>
<div class="trigger">
<!-- Demonstrate the error without any fix -->
<span>Reference</span>
<br/>
<div class="container">
<div class="child"></div>
</div>
</div>
</div>
<!-- Apply the fix fix -->
<div class="trigger" id="trigger">
<span>Fixed</span>
<br/>
<div class="container" id="container">
<div class="child" id="child"></div>
</div>
</div>
Now the questions :
Obviously my workaround is not fully satisfactory : the smooth transition is lost, and in the example, if the mouse moves fastly in and out of the trigger, the fixed element remains dangling in the middle. Do you have ideas for a better workaround, or design with the same behaviour without the bug ?
In the javascript test, I marked a line. Removing the line makes the test pass on Firefox. I don't get why, but perhaps this could be used to workaround the bug less roughly ?
A workaround which might give the same result you want is to move the .child outside the moving container, and apply the same transformation on trigger:hover, just using margin-left or even transform: translateX(200px) to not mess with the fixed positioning.
(Using transform instead of positioning on the container actually would solve the rendering issue, but sadly it also makes the position:fixed relative to the transformed element instead of the viewport.)
/* Wrapper class to trigger the effect */
.trigger {
width: 220px;
border: 1px solid #000;
display: inline-block;
}
.trigger:hover .container {
left: 200px;
}
.trigger:hover .child {
margin-left: 200px;
}
.container {
position: relative;
width: 20px;
height: 20px;
left: 0px;
background: #aaa;
transition: all .25s ease-out;
}
.child {
position: fixed;
width: 20px;
height: 20px;
background: #aaa;
top: 100px;
margin-left: 0;
transition: all .25s ease-out;
}
<div class="trigger">
<div class="container">
</div>
<div class="child"></div>
</div>
Related
I have a wrapper container with a fixed height and width, and is set to overflow: scroll. Inside, I have a bunch of other content that is accessible by scrolling around to it.
I also have a zoom-in and zoom-out button. The buttons apply a transform: scale(x) to the content, which seems to work just fine. I've set the transform-origin to be the centre of what's visible in the wrapper by checking the wrapper's scrollTop value.
My issue, however, is that when the content is zoomed in on, it is cut off by the wrapper (expected) but is inaccessible by scrolling (unexpected).
I've created an example of my issue with a JSFiddle, and will also post the code here:
let zoom = 1;
function fnZoom(zoomModifier) {
zoom += zoomModifier;
let scrollTop = document.getElementById("a").scrollTop;
document.getElementById("b").style.transformOrigin = `150px ${scrollTop + 100}px`;
document.getElementById("b").style.transform = `scale(${zoom})`;
}
#a {
margin: 0 auto;
overflow: scroll;
width: 300px;
height: 200px;
border: 3px solid red;
overflow: scroll;
}
#b {
transform: scale(1);
transform-origin: 0 0;
width: 300px;
height: 20000px;
background-color: lightyellow;
}
#c {
margin-top: 100px;
width: 100%;
background-color: skyblue;
}
<html>
<body>
<div id="a">
<div id="b">
Test
<p id="c">
middle
</p>
</div>
</div>
<button onclick="fnZoom(0.1)">zoom-in</button>
<button onclick="fnZoom(-0.1)">zoom-out</button>
</body>
</html>
Notice that if you click on the zoom-in button, it will zoom the content correctly, but the cut-off portion of the content is inaccessible by scrolling.
Is there any way to fix this so that the content can be scrolled to?
A couple things to note:
Cannot use jQuery
Would prefer CSS-based solutions of JavaScript solutions, but will accept either that works
I'd like to have it when I click an image that it centers in the viewport (like a lightbox effect).
I've set up a pen here http://codepen.io/emilychews/pen/OpXKGd and tried work out the best way to do this but I seem to have hit a wall.
I've included multiple elements in the demo because I'd like it so it uses the window as it's centering container, not just the parent element. I'll be using this on a wordpress site so saying just add a wrapper isn't viable for me.
Also if you look at the demo, at the moment the elements scale up smoothly and i'd like to have it align centrally in the window object as part of the transition when it scales up.
I appreciate this may only be possible with JS / jQuery and i have included some in my example.
My code for quick reference is:
HTML
<div class="wrapper">
<div class="holder image1">Image 1</div>
<div class="holder image2">Image 2</div>
<div class="holder image3">Image 3</div>
<div class="holder image4">Image 4</div>
<div class="holder image5">Image 5</div>
</div>
CSS:
.holder {
width: 20vw;
height: 400px;
background: red;
position: relative;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
}
// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY
.fullsize {
background: blue;
z-index: 2;
position: relative;
transform: scale(1.75);
transform-origin: center center;
transition: all .75s ease-out;
}
jQuery:
$(document).ready (function(){
$('.holder').click(function() {
$( this ).toggleClass('fullsize');
$( this ).css('z-index', '+=1');
});
});
Any help / solution would be amazing.
Emily :)
I believe what you're looking for is to set a left property on the full size image. Note that you will also need to use position: absolute in order to offset each element by the same amount (centralising them).
.fullsize {
position: absolute;
left: 40vw;
}
I've created an updated CodePen showcasing this here.
Note that you also may want to give them a higher z-index, as the .fullsize elements are sometimes obscured behind the regular images.
Hope this helps! :)
Try this. It's a little jumpy and needs some fiddling, but it gives you what you want.
Change .holder to:
.holder {
width: 20vw;
height: 100px;
background: red;
position: static;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
z-index:0;
transform-origin: top left;
}
Change .fullsize to:
.holder.fullsize {
background: blue;
z-index: 200;
transform: scale(1.75);
transition: all .75s ease-out;
position:absolute;
}
and change your JQuery to
$(document).ready (function(){
$('.holder').click(function() {
var $scaleFactor = 1.75;
$( this ).toggleClass('fullsize');
var $winWidth = $(window).width();
var $myWidth = $(this).width();
var $newWidth = $myWidth*$scaleFactor;
var $left = $winWidth/2-$newWidth/2;
$(".holder").text($left);
$(this).animate({
left:$left+"px"
},200);
});
});
Setting the scaling in the JQuery instead might give you a smoother transition.
plz help thanks in advance...sorry for bad english ... want a animation effect with bouncing when div1 and div2 goes up and down
I have made main div in which there are 2 div... div1 and div2.
I want to make it like, when someone click on button.
That time div1 should slowly move out of the screen from top side with animation (slowly moving out of the top side screen).
And at the same time div2 should take a place 20px from top of screen.
I have setup almost everything but I'm not able to give it a animation effect no wonder why but transition effect or anything not working on it. I want to do it with JavaScript code if possible I less use jQuery or etc.
I am happy to use another approach, like instead of using margin-top to move div1 out of screen and div2 to top side if you recommend any other css or javascript, that's fine. I just want the animation effect in which slowly div1 and div2 move to top side.
function myFunction1() {
document.getElementById("div1").style.marginTop = "-110px";
document.getElementById("div2").style.marginTop = "20px";
}
function myFunction2() {
document.getElementById("div1").style.marginTop = "0px";
document.getElementById("div2").style.marginTop = "0px";
}
#main {
background-color: grey;
height: 1000px;
width: 100%;
margin: 0;
padding: 0;
}
#div1 {
background-color: red;
height: 100px;
width: 100%;
margin-top: 0px;
position: relative;
}
#div2 {
background-color: green;
height: 100px;
width: 100%;
margin-top: 0px;
position: relative;
}
<div id="main">
<div id="div1"> </div>
<div id="div2"> </div>
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
</div>
Just add a CSS transition to your elements. You can change the parameters to taste. I believe this is the cleanest and most efficient solution.
EDIT: As per OP's request in the comments, I've shown an example of a transition function which emulates a slight "bounce" effect on the transition using extreme values. You can quickly create your own transition function and test it in real time using online tools (ex: cubic-bezier.com) or the Chrome developer tools (you can click on a transition function for an element you are inspecting to edit the function in real time). Note that this functionality is currently not universally supported (see: Safari Bug 45761)
Transitions on MDN
function myFunction1() {
document.getElementById("div1").style.marginTop = "-110px";
document.getElementById("div2").style.marginTop = "20px";
}
function myFunction2() {
document.getElementById("div1").style.marginTop = "0px";
document.getElementById("div2").style.marginTop = "0px";
}
#main {
background-color: grey;
height: 1000px;
width: 100%;
margin: 0;
padding: 0;
}
/* *** THIS IS NEW *** */
#main div {
-webkit-transition: margin 1s cubic-bezier(1,.7,.49,1.7);
transition: margin 1s cubic-bezier(1,.7,.49,1.7);
}
/* *** END NEW *** */
#div1 {
background-color: red;
height: 100px;
width: 100%;
margin-top: 0px;
position: relative;
}
#div2 {
background-color: green;
height: 100px;
width: 100%;
margin-top: 0px;
position: relative;
}
<div id="main">
<div id="div1"> </div>
<div id="div2"> </div>
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
</div>
I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set negative margin values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width:
<!DOCTYPE html>
<html>
<head>
<style>
.clap {
position:relative;
margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
color:#f00
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
</center>
</body>
</html>
I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a \style command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScript code within its formulas, so you see why this must be CSS-only. I know it's possible with scripting. Is it possible with CSS, or is my endeavor hopeless?
Update: Thanks to a suggestion from #Daiwei, I think I'm on the road to the right solution. Thanks for all your answers. Here is the revised code:
.clap {
position:absolute;
display:inline-block;
transform: translate(-50%,0);
color:#f00 // for contrast
}
I'd love to show you the results, but I can't upload a picture. Sorry.
Another update: The solution I presented above works best in an HTML/CSS context, but it breaks in a MathJaX array, matrix, or similar tabular environment. Specifically, if the element is too long, it clips on the left side. Relative positioning moves the element halfway to the left but leaves a gaping space where it used to be! Any ideas for patching it up?
One pure CSS solution is to use transform.
element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Notes:
You can use top: 50%; for vertical and left: 50%; for horizontal.
You would then use translateY(-50%) for vertical and translateX(-50%) for horizontal centering.
You can also use this trick to align elements to the bottom or right of it's parent, like in a table-cell by using 100% instead of 50% in the css.
If you want to support older browsers, then you'll need to use prefixes for transform. I highly recommend autoprefixer in your workflow.
As the size of the element is only known after it has been styled, how should the style be able to use it? Imagine this: Some element has a width of 200% of it's own width (=double size than "normal") set in CSS. One of it's children has its width set to 100% of the parent (=our element). The default width of an element is determined by its content. Content's of our element are as width as the element itself. Our element has no width yet however, as we're waiting for it to get some default, so we can double that one. Result: Nothing will ever get any width.
Therefore: What you're trying to do is not possible. But CSS3 has its calc, maybe you can get closer to what you want to acheive using it?
I don't know if this is what you wanted to do, but here is a demo: http://cdpn.io/bgkDf
HTML
<div class="container">
<div id="box-left"></div>
<div id="box-overlap">
<div id="box-overlap-inner"></div>
</div>
<div id="box-right"></div>
</div>
CSS
.container > div {
height: 50px;
float: left;
}
#box-left {
width: 40%;
background-color: red;
}
#box-right {
width: 60%;
background-color: green;
}
#box-overlap {
width: 0;
}
#box-overlap-inner {
position: relative;
z-index: 10;
height: 50px;
width: 50px;
transform: translate(-50%,0);
background-color: rgba(0,0,255,.5);
}
"Using element's own width for calculation or percentage" In general:
(Maybe not the best solution for your issue, but an answer to your question)
At the moment,the attr function doesn't work in Chrome. That would have been nice.
But you can use variables, if you either set the parent attribute yourself, or are able to use a predefined one. That way you can use the calc() function to calculate your child attribute.
Here is an example, using the browser defined viewport size, to calculate the width of an element:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 33vw;
}
.clap {
display:inline-block;
width: calc(var(--module-size) / 2);
color:#f00;
border: 1px solid;
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890
<span class="clap">1234567890</span>
1234567890</span>
</center>
</body>
This can be used in many interesting ways, to streamline your CSS. For instance with the #media style...
And if someone (like me) was trying to center the element by its parent, use this simple style:
.clap {
position:absolute;
left: 50%;
transform: translate(-50%,0);
}
What about converting the content to divs and enclose each within another div to use
margin: auto
?
Example (each super div within its own colour and shifted a little in height for clarity):
<html>
<head>
<style>
.dl
{
position: absolute;
left: 0px;
top: 0px;
max-width: 50%;
width: 50%;
text-align: left;
background: red;
opacity: 0.5;
}
.dls
{
margin: auto;
}
.dc
{
position: absolute;
left: 25%;
top: 10px;
max-width: 50%;
width: 50%;
text-align: center;
background: green;
opacity: 0.5;
color: white;
}
.dcs
{
margin: auto;
}
.dr
{
position: absolute;
right: 0px;
top: 20px;
max-width: 50%;
width: 50%;
text-align: right;
background: blue;
opacity: 0.5;
color: white;
}
.drs
{
margin: auto;
}
.overall-width
{
position: absolute;
left: 0%;
width:100%;
height: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="overall-width">
<div class="dl">
<div class="dls">
1234567890
</div>
</div>
<div class="dc">
<div class="dcs">
1234567890
</div>
</div>
<div class="dr">
<div class="drs">
1234567890
</div>
</div>
</div>
</body>
</html>
I'm building an html/javascript theme designer for a CMS. Elements are positioned absolutely and can be moved/resized via the mouse, and/or contain editable text whose height may be determined by the number of lines. However I'm running into the problem where a parent element's height does not expand to include its absolutely positioned children.
Minimal code (also on JSFiddle here):
<style>
div.layer { position: absolute }
div.layer1 { width: 400px; border: 1px solid #ccc }
div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue }
</style>
<div class="layer layer1">container should expand to the bottom of the child.
<div class="layer layer2" contentEditable>Child with<br/>editable text.</div>
</div>
A CSS-only solution is ideal and I'm not concerned about older browsers. But I'm mostly looking for any way to prevent the need for javascript to run on every page using a created theme to set their height (since pages with the same theme may have different amounts of text).
There are already a few similar questions but their accepted answers (e.g. don't use absolute positioning) won't work in my case. Unless there is a way to have multiple layers of draggable/resizable elements without them being position: absolute.
I found a pure-css solution! In summary:
Set the child elements to position: relative instead of absolute.
Set their margin-right to be their negative width, to give them zero effective width, and make them float: left to keep them all on the same line. This makes all of them have an origin of 0, 0.
Then we can set their left and margin-top properties to position them absolutely within their parents. Note that margin-top is required instead of top because top won't push down the bottom of the parent element.
JSFiddle here or code below:
<style>
div.layer { position: relative; float: left; }
div.layer1 { width: 400px; border: 1px solid black }
div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
Container
<div class="layer layer2" contentEditable>Edit me</div>
<div class="layer layer3">
<div class="layer layer4" contentEditable>Edit me</div>
</div>
</div>
absolute positioned elements are removed from the flow, thus ignored by other elements
the only way you have is to set the child position to position:relative, in this way it is possible to move it using right,left,top and bottom and also change parent display to display:inline-block
If you want keep the children absolutely positioned, you can use the following script to resize the container : http://jsfiddle.net/6csrV/7/
var layer1 = document.getElementsByClassName('layer1'),
i = 0, len = layer1.length, childHeight;
for(; i < len; i++) {
childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight;
layer1[i].style.height = childHeight + 'px';
}
document.addEventListener('keyup', function(e) {
if(e.target.className.indexOf('layer2') !== false) {
e.target.parentNode.style.height = e.target.clientHeight + 'px';
}
});