javascript: get height of div and use it in other div - javascript

I want to use javascript to get the height of a responsive div, and use the output in another div.
But I'm no good in javascript at all...
So far I've come up with:
<script language="JavaScript">
var offsetHeight = document.getElementById("myDiv").offsetHeight;
var curr_width = parseInt(offsetHeight.style.height);
offsetHeight.style.height = (offsetHeight);
</script>
<div id="mydiv"></div>
<div id="offsetHeight" style="top:0px"></div>
So what I want is that when I resize the document, the height of mydiv is used for the style="top" value...
Anyone who can help me out? Would be wonderful!

You must be careful about upper/lower letter (mydiv -> myDiv)
You need to add px to set a element's height
var offsetHeight = document.getElementById("mydiv").offsetHeight;
document.getElementById("offsetHeight").style.height = offsetHeight + 'px';
#mydiv {
background:red;
height:150px;
}
#offsetHeight {
background:green;
}
<div id="mydiv"></div>
<div id="offsetHeight" style="top:0px"></div>
Important The script code should be before </body> or wrap it with the listener DOMContentLoaded

try with this below code it may help you
var mydivHeight = document.getElementById("mydiv").offsetHeight;
document.getElementById("offsetHeight").style.height = mydivHeight + 'px';
<div id="mydiv">mydiv</div>
<div id="offsetHeight" style="top:0px"></div>

Use jQuery and let the document load. write your logic inside:
$(document).ready(function(){
//code here
});
Answer here

Related

How can I make the height of a div bigger onclick of a button and then change back to it's original height when click again?

I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}
Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/
one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>
Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>
Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.

How to make a function set css width with a JavaScript variable?

I have this code:
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...
All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?
The problem that I'm seeing, is that the onload event for the section tag isn't firing. You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.
<body>
<section id="spin" style="border:5px solid black;"></section>
<script>
(function () {
var setWindowSize = window.innerWidth - 600;
document.getElementById("spin").style.width = setWindowSize + "px";
document.getElementById("spin").style.height = setWindowSize + "px";
})();
</script>
</body>
See Here for a demo: http://jsfiddle.net/T7DW6/
You should move onload to the body tag:
<body onLoad="handleSize()">
<section id="spin">...
I would suggest you to use jQuery, that is JavaScript library used world wide. So in order to develop it using jQuery you need to do next
function setElementSize(elId) {
var _w $(window); //to get instance of window
var _el $('#' + elId); //jquery to get instance of element
var _width = _w.width();
var _height = _w.height();
//set width=height
if(_height>_width)
{
_height = _width;
} else { _width = _height; }
_el.css({
width: _width,
height: _height
});
}
//this will execute script when document is loaded.
$(document).ready(function(){
setElementSize('spin');
});
Function above will set width and height of element to match window size. If height > width then it will use width as width & height otherwise it will use height.
I assume that you want to change this automatically if window is resized then do this
$(window).resize(function(){
setElementSize('spin');
});
The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
onload is only Supported by the Following HTML Tags:
body, frame, frameset, iframe, img, input type="image", link, script, style
from here: event_onload
then a is may be not the best here (height and weight does not change anything, you should use a div.
In order to know, the one to use, please read this:
what-is-the-difference-between-section-and-div
I try your exam and it works fine. The only thing that i changed was the way that you call the function
function handleSize(){
var setWindowSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setWindowSize + "px";
document.getElementById("spin").style.height=setWindowSize + "px";
}
window.onload = function () {
handleSize();
}
I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise!
this works for me
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button and watch it grow.</p>
<button id = "myButton" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>
</body>
</html>

How to get total height of 3 p tags inside a div?

here is my code
<div class="entry-content"> <p>some text...</p> <p>some text...</p> <p>some text...</p> </div>
My entry-content div has an absolute positioning, so the text inside the p tags goes under the footer. i have to fix the height of entry-content to total height of all p tags using javascript.
please help.
Use outerHeight (Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin.)
var total = 0;
$('.entry-content').find('p').each(function() {
total += $(this).outerHeight(true);
});
$('.entry-content').height(total);
Try like this... Working Demo
var height = 0;
$('div.entry-content p').each(function() {
height += parseInt($(this).outerHeight(true));
});
Have you tried using $('.entry-content').height(), or similar functions like .innerHeight()? (jQuery docs).
You wouldn't need to set the height of the <div>, but you could measure the default height, and use that to position your footer.
A word of warning: because of text wrapping, the height of that div might change when the window is resized. You might want to set a callback using $(window).resize(...), to update the positioning when that happens.
I made a little jQuery plugin a while back that hopefully will come in handy for a problem such as this:
Plugin
(function ($) {
// helper 'plugin' for getting the total height
$.fn.totalHeight = function ()
{
var totalHeight = 0;
this.each(function () {
totalHeight += $(this).height();
});
return totalHeight;
}
})(jQuery);
Usage
var totalHeight = $('.entry-content p').totalHeight();
Edit: This could easily be adapted to support outerHeight() or innerHeight().
jsBin demo
Use: outerHeight(true)
var entryHeight = $('.entry-content').outerHeight(true);
$('#footer').height(entryHeight);
$(function(){
var totaltHeight;
$('.entry-content p').each(function(){
totaltHeight = totaltHeight +$(this).height();
});
});
something like that perhaps
this is depended on jQuery

How can I invoke a javascript function div upon divs overlapping

I have 2 divs, one positioned absolutely right: 0 and the other relatively positioned center screen. When the window's width is too small, they overlap. How can I invoke a javascript function when this happens?
Thanks.
Mike
Edited to make clearer.
To check for overlapping div's you might wanna do a check once the page is loaded, and whenever the window is resized:
window.onload = checkOverlap;
window.onresize = checkOverlap;
And then use some offset-checking:
function checkOverlap() {
var centerBox = document.getElementById('centerDiv');
var rightBox = document.getElementById('rightDiv');
console.log("centerbox offset left: " + centerBox.offsetLeft);
console.log("centerbox width: " + centerBox.offsetWidth);
console.log("rightbox offset left: " + rightBox.offsetLeft);
if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
centerBox.style.display = "inline-block";
} else {
centerBox.style.display = "block";
}
}
You might wanna do some more checks in the function, e.g. to see if the box is already displayed inline, and such. But that should give you a good place to start.
edit: added some diagnostics and fixed error
Part 1:
Do it like this:
<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>
...
<div id="example"> ... </div>
document.getElementById('div_id').style.display = 'inline-block'
document.getElementById('div_id').offsetWidth gives us width of div
offsetHeight, offsetLeft, offsetTop are useful also.

How can I change one value in style attribute with JavaScript?

I have a div defined with a style attribute:
<div id="div1" style="width:600;height:600;border:solid 1px"></div>
How can I change the height of the div with JavaScript?
<script type="text/javascript">
function changeHeight(height)
{
document.getElementById("div1").style.height = height + "px";
}
</script>
Judging by his example code he is using the dojo framework. Changing height in dojo would be done with something similiar to the following:
dojo.style("div1", "height", 300);
http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.style
document.getElementById("div1").style.height = height + "px";
var d = document.getElementById("div1");
d.style.height = "300px";
Here is how it might look with jQuery:
<div id="div1" style="width:600;height:600;border:solid 1px"></div>
Change height to 300
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#div1').css('height', '400px');
return false;
});
});
</script>
Just replace your comment with:
node.style.height = height;
Oh, not sure if just passing 300 to your function will make it work, perhaps you'll have to pass "300px" like suggested in the other posts...
In dojo, you would do it like this:
dojo.style("div1", "height", "300px");
Having the units on the height is important, as mentioned in the docs.

Categories