How to change (DOM) CSS with current HTML height? - javascript

I’m trying to make a function that changes the CSS to the current height when I click a button. It won’t read the current height.
var height = $(window).height();
function openNav() {
document.getElementById("bodypacity").style.height = height;
}
#bodypacity {
width: 100%;
background-color: black;
opacity: 0.4;
position: absolute;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menunav"> <span id="menu" style="" onclick="openNav()">☰</span>
<img id="logo" src="logo.png">
</ul>

If I understand you correctly, you want to get the height of the window and set the element to equal height. You're very close to achieve that, all you need is to add "px" to the final height, because $(window).height() returns only number, so you can set the actual height using $(window).height() + "px", and it will be document.getElementById("target").style.height = height + "px"; in your case:
var height = $(window).height();
function openNav() {
document.getElementById("target").style.height = height + "px";
}
html,
body {
margin: 0;
padding: 0;
}
#target {
width: 100%;
height: 50px;
background-color: royalblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<button onclick="openNav()">Set Height</button>
</div>

Related

Why is my clientWidth and offsetWidth equal?

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 5000px;
width: 5000px;
background-color: #000000;
}
<div id="mydiv">
<div id="div1"></div>
</div>
I have a div on a webpage where the content requires a vertical scrollbar. Using javascript, I'm trying to calculate the offsetWidth and clientWidth so that I can ultimately calculate the width of the vertical scrollbar but apparently they are equal. I have:
html:
<div id="mydiv">
<div id="div1"></div>
</div>
css:
#div1 {
height: 5000px;
width: 5000px;
background-color: #000000;
}
js:
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
Main difference between clientWidth and offsetWidth :
(1) clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
(2) offsetWidth is the outer width (ie. the space occupied by the element, including padding and borders)
As I can see in your CSS border and scrollbars is missing that is why you are getting same width in both case.
I have made updated CSS and now you will get different values. Please check below snippet:
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#mydiv {
padding: 20px;
border: 20px solid red;
}
<div id="mydiv">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Take a look at the two snippet, you can see the difference with scrollbar and without scrollbar.
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 100px;
width: 200px;
background-color: #000000;
}
#mydiv{
height:80px;
width:160px;
overflow:scroll
}
<div id="mydiv">
<div id="div1"></div>
</div>
Below snippet has no scrollbar and overflow, so the client width and offset width are same
var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
height: 100px;
width: 200px;
background-color: purple;
}
<div id="mydiv">
<div id="div1"></div>
</div>

Is there any method to get html tag on specific height?

I can get height of entire container using jQuery, I want to add H1 tag after 500px height inside the container.
var height = $("body").find(".container"). innerHeight();
if(height > 800){
//Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, and insert H1 tag after closing that specific element
}
var height = $("body").find(".container"). innerHeight();
if(height > 800){
//Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, insert H1 tag right after specific element
}
If I understood you correctly
you can accomplish this with some styles:
HTML:
<div class="container">
<h3 class="customTag">Im Your H3</h3>
</div>
CSS:
.container{
position: relative;
height: 800px;
width: 600px;
background-color: red;
}
.customTag{
position: absolute;
bottom: 500px;
background-color: yellow;
}
Here is demo for you:
https://codepen.io/init1/pen/ExxpxoM
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 600;
if ($(window).scrollTop() > navHeight){
$('.header').addClass('headcolor'); $('.nave_stickey_text').fadeIn();
} else {
$('.header').removeClass('headcolor');
$('.nave_stickey_text').fadeOut();
}
});
});

javascript: change CSS position by relative amount

Basically what I'm trying to do is every time the JavaScript is executed (by click), the CSS left value for my <div> descreases by 20%. So, for example, left starts at 40%. The first time you click it should become 20%, and then 0%, and then -20%, and so on. I've updated my code below:
FilmstripLeft = parseInt(document.defaultView.getComputedStyle(ul).left, 10) / 4;
ul.style.left = (FilmstripLeft - 20) + "%";
ul is a <div> I get using document.getElementById(). This code works now, but I'm unsure about the divided by 4 at the end of the first line. I tested than that line was returning a value of 160 before I added the / 4 at the end, even though the starting value is 40%. I'm not sure if this is because it's returning the value in pixels instead of percent, in which case dividing by 4 would only work if left is at 160px?
"left" value for my div descreases by 20%
No. According to your explanation, you want to decrease it by 20 percentage points, not by 20%.
getComputedStyle(ul).left
Be aware percentages are relative units. When computed, they are transformed to an absolute length.
You can only access the raw percentage as an inline style
var target = document.getElementById("target");
document.querySelector('input').addEventListener('click', function() {
target.style.left = parseFloat(target.style.left) - 20 + '%';
});
#target {
position: relative;
width: 30px;
height: 30px;
background: blue;
}
<div id="target" style="left: 80%"></div>
<input type="button" value="Click" />
But you don't need the raw percentage in order to subtract 20 percentage points. You can use calc:
var target = document.getElementById("target");
document.querySelector('input').addEventListener('click', function() {
var current = getComputedStyle(target).left;
target.style.left = 'calc(' + current + ' - 20%)';
});
#target {
position: relative;
left: 80%;
width: 30px;
height: 30px;
background: blue;
}
<div id="target"></div>
<input type="button" value="Click" />
getComputedStyle() won't work well for your purposes because it, by definition, returns the computed value of the style in terms of pixels, not the relative percentage of the original value. In order to calculate what "20%" is using computed styles, you will have to do it manually by finding the parent element's width and then taking 20% of that:
function onClick(){
var myElement = document.getElementById("inner");
var leftValue = parseFloat(window.getComputedStyle(myElement).left);
var parentElement = myElement.parentElement;
var parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
var twentyPercent = parentWidth * 0.20;
var newLeftValue = (leftValue - twentyPercent) + "px";
myElement.style.left = newLeftValue;
updateStatus();
}
function updateStatus(){
document.getElementById("status").innerHTML = window.getComputedStyle(document.getElementById("inner")).left;
}
updateStatus();
document.getElementById("btn").addEventListener("click", onClick);
#outer {
width: 400px;
height: 20px;
background: #888;
}
#inner {
width: 20px;
height: 20px;
position: relative;
left: 80%;
background: red;
}
<div id="outer">
<div id="inner"></div>
</div>
<button id="btn">click me</button>
<div id="status"></div>
The downside of this method is that it fixes left as a pixel value instead of a true percentage of the parent, so if the window/parent width changes, the left value won't match properly.
It's easier if the left value is an inline HTML style instead of a CSS style because you can get it directly with element.style, which reads the inline HTML style value. Then you can assign a new left value as a true percentage that will update if the window/parent width changes.
function onClick(){
var myElement = document.getElementById("inner");
// Note how #inner's left value is now inline instead of CSS
var leftValue = parseFloat(myElement.style.left);
var newLeftValue = (leftValue - 20) + "%";
myElement.style.left = newLeftValue;
updateStatus();
}
function updateStatus(){
document.getElementById("status").innerHTML = document.getElementById("inner").style.left;
}
updateStatus();
document.getElementById("btn").addEventListener("click", onClick);
#outer {
width: 400px;
height: 20px;
background: #888;
}
#inner {
width: 20px;
height: 20px;
position: relative;
background: red;
}
<div id="outer">
<div id="inner" style="left: 80%"></div>
</div>
<button id="btn">click me</button>
<div id="status"></div>
So, if possible, put your styles inline instead of into CSS because they're easier to access. Technically it is possible to access CSS stylesheet rules using JavaScript but it is very convoluted and I don't recommend it if you're new to web development.

Using outerHeight(); to measure the same class name, but with different heights

The distance of the animation depends on the item0 height. However, when I use a secondary class to change the height of the div, the jQuery does not takes the new height into practice.
Is it possible to factor in the new height, given by the new class name?
http://jsfiddle.net/tmyie/28N7M/1/
jQuery:
var height = $('.item0').outerHeight();
$('p').click(function(){
$('.item0').animate({top:height}, 300);
});
HTML:
<p>click here</p>
<div class="item0"></div>
<div class="item0"></div>
<div class="item0"></div>
<div class="item0 half"></div>
CSS
.item0 {
background-color: red;
height: 50px;
width: 25px;
float: left;
margin-left: 5px;
position: relative;
}
.half {
height: 10px;
background-color: blue;
}
$('p').click(function(){
var $this;
$('.item0').each(function() {
$this = $(this);
$this.animate({
top: $this.outerHeight()
}, 300);
});
});
DEMO
You are first calculating the height, and then defining the click event handler. Obviously you've only calculated the height once and you should recalculate it again. Also you need to calculate it for every item.
Simply calculate the height on click:
$('p').click(function () {
$('.item0').each(function() {
var height = $(this).outerHeight();
$(this).animate({top:height}, 300);
});
});

How to use current div width/height as minimum width/height?

How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height?
Here is a try:
<!doctype html>
<html>
<head>
<title>Layout</title>
<script>
var myDiv = document.body;
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
myDiv = document.getElementById('wrapper1');
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#wrapper1 {
width: 100%;
height: 100%;
}
#wrapper2 {
width: 8%;
height: 100%;
float: left;
}
#wrapper3 {
width: 92%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
</html>
Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible)
Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div>. You should use:
var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;
Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?).
Here is references on offsetHeight and offsetWidth. Here
That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values.
As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div.
example:
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
<style>
#wrapper1 {
width: 100%;
height: 100%;
}
</style>
This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3

Categories