Repeatedly reduce the width of a div - javascript

I need the width of a specific <div> to get smaller by 50px every time a JavaScript function is called.
I tried
document.getElementById("Zivot").style.width = "100px";
But that just sets the width, and doesn't add or subtract it.

Use this code. Get the width using offsetWidth and reduce it by 50px every time.
var element = document.getElementById('Zivot');
element.style.width = (element.offsetWidth - 50) + 'px';

A pure Javascript way of getting this working-
var zivotID = document.getElementById("Zivot");
zivotID.style.width = zivotID.offsetWidth - 50;
document.getElementById("Zivot").style.width or myID.style.width - Here you actually set the value of width. I mean, you wait for a value to be given so that you can set.
document.getElementById("Zivot").offsetWidth or myID.offsetWidth - This gets the width of the div/element.
Some reference links-
How to find the width of a div using raw Javascript?
HTMLElement.offsetWidth
How do I retrieve an HTML element's actual width and height?
Hope it helps :)

var currentWidth = $('#Zivot').width();
$('#Zivot').css('width', currentWidth - 50 + 'px');

Related

JavaScript get size of content box

I was using padding to restrict the size of the content-box. I need a way to get the size of the content box width and hight in pixels.
I'm open to work around's like nesting elements, pseudo-elements, trying out something like flex box setups.
However, a vanilla JavaScript way to get these values is the subject of the question.
Example: http://codepen.io/anon/pen/lbzJi
Taken from the answer to a similar question; you can use window.getComputedStyle(element, null).getPropertyValue('css-property'); to obtain the value of a computed CSS property. In your case, you can use this for the properties padding-left, padding-right, padding-top and padding-bottom.
For example, to compute the height of the content box of your "box" div you can do something similar to the following where I assume the padding is specified as an integer (hence the parseInt);
function property(e, p) {
return parseInt(window.getComputedStyle(e, null).getPropertyValue(p));
}
var box = document.getElementById('box');
var paddingTop = property(box, 'padding-top');
var paddingBottom = property(box, 'padding-bottom');
var contentHeight = box.clientHeight - paddingTop - paddingBottom;
Try this using jquery: http://codepen.io/anon/pen/shoun
$(document).ready(function(){
$("pre").append("Total Height = " + ($("#box").height() - parseInt($("#box").css("padding-top"))));
});
Well, you could try:
element.clientHeight
element.clientWidth
-or-
element.offsetWidth
element.offsetHeight
depending on what you want, but we'd need some code to really help you out.

prevent overflow of absolutely positioned dynamic div

I need to get the height and width of a dynamically generated div inside a loop.
Details
I'm dynamically setting the left and top values of a positioned absolute div. This div is in a loop, thus its width, height and position change at an interval n.
(It's basically a div that appears at random places on a page every n seconds.)
The challenge I'm facing is that this div needs to be inside the parent at all times, <body> tag in this case. I have it set to position:relative and even overflow:hidden though it won't help.
Here's a fiddle to make things easier.
Fiddle 1 outside the loop , Fiddle 0 insdie the loop
You will see that because the x and y values are randomly generated the div overflows.
I have found that in order to keep the div in the body it's height and width must be retrieved and calculated with the parent to get the difference in size.
So I can use it the css like
var heightdiff = parentHeight - divHeight;
var widthdiff = parentWidth - divWidth;
in the css via jQuery
top: Math.floor((Math.random()*heightdiff)+0;
left: Math.floor((Math.random()*widthdiff)+0;
Perhaps I'm making a simple mistake but I've tried everything I can think of. To recap all I need to do is to get the height and width of div.
I modified your script :
http://jsfiddle.net/yMT56/1/
Why using document as base ?
var docw = $(document).width();
var doch = $(document).height();
Use body
var docw = $('body').width();
var doch = $('body').height();
Or better, div's parent (requires you to append your div to a container before) :
var docw = $newdiv.parent().width();
var doch = $newdiv.parent().height();
The problem here is that the div has no content and so on no width and height at the moment you calculate it. So I created it at the beginning (notice i added <body> tag in the html part : i don't know how fiddlejs handles this case) :
$newdiv = $('<div/>').css({
'position':'absolute',
'display':'block'
}).html("Hi there, this should appear with in the body.<br/> Just wait it will overflow").appendTo( 'body' );
//parent size, in this case body
var docw = $('body').width();
var doch = $('body').height();
//calculating div size, before it's set, wrong!!
var divh = $newdiv.height();
var divw = $newdiv.width();
I also added a Math.max control to be sure results won't be negatives, especially in case div is larger than his parent.
//positions for x and y
var posx = Math.max((Math.random() * (wdiff) +1).toFixed(), 0);
var posy = Math.max((Math.random() * (hdiff) +1).toFixed(), 0);
And, at the end, only put position for the div :
$newdiv.css({
'left':posx+'px',
'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){
Maybe with that solution, a first div will be displayed before loop starts. A solution would be to use visibility:hidden property, to hide div but always be able to got his width and height.

Javascript function to find total page height

I'm after a simple javascript function that will detect the total height of my web page which is dynamic and apply it to the height of a div which is the page background. Would it be possible to implement it?
The div is called bg...
Any ideas? Thanks in advance
Try:
var height = body.offsetHeight ? body.offsetHeight : html.offsetHeight;
document.getElementById ('divID').style.height = height + 'px';
Here an useful documentation:
http://www.quirksmode.org/dom/w3c_cssom.html
Im using currently following code to do that:
var getBodyHeight = function () {
var d = document,
bd = d.body,
dd = d.documentElement,
max = Math.max(
bd.scrollHeight,
bd.offsetHeight,
bd.clientHeight,
dd.offsetHeight,
dd.scrollHeight,
dd.clientHeight
);
return max;
};
This is what I use to figure out the height of content in iFrame for the purpose of adjusting it properly.
var body = document.body,
html = document.documentElement,
height = 0;
height = body.offsetHeight;
if(height === 0){
height = html.offsetHeight;
}
The reason for checking the body first is that the height of html is actually the height of the iFrame, which could be bigger than the content itself. However, in certain cases such as when body has no height, then it falls back to use height of html instead.
For your case, you might want to experiment with a similar scheme. I'm not sure why you have to use a div to set background so I can't really suggest a better alternative (if any).
Solution based on the comment below:
What you can do is the following. Have a div inside the main container with position absolute, width/height 100% and z-index -1. Then it will always be the correct size no matter how large the contain grow or shrink. With this approach, you will have to make sure that container always has size. This is a pure CSS solution, which might be simpler than using Javascript to adjust.
var height = screen.height;
var width = screen.width;
var resolution = width+"x"+height;
alert(resolution);
it gives the resolution of the screen.i know you want page height and width but it will help you later in web development. i am using it as most important part for my web!

Get height and width after setting maxHeight and maxWidth and auto - pure javascript

Is it posible to getGet width and height of image after setting maxHeight and maxWidth with javascript.
$new_image = new Image();
$new_image.src = 'xxx.jpg';
$new_image.style.maxHeight = '500px';
$new_image.style.maxWidth = '600px';
$new_image.style.height = 'auto';
$new_image.style.width = 'auto';
alert('CURRENT WIDTH AND HEIGHT IF IMAGE IS 1000 X 1000 PX');
I know how to get the maxheight value, but that might not be the actual size since the image is set to height and width "auto".
No jquery answers thank you! :)
offsetHeight and offsetWidth will get you what you want, and take into account the maxWidth and maxHeight. Do keep in mind that the img object needs to be part of the DOM to have any dimensions at all. So you'll need to add it with something like document.body.appendChild($new_image) before offsetHeight and width will return anything useful.
You can use the dom element properties clientHeight and clientWidth for that

jQuery calculation doesn't add up as expected when toggling height

I have the following function for calculating the height of .node. It then takes away the height of a possible image, .node-image, from the height of the .node, and sets a column, .node-content-column to have a height that is the difference (i.e. 500 - 50 = 450; column becomes 450 in height).
function initColumnSizer() {
imageHeight = $('.node-image').outerHeight(true);
resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
$('.node-content-column').removeAttr('style');
$('.node-content-column').css('min-height', resizeHeight);
$('.node-content-column').css('height', 'auto !important');
$('.node-content-column').css('height', resizeHeight);
}
This function gets called on page load, and resizes .node-content-column as expected.
It also gets called when a div within .node is toggled using jQuery.toggle(), but this calculation returns a larger number everytime, instead of reverting back to the original once this toggle is reverted.
Can anyone see where I am going wrong with this calculation? Or if I am going about it the wrong way?
Thanks in advance!
Karl
1) Maybe the problem is in outerHeight() function (it takes into account padding and border). Try using just height or clientHeight:
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
2) why do you need to cleanup the whole elements' style?
and then you try to assign height = auto, and after that: height = resizeHeight - what's the purpose for that ? check the logic of your code.
outerHeight(true) will return height + padding + border + margin. Possibly, you might want to use height() ?
Most possible is that "larger number everytime" have always constant difference -- for example 75.
May be you just have some dependecies between .node-content-column and .node?
If your nodes like .node-content-column, .node and .node-image are all singles, then it's better to use IDs for them -- not CSS classes.

Categories