We Keep Coding

Position the siblings when using scaling with transform property

I am implementing the CSS transform property over a division and have a use case of moving the siblings which are located next to it as per the scaling.
I tried adjusting the positions but did not work and thought this is how the transform functions. I might be wrong so want to give a one more try here.
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1 /*Not sure why I had to do this too*/
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
Please take a look at this playground where the child element is just staying there but I need it to move towards the right
https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100

.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childA:hover + .childB {
transform: translateX(calc(22rem * 4));
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
I'm not sure how much you're wanting to move it, or where.. Here is code to make it move on the hover of your scaling element. I'm using the adjacent CSS combinator to make this happen. When you're hovering ChildA, the adjacent ChildB can be given a set of properties.
As for why you had to put a z-index on .childB was because transforms create a new stacking context. Even though .childA comes before .childB in your HTML, the transform essentially brings .childA to a new layer. Therefore, you have to set .childB's z-index.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Here's some reading about stacking context. It's really important to understand how these work and what creates new ones.
edit You can calc the translate based off the element your hovering and it will consistently move. I added 2rem to the width because you have 1rem of padding on either side. 22rem * 4 instead of 5 because scale(1) = 22rem.

If you are able to adjust your html structure you can easily do this:
.parent{
display:flex;
}
.leftDiv{
background:yellow
}
.childA{
padding: 1rem;
background: lightblue;
position:relative;
}
.childA:hover {
transform: scale(2);
transform-origin:top left;
z-index:0;
}
.childA:hover .childB {
transform: scale(0.5);
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
position:absolute;
left:100%;
top:0;
bottom:0;
white-space:nowrap;
}
<div class='parent'>
<div class='leftDiv'>I will just stay here</div>
<div class='childA'>Child A scales
<div class='childB'>I want to move when scaled</div>
</div>
</div>

Transform affect like absolute position, so you increase width and with calc method you can set how times it increas;
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
width: calc(20rem * 5);/*here you can change 5*/
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>

Reveal/slide image using clipaths

I am looking to create an animation that slide an image but not using the traditional slide CSS animations, this not achieve the result I am looking for, so basically the animation contains 2 images, the two images are similar (contains the same content as the same sizes) but colors are inverted.
The code I implemented only slide the image to left or right, I'd like to do the same animations but keeping the image in the same place, like when it slides it reveals the background image content as it progress but colors inverted.
I was thinking to apply the animation to clipath crop rather than actual image, below is a working jsfiddle of the issue I am facing.
$(".btn").click(function() {
$(".reveal").toggleClass("show");
})
html,
body {
background-color: #333;
color: #fff;
width: 100%;
height: 100%;
text-align: center
}
.reveal {
overflow: hidden;
position: relative;
display: inline-block;
}
.reveal:after {
content: " ";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/UBOmQ7T.jpg');
z-index: 2;
transition: all 2s ease;
}
.reveal.show:after {
left: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reveal">
<img src='https://i.imgur.com/R6978y3.jpg' />
</div>
<br />
<button class="btn">Reveal!</button>
https://jsfiddle.net/v7fte3m8

You can do this with multiple background. The trick is to make background-clip of one of them to be content-box then adjust the padding to create the reveal effect:
.box {
width:300px;
height:200px;
box-sizing:border-box;
background:
url('https://i.imgur.com/UBOmQ7T.jpg'),
url('https://i.imgur.com/R6978y3.jpg');
background-clip:
content-box,
padding-box;
background-size:cover;
background-position:center;
transition:1s all;
padding-left:0;
}
.box:hover {
padding-left:300px;
}
<div class="box">
</div>
In case you will always have image with inverted colors you can consider the original image and the invert() filter:
.box {
width:300px;
height:200px;
box-sizing:border-box;
background:
url('https://i.imgur.com/R6978y3.jpg');
background-size:cover;
background-position:center;
}
.box:before {
content:"";
display:block;
height:100%;
background:inherit;
background-clip:content-box;
box-sizing:inherit;
transition:1s all;
padding-left:0;
filter:invert(1);
}
.box:hover:before {
padding-left:300px;
}
<div class="box">
</div>

Print modal content as full A4 page

I am trying two things :
Show content on a modal as how it would appear on an A4 page
windows.print() the modal on an A4 page through major browsers
Following is my CSS:
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
margin:0 !important;
padding:0 !important;
height:100% !important;
visibility: hidden;
}
.page .subpage .col-md-12,.col-lg-12{
float:left;
width:100%;
}
.page .subpage {
padding: 1cm;
border: 5px black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
position:absolute;
}
.page {
visibility: visible;
}
}
Here's how the modal looks:
But this is how it looks on calling window.print() on button click:
What am I doing wrong here? Relative CSS newbie, have looked at a bunch of SO questions and other resources, but can't seem to figure this out.
UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class="page") to cover the A4 page width. Don't think its the best solution, also can't get height to stretch the entire 297mm; height still as much as shown in second image. The 140% looks fine on a pdf saved through Chrome, is cutoff (understandably) in firefox and shows up as blank pdf in IE. Updated CSS:
#media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

Please try this
#media print{
body * {
visibility: hidden;
}
#page, #page * {
visibility: visible;
}
#page {
position: absolute;
top: 0;
left: 0;
}
}

I'd write a comment but I can't, so answer box it is. tl;dr, you need to provide more code or reproduce this issue in a place where we can see it.
I put your code into plain page with just a div with class page and nested a div with class subpage and there are some padding issues and the print view looks nothing like the web view.
Your min-height: 297mm; wasn't necessary and was adding extra space as it doesn't align with your height setting for .subpage.
Your position:absolute; squished your .subpage in print view.
But with those two tweaks, your css, with just simple divs in html, works about fine. I suspect something else on your page has conflicting dimensions, but again, without a reproduction on fiddle or something, we can't see it.
PS: I saw this other post from some time ago and there's a DEMO in there. It looks promising: CSS to set A4 paper size

I have updated an jsfiddle example to fit your needs
Here is css code
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background: yellow;
}
}
Here is html:
<div>
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>
<hr />
<div id="printSection">
<div id="printThis">
This should BE printed!
</div>
<div id="printThisToo">
This should BE printed, too!
</div>
</div>
and a javascript code to call print:
document.getElementById("btnPrint").onclick = function() {
window.print();
}
http://jsfiddle.net/95ezN/1459/

Center an element

How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.

DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}

How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}

You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>

Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}

Centring the whole web page (on a really wide site)?

I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?

You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}

You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/