Help is really wanted here, I have a div surrounding a textarea, the div is auto sized, height and width, and I need to know what that auto value is. tried a little javascript, please see below:
function textAreaChange() {
var textboundary = document.getElementById("textarea");
textboundary.style.height = document.getElementById("heightx").innerHTML;
textboundary.style.width = document.getElementById("widthy").innerHTML;
}
fairly new to all this javascript so please be patient?
Thanks.
If you are looking at obtaining the height and width, based on wrapping of the text area, try one of the following:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight includes the height and vertical padding.
offsetHeight includes the height, vertical padding, and vertical borders.
scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
There are Widths that correspond to each Height.
You can do it like this :)
function textAreaChange() {
var textboundary = document.getElementById("textarea");
document.getElementById("heightx").innerHTML = textboundary.offsetHeight;
document.getElementById("widthy").innerHTML = textboundary.offsetWidth;
}
textAreaChange();
<textarea id="textarea" ></textarea>
<div id="heightx"></div>
<div id="widthy"></div>
Related
I'm trying to create a consistent gap of 100px between two 'walls', one on the top of the screen 'wallTop' and one on the bottom 'wallBot', like in Flappy Bird. I've used Math.random on 'wallTop' to randomise the height of it in order to randomise the position of the gap, but how do I set the height of 'wallBot' to be based off of 'wallTop's randomised height?
Here's what I've tried
var wallGap = 100;
var wallTop = document.getElementById("wallTop");
var constant= (wallTop.height+wallGap);
$("#wallTop").css("height",Math.round(Math.random()*150+70)+"px");
$("#wallBot").css("height",450-constant+"px");
"450" is the height of the whole container, so I'm trying to find the remainder after subtracting 'wallTop' and 'wallGap', which will be the height of 'wallBot'.
Your constant won't change magically after having set a new height for wallTop (also note that wallTop.height will be undefined, since the element doesn't have the property height).
var wallGap = 100;
var wallSpace = 450 - wallGap;
var wallTop = $("#wallTop");
var wallBot = $("#wallBot");
wallTop.height(Math.round(Math.random()*150+70));
wallBot.height(wallSpace - wallTop.height());
I need to calculate the text width without appending it to DOM.For this,i calculate and save each character's width i.e from (A-Z & a-z and other necessary characters).
Code :
function calculateCharactersWidth(){
for(var i=65;i<123;i++){
var x = $('<div style="float:left">').text(String.fromCharCode(i)).appendTo('#hiddenView');
charactersWidth[i] = x.width();
remHeight = x.height();
}
var x = $('<div style="float:left">').text(String.fromCharCode(45)).appendTo('#hiddenView');
charactersWidth[45] = x.width();
$('#hiddenView').empty();
}
and get each word's width like this
function getStringWidth(word){
var width=0;
for(var i=0;i<word.length;i++){
width=width+charactersWidth[word.charAt(i).charCodeAt(0)];
}
return width;
}
but when the word is appended to DOM. Its width differs from the calculated width.In some cases it differs by 3-4 px.
Even if we calculate it like this
// css font-weight:bold and font-size:14px
<div>Absin</div> width = 35.031
<div>A</div> width = 10.125
<div>b</div> width = 7.797
<div>s</div> width = 6.219
<div>i</div> width = 7
<div>n</div> width = 4.672
Added width = 35.831
This small difference creates a huge difference with array of words.So why is the difference and how can i make it work?
The kerning of the font is definitely messing up your calculation.
I am not sure why you'd need to do this, but why don't you print out your text in a hidden element and take the width of that?
function getStringWidth(word){
var x = $('<div style="float:left">').text(word).appendTo('#hiddenView');
return x.clientWidth;
}
This way you can also change the style, the font type and size, etc.
I have two side-by-side elements on a page. One elements has a fixed size (100vh) – .hero-half – and the other is fluid with text of varying lengths – .project-details. When the fluid text container extends to be taller than the image container, I want to apply a class to it that restricts the height of one of its child elements to bing the total text container height back to equal with the image height.
HTML:
<div class="project-details left">
<h1 class="project">Title</h1>
<div class="project-summary">
<div class="summary-container">
<p>A bunch of paragraphs here</p>
</div>
<a class="more" href="#">More</a>
<a class="less" href="#">Less</a>
</div>
</div>
<div class="hero hero-half right" style="background-image: url('/img/placeholder-vert1.jpg')"></div>
The relevant CSS:
.hero-half {
width: 50%;
height: 100vh;
}
.project-details {
width: 50%;
height: auto;
}
.project-summary .summary-container {
overflow: hidden;
&.restrict-height {
.summary-container {
// set max height
max-height: calc(100vh - 615px);
}
}
}
Here is my JS code:
$(function () {
var bpTab = 1024;
resize = function() {
var winWidth = $(window).width();
var heroHeight = $(".hero-half").outerHeight();
var boxHeight = $(".project-details").outerHeight();
var $box = $(".project-summary");
if ( boxHeight > heroHeight && winWidth > bpTab) {
// if on desktop layout AND if text is pusing box too big, restrict box height
$box.addClass("restrict-height");
} else {
// if not on desktop or text is not pushing box too big
$box.removeClass("restrict-height");
$box.removeClass("is-expanded");
};
};
// resize on window resize
$(window).bind("resize orientationchange", function(){
resize();
});
// resize on page load
resize();
});
So when the project-details div reaches a height taller than .hero-half, it adds a class that sets a max-height on one of the children, which brings the total height of .project-details back to equal or less than .hero-half.
However when I resize my window to force the the text to push the project-details height too tall and trigger the restrict-height class, it only works when the screen width and height add up to even numbers (either both width and height are even, or both odd). If it's an odd total the outerHeight of project-details seems to calculate incorrectly.
The problem, I think, is that the outerHeight of .project-details is sometimes being calculated at it's natural height before the text height it restricted, and sometimes it's being calculates after that class is applied and after the text height it restricted, which therefor decreases the .project-details height back into an acceptable range.
I've tried adding a timeout delay for the addition of the class hoping that the extra time would mean the outerHeight calculation was always correct, but it didn't make a difference.
How should I alter this JS code to make sure the .project-details outerHeight is always reading the height before the restrict-height class is applied?
And related: why would the odd pixel dimensions have any effect here?
The solution was at add a reset before the if/else loop to standardise the div height be removing the extra classes that may alter its height first.
var $box = $(".project-summary");
// reset
$box.removeClass("restrict-height");
$box.removeClass("is-expanded");
var winWidth = $(window).width();
var heroHeight = $(".hero-half").outerHeight();
var boxHeight = $(".project-details").outerHeight();
I have a div with a static size. Sometimes longer text than the div will be placed there. Is there anyway to achieve the text fitting the div width at all times through JavaScript alone? I am aware there are jQuery fixes but need a pure JS solution in this case.
Even if you have a link to a demo/tutorial that would be helpful, thanks.
Here you go, this should do what you want: JSFiddle
Basically the key here is to check the output.scrollHeight against output.height. Consider the following setup:
HTML:
<button onclick="addText(); resizeFont()">Click Me to Add Some Text!</button>
<div id="output"></div>
CSS:
div {
width: 160px;
height: 160px;
}
This creates a square div and fills it with a randomly long string of text via the addText() method.
function addText() {
var text = "Lorem ipsum dolor amit",
len = Math.floor(Math.random() * 15),
output = document.querySelector('#output'),
str = [];
for (; --len;)
str.push(text);
output.innerHTML = str.join(', ');
}
The magic lies in the resizeFont() function. Basically what this does is, once the text has been added, it sets the fontSize of the div to be equal to its own height. This is the base case for when you have a string of 1 character (i.e. the fontSize will equal the height). As the length of your string grows, the fontSize will need to be made smaller until the scrollHeight equals the height of the div
function resizeFont() {
var output = document.querySelector('#output'),
numRE = /(\d+)px/,
height = numRE.exec(window.getComputedStyle(output).height)[1],
fontSize = height;
// allow div to be empty without entering infinite loop
if (!output.innerHTML.length) return;
// set the initial font size to the height of the div
output.style.fontSize = fontSize + 'px';
// decrease the font size until the scrollHeight == height
while (output.scrollHeight > height)
output.style.fontSize = --fontSize + 'px';
}
The nice thing about this method is that you can easily attach an event listener to the resize event of the window, making the text dynamically resize as the user changes the window size: http://jsfiddle.net/QvDy8/2/
window.onload = function() {
window.addEventListener('resize', resizeFont, false);
}
Suppose I have the following html, and no CSS
<div>
here is some content in this div. it stretches it out
<br />and down too!
</div>
Now I want to get the actual pixel width and height that the browser has rendered this div as.
Can that be done with JS?
Thank you.
Try getting a reference to your div and reading the offsetWidth and offsetHeight properties:
var myDiv = document.getElementById('myDiv');
var width = myDiv.offsetWidth; // int
var height = myDiv.offsetHeight;
offsetWidth/Height cumulatively measures the element's borders, horizontal padding, vertical scrollbar (if present, if rendered) and CSS width. It's the pixel values of the entire space that the element uses in the document. I think it's what you want.
If that is not what you meant, and you'd rather only the element's width and height (i.e. excluding padding, margin, etc) try getComputedStyle:
var comStyle = window.getComputedStyle(myDiv, null);
var width = parseInt(comStyle.getPropertyValue("width"), 10);
var height = parseInt(comStyle.getPropertyValue("height"), 10);
The values above will be the final, computed pixel values for the width and height css style properties (including values set by a <style> element or an external stylesheet).
Like all helpful things, this won't work in IE.
You say you are using jQuery. Well it's trivial now, and works cross-browser:
var width = $('div').css('width');
var height = $('div').css('height');
With jQuery you don't need the first part of this answer, it's all taken care of for ya ;)
One of the benefits of using a framework, like Prototype, is that the framework authors have usually sorted out the portability issues. Even if you don't use the framework, it can still be instructive to read. In the case of Prototype, the code for reading the dimensions of an element accounts for a Safari issue and allows you to read the width of an element that is not presently dislayed.
getDimensions: function(element) {
element = $(element);
var display = $(element).getStyle('display');
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
},
For the jQuery framework, .height and .width do the job.