Develop Reference

Change element padding based on element height and parent height with javascript

I need to change the size of h1's top padding based on the height of h1 and it's parent.
Padding top would be (h1's height - h1's parent height) / 2
I still don't understand why the JavaScript code isn't working.
window.onload = function() {
const h1 = document.getElementsByTagName("h1")[0];
h1.innerHTML = document.title;
h1.style.paddingTop = (((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString());
console.log(((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString());
}
header {
border-bottom: solid 1px black;
position: fixed;
height: 10vh;
width: 100%;
}
h1 {
margin: 0px;
margin-top: auto;
}
<header>
<h1>Text</h1>
</header>

Simply because you have not used a unit to identify the value of evaluated padding. Additionally add display: block to the h1 style. Checkout this JSBin demo.
window.onload = function() {
const h1 = document.getElementsByTagName("h1")[0];
h1.innerHTML = document.title;
h1.style.paddingTop = (((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString())+'vh'; // Use unit.
console.log(((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString());
}
header {
border-bottom: solid 1px black;
position: fixed;
height: 10vh;
width: 100%;
}
h1 {
margin: 0px;
margin-top: auto;
display: block;
}
<header>
<h1>Text</h1>
</header>

Container div doesn't take 100% height no matter what [duplicate]

This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
There are at least 2000 questions about this but in my particular scenario nothing I've tried worked.
My page consists of 2 nested divs (external, contents)
contents is clickable and should cover 100% of the document
there's also a bunch of absolutely positioned divs inside contents: those are draggable by a user and can be in any position.
If there are enough of these divs, scrollbar appears. And my contents is limited by the current browser window height, so when I start to scroll it's cut:
Here's a codepen: https://codepen.io/sergey-kritskiy/pen/qBbqQJv
I've tried...
setting min-height of everything one by one and all together;
adding flex on everything; float like this, float like that;
use %, vh, vmax;
When the scrollbar is made by a bunch of 'normal' divs, min-height works fine, but with these absolute guys I'm not in luck. I probably miss something obvious and I'd appreciate solutions.
Update:
There was an answer from someone that suggested to add position: relative; overflow-y: auto to contents and it worked in my case! But the answer was removed before I was able to ask why exactly that worked.

Solution 1
wrap items in another div called sidebar.
i am appending items in .sidebar instead of #content.
you can use grid in #external like i have used in css
var target = document.querySelector(".sidebar");
for (var i = 1; i <= 30; i++)
{
(function(i)
{
var div = document.createElement('div');
target.appendChild(div);
div.innerHTML = 'el ' + i;
div.className = 'item';
div.style.left = '5px';
div.style.top = 5 + ((i-1) * 105) + 'px';
div.addEventListener('click', function (evt) {
console.log("clicked el " + i);
evt.stopPropagation()
});
})(i);
}
target.addEventListener('click', function () {
console.log("content click");
});
body,
html {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
margin: 0px;
background-color: white;
}
.item {
position: absolute;
background-color: blue;
width: 200px;
height: 100px;
border: 1px solid black;
}
#external {
background-color: #5b6f59;
display: grid;
grid-template-columns: 230px 1fr;
}
#content {
background-color: #5b6f59;
position: relative;
}
#external,
#content {
width: 100%;
height: 100%;
}
/** Added CSS **/
.sidebar {
height: 100vh;
overflow-y: auto;
position: relative;
}
<div id="external">
<div class="sidebar"></div>
<div id="content"> </div>
</div>
Solution #2
var target = document.querySelector("#content");
for (var i = 1; i <= 30; i++)
{
(function(i)
{
var div = document.createElement('div');
target.appendChild(div);
div.innerHTML = 'el ' + i;
div.className = 'item';
div.style.left = (Math.random()*100) + 'px';
div.style.top = 5 + ((i-1) * 105 + Math.random()*100 - 50) + 'px';
div.addEventListener('click', function (evt) {
console.log("clicked el " + i);
evt.stopPropagation()
});
})(i);
}
target.addEventListener('click', function () {
console.log("content click");
});
body,
html {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
margin: 0px;
background-color: white;
}
.item {
position: absolute;
background-color: blue;
width: 200px;
height: 100px;
border: 1px solid black;
}
#external {
background-color: red;
}
#content {
background-color: #5b6f59;
height: 100vh;
overflow-y: auto;
position: relative;
}
#external {
width: 100%;
height: 100%;
}
<div id="external">
<div id="content">
</div>
</div>

How to center fixed dynamic width and height element in the middle of page?

I have draggable element which has dynamic height and width. It's change based on content.
I have this to center fixed element, here is HTML :
<div class="option_dialog" id="profile">
<div class="close_option">Profile <img onclick="document.getElementById('profile').style.display='none';body.style.overflow='auto'" style="float:right;height:20px" src="img/close.PNG">
</div>
<div class="dialog_content" id="profile_content" style="overflow:scroll;max-height:400px">
</div>
<button onclick="MyWall()" class="common_btn" style="width:98%">My Wall</button>
</div>
css :
.option_dialog {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: fixed;
margin: auto;
display: none;
width: fit-content;
height: fit-content;
padding: 0;
background: #e4e4e4;
}
.dialog_content {
margin: 2px 2px 1px 1px;
border: 2px solid #f5f5f3;
border-radius: 0px;
overflow: scroll;
max-height: 350px;
}
js
function profile() {
var x = document.getElementById("profile");
x.style.display = "block";
x.style.zIndex = "1000";
document.body.style.overflow = "hidden";
}
Draggable Code : *I'm using touchpunch to enable moving in touch devices!
$(function() {
$(".option_dialog").draggable({
handle: ".close_option",
stack: ".option_dialog",
distance: 0
});
});
It's work fine in Desktop and Smart Phones but it's not centering in some mobile phones, in addition the width and height of it will fill the whole screen. I googled but found nothing for my problem.

How to get a-link (a href) background image in css to resize with javascript code

I've been racking my brain trying to get two problems figured out. One is an image cropping and the other is and image resizing one. Here is a overview of the code I have:
HTML code:
<script src="main.js"></script>
<div class="mainDiv">
<div class="columnDiv1">
<!-- a div here a div there -->
</div>
<div class="columnDiv2">
<div class="iconDiv1">Icon 1</div>
<div class="iconDiv2"><img src="/images/div2Icon.png" id="div2IconImg" width="1" /></div>
</div>
<div class="columnDiv3">
<!-- a div here a div there -->
</div>
<div class="bottomRowDiv">
<!-- a div here a div there -->
</div>
</div>
CSS code:
<style type="text/css">
.mainDiv {
z-index: 2;
float: left;
width: 1112px;
position: relative;
overflow: hidden;
}
.columnDiv1 {
z-index: 20;
position: absolute;
width: 33.36%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv2 {
z-index: 20;
position: absolute;
width: 30.31%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv3 {
z-index: 20;
position: absolute;
width: 36.33%;
padding: 0px;
float: left;
border: 0px solid;
}
.bottomRowDiv {
z-index: 20;
position: absolute;
width: 100%;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv1 */
.iconDiv1 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 75px;
padding-right: 0px;
float: left;
border: 0px solid;
}
.iconDiv2 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv3 */
/* stuff in here for bottomRowDiv */
#iconDiv1_link {
display:block;
text-indent: -10000px;
background: url(/images/div1.png) no-repeat;
background-position: center top;
}
#iconDiv1_link:hover {
background-image: url(/images/div1hover.png);
}
</style>
JavaScript code:
_spBodyOnLoadFunctionNames.push('sizeImageMap()');
function sizeImageMap()
{
// get screen information
var currentScreenWidth = screen.width;
var currentScreenHeight = screen.height;
// get images' information
//define Image Icon Hash keys
var imgIconHash = {};
imgIconHash['image1_link'] = {};
...
...
imgIconHash['iconDiv1_link'] = {};
imgIconHash['div2IconImg'] = {};
...
...
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLinkStyle = imgLink.currentStyle || window.getComputedStyle(imgLink, false);
imgIconHash[imgLinkName]['src']=imgLinkStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
} else if (imgLink.nodeName === "IMG") {
imgIconHash[imgLinkName]['src']=imgLink.getAttribute('src');
} else {
// not A or IMG nodes
}
// get image width and height
var tmpImg = new Image();
imgIconHash[imgLinkName]['width']=tmpImg.width;
imgIconHash[imgLinkName]['height']=tmpImg.height;
}
// initialize scaling factors
var imgScale = 1;
//set scaling factors
if(currentScreenHeight >= /*given amount*/ ) // set scale
{
imgScale = 0.5676; // reset image scale
} else {
imgScale = 0.3784; // reset image scale
}
//resize images
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLink.style.background.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.background.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
} else if (imgLink.nodeName === "IMG") {
imgLink.style.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
}
}
}
Note, this is a webpage content part in SharePoint, hence the "_spBodyOnLoadFunctionNames.push('sizeImageMap()');" to perform an operation similar to document.onload.
So, two problems I am having:
The image in the 'columnDiv2' of 'iconDiv1' seems to be being cropped. It's size is 322px width and 128px height. The left and top don't appear to be being cropped, but the bottom and right do appear, or more so, don't appear, as though they have been cropped. I have seven other images in my code that are handled the same way, and have no problems with them, but this one appears to have the problem. It's not noticeable on the first loaded image, but on the image that shows after a 'hover', you can see the cropping.
I can get the IMG's width and height, but not the a-href link's background width and height. Any direction for this would be helpful. Also, I am doing this so that the images can be resized. Note the links are id's and not class's, as I was unable to find an easy way to access the existing images width and height, before loading, and then how to resize the a-href link's size after getting it. As said, the IMG works fine, just the A doesn't want to cooperate.
Thank you in advance.

Aspect Ratio for div and its elements

I'm building an HTML5 game without canvas and want to keep a 16:9 ratio for my div. That is easily done by javascript and it works perfectly well. But the elements inside the div itself, they sometime become too big (if the screen is big). I'm aware of max/min-height/width, but is there any other way to make it as if the game is scaled?
here is the code for js and css:
function fix() {
var gameWidth = $(window).width();
var gameHeight = $(window).height();
var fitX = gameWidth / 800;
var fitY = gameHeight / 480;
var screenRatio = gameWidth / gameHeight;
var optimalRatio = Math.min(fitX, fitY);
// checking ratio
if( screenRatio >= 1.77 && screenRatio <= 1.79)
{
$('#game').width ($(window).Width + 'px');
$('#game').height ($(window).Height + 'px');
}
else
{
$('#game').width (800 * optimalRatio + 'px');
$('#game').height (480 * optimalRatio + 'px');
}
$('#game').center();
}
the function is doing its job perfectly well.
but the CSS here is what I'm having issues with.
#game {
width: 800px;
height: 480px;
background: url(bg.png);
position: relative;
}
.landing {
position: absolute;
width: 20%;
max-width: 190px;
height: 60%;
max-height: 290px;
bottom: 10%;
background: #ff6600;
text-align: center;
}
I want it so that the landing scales while keeping the 190/290 ratio..
thanks.

Not percents will be the way but 'em' units.
Set the font-size of the outer div to 10px then 1.0em equals 10 Pixels. If you use 'em' for every element inside you just change font-size of outer div and everything else get's scaled.
CAVE: Nested 'em' font-sizes will multiply so only use these on the 'leaf' elements, that have no children. At least no children which use 'em' units themselves
What will be the advantage? You don't have to fiddle around with the scale of the outer element with jQuery.
If you want to depend on the available space you should act on window resizes with jquery and only change the outer wrap font-size in that case and all will be well
http://jsfiddle.net/HerrSerker/a8yc7/
HTML
<button class="five">50%</button>
<button class="ten">100%</button>
<button class="fifteen">150%</button>
<button class="twenty">200%</button>
<div class="wrap">
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
<div class="elem elem4"></div>
</div>
</div>
CSS
.wrap {
font-size: 10px;
}
.container {
width: 30em;
height: 20em;
border: 1px solid gold;
position: relative;
overflow: hidden;
}
.elem {
position: absolute;
width: 10em;
height: 10em;
}
.elem1 {
background: silver;
top: 8em;
left: -5em;
}
.elem2 {
background: green;
top: -2em;
left: 12em;
}
.elem3 {
background: gray;
top: -3em;
left: 13em;
}
.elem4 {
background: red;
top: 5em;
left: 2em;
}
jQuery
$('.five').on('click', function() {
$('.wrap').css({
fontSize: '5px'
})
})
$('.ten').on('click', function() {
$('.wrap').css({
fontSize: '10px'
})
})
$('.fifteen').on('click', function() {
$('.wrap').css({
fontSize: '15px'
})
})
$('.twenty').on('click', function() {
$('.wrap').css({
fontSize: '20px'
})
})