I am working on an extension that will give you a response based on your text, this works and is good and all, but the height of the browser action won't reset.
To try to fix this, I have attempted to resize the window using window.resizeTo and tried to manually set the height of both 'html' and 'body' using jQuery. Nothing has worked. Is this a bug with Google Chrome or am I doing something wrong? This does not make it work, as it stays at the same size.
As you can see in the pictures, the window starts out perfectly sized and then I enter a question and go back to the window being larger than it was initially.
The popup can't become smaller than its content and/or CSS allows.
Find the element and/or CSS rule that occupies the full height by inspecting the popup (right-click it and choose Inspect popup), point over various elements inside <body> to see them highlighted and their actual height displayed. If all the elements are smaller than the popup it could only mean that you have a CSS rule on <body> or <html> that specifies the minimum height. If possible, remove that rule from the CSS or override it.
The problem in your case was a CSS rule html {min-height: 100%} in one of the 3rd party styles.
Set both height and min-height for body and html, for example like this:
document.body.style.height = '0px';
document.body.style.minHeight = '0px';
document.documentElement.style.height = '0px';
document.documentElement.style.minHeight = '0px';
Or use 'auto' instead of '0px'.
Related
Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.
Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements.
I further discovered that the <html> element covers the whole area of the browser-window. Is it safe to use that DOM-node when it is about the document properties? I.e. getting the width/height for example?
Does by any chance <html> correspond to what is referred to as document in javascript?
EDIT: Side note on the setup:
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. Working with the <html> node here seems to work out so far. I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node.
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. It is not like a <body> or <span> tag. It tells the browser that the following code or information is HTML. Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. For more information on that, check out this page.
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight. This should get the height and width of the entire window (excluding any scrollbars or toolboxes).
You can also use documentElement to get the width and height of the entire document.
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery.
var width = $(document).width();
var height = $(document).height();
The html represents all markup and content in the document, but it does not correspond to the document object. Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, e.g. document.children[0]).
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight.
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. You can see this if you set both a background and a border on it; the background may extend outside the border. Moreover, the CSS spec also specifies that if no background set for html, the background of body is used instead.
I use window.open() to create a window without scrollbar
window.open("...url...", "...blah...", "width=650, height=350, resizable=yes, scrollbars=no")
How do I reset this "scrollbars=no" to "yes" to enable scrollbar in the popup window?
I try to use css "overflow:scroll" but not work for me.
--
Edit
I have added width and height to the specs, and it still not work.
When I search DOM tree, I found there is "scrollbars.visable = false".
I try to change it to true directly by using Firebug, and the scrollbar is visable and works fine.
However, it is not work when I use javascript to change it.
<script>
window.scrollbars=true; // this is not work
</script>
Specify scrollbars=1 and specify width and height, that way the scrollbars would show when the content is larger than the specified window width and height.
window.open("...url...", "...blah...", "scrollbars=1,width=600,height=600")
I've seen lots of posts that talk about the getting width of the browser viewport, but what I want to find is essentially the width of the browser viewport if it were just wide enough to avoid a horizontal scrollbar.
I'm using the Prototype JS framework and have looked at various options using that and using pure JavaScript. For example:
$(document.body).getWidth() and document.body.clientWidth return the viewport width excluding margins.
document.documentElement.clientWidth and window.innerWidth return the viewport width including margins.
I've tried to be sneaky too: I absolutely-positioned a known-width DIV against the right-hand edge of the page (i.e. CSS right:0) with the intention of getting its left-edge position, but that actually gets aligned with the right-edge of the viewport.
The only thing I've found that works is to use JavaScript to scroll right until it won't scroll anymore (simply using scrollBy(1000000, 0) will usually be enough, but a while loop would obviously be more reliable), then get the horizontal scroll offset and add that to the viewport width. But I don't want to scroll the window: I want to inspect it somehow!
Any suggestions appreciated, even jQuery ones as at least then I can see how jQuery does it.
Here's a simple example showing that document.body.scrollWidth doesn't work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="document.getElementById('sw').innerHTML = document.body.scrollWidth">
<p><code>document.body.scrollWidth</code> = <span id="sw"></span></p>
<div style="position:absolute;left:0;bottom:0;width:1980px;background-color:#ccc;padding:10px;">This DIV is 2000px wide including padding.</div>
</body>
</html>
The output of this should show that the width is 2000px, since that's the width of the widest part of the page. It doesn't.
what about
window.screen.width;
document.body.style.width = (window.screen.width - 15) + 'px';
window.screen.width - 15 is enough to avoid horizontal scroll-bar. 15 is vertical scrollbar width.
for width:
document.body.scrollWidth
for height:
document.body.scrollHeight
EDIT: for IE you'll have to specify position:relative for the body tag
Browsers don't treat html and body like ordinary elements. In particular many browsers are really buggy with respect to how they treat scrollWidth etc. on the body element.
The only real solution is to wrap all your content in one huge div for the entire page and use that. Because the div is an ordinary element it isn't affected by the bugs that cause the weird behaviour for body and html.
I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed.
I want to set the max-height to all of them.
To do it, I go through the array of tabs and do the following
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
The problem with this approach is that offsetHeight is working only for the active tab that is displayed.
So, what's the Height of the ones that are not shown, when they will be shown?
Because the inactive tabs are set to display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.
Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.
For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:
And if you don't want the hidden cells to collapse, you could also use visibility:hidden; like stated above.
As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):
visibility:hidden;
with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).
A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.