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")
Related
I have a script that is creating a grid, and the grid elements are "re-positioned" every time the viewport width is changed. I don't have access to the script, nor did I write it. I think it's a Masonry grid.
I'm dynamically changing the content of the grid, so I need to somehow "refresh" (re-calculate) the grid without refreshing the page. On mobile I did this by changing the "initial-scale" meta tag (then resetting it) to force the grid to update. However the viewport tag is ignored on desktop, so I don't know how to actually make the browser think that page dimensions are changed and force a refresh on the grid.
Any ideas are appreciated, thanks.
Depending on how the script is setup you may be able to simply trigger the resize event causing it to recalculate based on the current size. If the script is actually tracking the size and checking for changes then you will need to find the best way to force the script to perform it's grid recalculation, which means examining the script. It might be as simple as changing the value of the variable where the script is storing the previously recorded viewport width right before you trigger the resize event.
FYI: If the script is loading on your page then you do have access to the script.
window.addEventListener("resize", function(){
// Resize event listener from masonry script
console.log("Masonry grid resized for width "+window.innerWidth);
});
// If using jQuery
$(window).trigger("resize");
// Plain JS version
window.dispatchEvent(new Event('resize'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If the masonry script is good it may have an API feature to do what you need, however I think you'd explore that already.
Alternatively...
Option #1: Modify a parent container
See if you can force a refresh by simply temporarily modifying a parent container. For example, increase container width by 1 pixel for an instant, and return back to the original width.
Option #2: Find the existing listener; find the functions
The existing script probably has a listener + actions for when the viewport changes size (as you describe happening). Inspect the script and find that listener, and see what it's running inside. It'll have some function(s) to calculate and render the grid, and you'd want to call those same functions in your own data-update function.
To find that listener, do a find for "resize", see what comes up.
Here's how a vanilla JS resize listener may look like:
var screenWidth = document.documentElement.clientWidth;
resizeRefresh(screenWidth);
function resizeRefresh(width) {
window.addEventListener("resize", function(){
newWidth = document.documentElement.clientWidth;
if (newWidth != width) {
width = newWidth;
// do stuff
}
}, true);
}
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'.
I have a set of divs like this:
<div id="body_container">
<div id="top_body">
</div>
<div id="bottom_body">
</div>
</div>
I also have this function:
$(function() {
$("#top_body").resizable({handles: "s",
alsoResize: "#bottom_body"});
});
The resizing works, but immediately upon starting the resize action, #bottom_body is assigned a fixed width (equal to it's width upon the start of the resizing action). Via css, both #top_body and #bottom_body are assigned a width of 100%. I want it to remain that way.
Is there a way to prevent the width assignment? I wish to allow the width to adapt to window resizes, but, with my current issue, the width assignment fixes the bottom div (but not the top one), breaking my interface.
I'm looking, ideally, for solutions that don't involve having to use JS handlers to force the width back to 100% whenever I use the resizable handle.
This seems to work perfectly http://jsfiddle.net/3XezL/1/
$(window).on('resize', function() {
$('#bottom_body').css({width: '100%'});
});
This will only run when the window width/height is changed, not when changing / resizing the height of your two divs, since it doesn't need to run then.
I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?
Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.
Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;
Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.