I want to get an html element's width like so:
var elementWidth = document.getElementById("myElement").style.width;
Then I want to assign this to the current window which is a popup created using:
window.open("myUrl","myName","width=200,height=200");
How would I go about doing that? Any pointers coz the windows cant be assign width & height values like elements.
This can be done by doing:
var elemWidth = document.getElementById("myElem").style.width;
var elemHeight = document.getElementById("myElem").style.height;
window.resizeTo(elemWidth,elemHeight);
Related
I found this question to get the height of an element that has not height Attribute. But is it possible to get or calculate the height before it is rendert?
for example I have this Code:
var element = createElement("div");
element.style.width = "20px";
element.innerHTML = "XXXXXXXXXXXXXXXXXXXXXXXXX";
If I know the fontsize and other stuff like padding etc. , is it possible to get the height it would have if it gets rendert?
I need this because I need to know how heigh the element is before it gets rendert to change things that happens after that.
I`m trying build function who on document width changes get current webpage windows size and save last of past width with function, so i need past value.
So in pseido code it will be:
on resize(function){
var CURENT_W = 100
**var PAST_W = 90**
var MODIFIER = CURENT_W - PAST_W
jQuert('#element').css('atribute': MODIFIER)
});
So i need function who tell me how much window is resized.
How to get old document width? It`s possile?
Maybe there is some better method?
I've made a little snippet for you, you can use it as you want, just try to understand the script.
I'm 100% it can be done in some easier way, but this is the first that came to my mind
$(document).ready(function() {
// store a variable with body's width
var initial = $("body").width();
// render the body's width value on the selector
$("#initialwidth, #actualwidth").text(initial);
//now let's resize
$(window).resize(function() {
// Before doing some maths, let's get the width from #actualwidth span instead of directly from the variable
// the span has the value "static" because it was defined outside the ".resize()" event
var staticWidth = $("#initialwidth").text();
var newWidth = $("body").width();
//new width - initial width = difference
var finalWidth = newWidth - staticWidth + "px";
$("#actualwidth").text(newWidth);
$("#diff").text(finalWidth);
});
});
Here's a jsfiddle:
http://jsfiddle.net/2dcsonjg/
I want to resize my safari browser window to match the height of a div with id 'po'.
I have the following javascript:
var divHeight = document.getElementById('po').offsetHeight;
console.log(divHeight);
divHeight = divHeight + 30;
var y = parseInt(divHeight,10);
var w=window.innerWidth;
window.resizeTo(w,y);
console.log(divHeight);
The output of the console is:
83
113
But the window gets resized to an actual inner height of only 30!
Why isn't the window resizing correctly? If I measure the div (it contains a table), the height of the div is indeed 83. So why won't the window size match? How to fix it?
The problem was in my calculation and misunderstanding how window.resizeTo() works.
The size that window.resizeTo() sizes to includes the chrome(scrollbars, address bar,favourites bar, etc)! Once I added some "padding" to include that, it worked as expected.
How to get them by using JS and jQuery?
I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.
Thank you!
From the jQuery website:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!
i Have found the best way is with Javascript.
<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;
//code goes here
</script>
Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:
var newHeight=height + 'px';
var newWidth=width + 'px';
There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.