I need to get the width of this div
<div class='row WidthAdjust'></div>
But it is proving way more difficult than I anticipated, below is some of the things I have already tried
// var row = document.getElementsByClassName("WidthAdjust").width()
var row = document.getElementsByClassName("WidthAdjust")
var rowWidth = parseFloat($(row).width())
You can use var data = row.getBoundingClientRect() to get DOMRect object. This object will have the size of the element and its position relative to view port.
Use data.width to get the width specifically.
Related
I need to get the width and height of the page element on Google slide which is of type LINE.
How do I get the width and height of the line if it is not horizontally parallel. A line can be dialognal or parallel or vertical.
I have tried with
slide.getPageElements.asLine().getWidth()
//.getHeight()
The output of getPageElements() is an array of PageElement, which you loop through to get the type, width and height of each PageElement.
For example:
Here I have 2 lines with different length and width and I used the following methods:
getPageElementType(): to filter the data to "LINES" only
getHeight() to get the line height
getWidth() to get the line width
getRotation() to get the angle. You can also use this to determine if a line is diagonal, parallel or vertical.
Code:
function myFunction() {
var slide = SlidesApp.getActivePresentation();
var selected = slide.getSelection();
var page = selected.getCurrentPage();
var pageElements = page.getPageElements();
pageElements.forEach(elem => {
if(elem.getPageElementType() == "LINE"){
Logger.log("Height: "+elem.getHeight());
Logger.log("Width: "+elem.getWidth());
Logger.log("Angle: "+elem.getRotation());
}
})
}
Output:
References:
getPageElements()
PageElement
getPageElementType()
getHeight()
getWidth()
getRotation()
In looking at this image you can see in an ideal world each box would have the same height of content in each box. However in the real world we can't control how many characters the client uses for a heading. Wondering thoughts on how to deal with a situation like this? Is it ok to just let it be as is?
This will create an array of heights of an element by class, then find the tallest, and then make them all that height.
<script>
var headerHeights = [];
var mclength = document.getElementsByClassName("myClass").length;
for (i = 0; i < mclength; i++) {
headerHeights[i] = document.getElementsByClassName("myClass")[i].getBoundingClientRect().height;
}
var headerMaxHeight = Math.max(...headerHeights);
for (i = 0; i < mclength; i++) {
document.getElementsByClassName("myClass")[i].style.height = headerMaxHeight+"px";
}
</script>
You will likely want to make this a function which replaces "myClass" with a function parameter so that you can call it for each class you add. You will also want to add a listener for when a person resizes their window to rerun the function.
I want to have to floated columns side-by side. If second column has contents then the first column should resize its content based on the second column, is that possible with CSS? Widths are not defined.
It's possible using javascript but not with straight CSS. Here are some ways to do it:
Using javascript:
var rightDiv = document.getElementById("straightJ2");
var rightWidth = rightDiv.clientWidth;
var leftDiv = document.getElementById("straightJ1");
if($('#straightJ2').text() || rightDiv.hasChildNodes()) {
leftDiv.style.width = rightWidth + "px";
}
Or more minimal (and possibly overwhelming/hard to follow) javascript:
if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}
Using jQuery:
if($('#secondColumnId').html() != '')
{
$('#firstColumnId').width($('#secondColumnId').width());
}
Each of these check the second div for text or a child element and change the width of the first if one of those conditions is met
All examples can be found used in this jsFiddle
After creating a Div 'MyParent' , and many childs with different widths&heights are added to this 'MyParent' . By the end, i want to know the final width & height of 'MyParent' in pixels. I've used the familiar functions to get a width & height , i got 0 in all attempts.
Here's a simple code :
var myPrt = document.createElement('div');
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css({position:absolute;left:-100px;top:100px;width:100px;height:50px;background:red});
$(C2).css({position:absolute;left:100px;top:-100px;width:75px;height:50px;background:yellow});
$(C3).css({position:absolute;left:150px;top:200px;width:90px;height:50px;background:black});
$(myPrt).height(); // returns 0
$(myPrt).css('height') // returns 0
$(myPrt).innerHeight(); // returns 0
$(myPrt).outerHeight(); // returns 0
myPrt.clientHeight; // returns 0
In simple way to get that ?
Because actually I've found a solution to this problem , but it acts in the Childs, create a loop that goes throw all the Parents Childs , then get the max left and min left of these childs , then it returns the distance between the min & max , and the same tip for the Height by getting the max/min top, however ,this tip needs childs to have an absolute position to get there left/top am looking for an existing jquery or javascript function that does that without absolute position for childs .
Thanks
Take a look at this JSFiddle, you're just being clumsy I think. You never added the myPrt div to the document for one.
The other issue is that you're not passing the css as a properly formatted javascript dictionary with string variables.
http://jsfiddle.net/FcSEG/1/
var myPrt = document.createElement('div');
$('body').append(myPrt);
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css('width','500');
$(C1).css('height','500')
$(C1).css('background','red');
alert($(myPrt).height());
I have been trying to get the height of an image dynamically while adjusting the browser window.
I used console.log() to get the value to check if my results are correct, and somehow the result is always 0! What am I doing wrong?
$(function(){
var ScreenHeight = $(window).height();
var ImageHeight = $('#bkgImages').height();
var ImageMove = (ScreenHeight-ImageHeight)/2
$('#wrapper').slideDown(500);
$('#bkgScreen').animate({opacity: .5}, 700);
$('#bkgImages').css({top: "-" + ImageMove + "px"});
console.log(ImageHeight);
});
I manage to get the window height result working but not the div element height. The other issue is this calculates the result only once per session, where as I need to function to run every-time a user adjusts the browser window size. How do I go about doing that?
I think it depends on the css property of the div, and you may refer to answer here https://stackoverflow.com/a/10656669/693110.
In short, you need to specify the div to have display: inline-block; property.