I added these css to a web page and opened it as a popup with js from another page. But the scroll bar is not appearing in the popup (but it appears in web pages other than a popup).
css:
html{
overflow: hidden;
}
body{
overflow: auto;
height: 100%;
}
js:
window.open(url, 'newwindow', 'width=1800, height=1600, resizable=yes, scrollbars=yes').focus();
Anybody knows a way to fix this?
Thanks in advance.
note: I'm unable to create a jsfiddle because I can't apply css to the opened window there
If there is a overflow: hidden on the html element, it won't display what is outside of the window and that's why there are no scrollbars.
Just remove it and it should work fine.
Related
How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!
You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.
You can make it go fullscreen with JS such as in this SO answer.
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* example on JSFiddle.
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.
How to set current page height and width from within JavaScript?
I am using ASP.Net Web Forms. I have some splash screens implemented as aspx web forms. I need to just redirect them and not to open by window.open() function.
How do I give size and position to current window?
I have tried the below code, but it did not work for me
<body style="margin:0px;width:600px; height:90%;" >
Try this
$(function() {
document.body.style.width = '600px'
document.body.style.height= '900px'
});
or if you are using jQuery...
$(function() {
$('body').css('width', '600px');
$('body').css('height', '900px');
});
Resizing the current window of the browser is actually impossible. That can only be done by the user (fortunatly :) )
You can set dimensions to a new window, with window.open();, but that's all.
As I said in comment : Just think about a web where every site could resize user's browser...
You won't be able to control width of body. Rather, you can use a inside your body and outside your content, and then set width, height and position of that .
Also, to set height of that in percentages, you will need to apply height:100% to both html and body in CSS.
So, your content could look like,
<html>
.....
<body>
<div class="content-wrapper">
.....
</div>
</body>
</html>
and your css can look like,
html, body
{
height: 100%;
}
.content-wrapper
{
width: 600px;
margin-left: auto; /* to center the div */
margin-right: auto; /* to center the div */
height: 90%;
margin-top: 10%;
box-sizing: border-box;
}
I am using shadowbox to open different links on a website. For some reason, Firefox does not show the horizontal scrollbar. It works fine in all other browsers.
I have tried this with no luck :(
link
I have also tried the following on the iframe page:
html {
overflow: -moz-scrollbars-horizontal;
overflow: scroll;
}
Anyone know whats going on?
shadowbox.css line 9 contains:
overflow-x: hidden;
Which hides the horizontal scrollbar.
You could overrule this by adding !important:
body {
overflow: scroll !important;
}
Add this in your default.css file and try:
html, body {
overflow: auto;
}
I am using Twitter Bootstrap's modal window, and I noticed when you scroll, the modal popup stays fixed while the background page moves. For demo, you can click on "Launch demo modal" button in the following page:
http://getbootstrap.com/2.3.2/javascript.html#modals
How do I avoid that and let scroll event controls the modal window instead? The options Bootstrap offers does not seem to include that.
The modal pop up is a <div> with position: fixed, and that is why it stays fixed when I scroll. However I can't set it to other values since it needs to stay popped up. Also i figured that if I set <body>'s style to overflow:hidden, the scroll bar will be hidden. But that is not what I want.
$('.modal')
.on('shown', function(){
console.log('show');
$('body').css({overflow: 'hidden'});
})
.on('hidden', function(){
$('body').css({overflow: ''});
});
You can add overflow: hidden on body.modal-open as per this answer
I solve the shift with
body{
position: fixed;
left: 0px;
right: 0px;
/*margin: auto;*/
}
I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?
Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');
You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}
In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom
None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.
By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)
This solved the problem for me:
body{overflow-y:auto}
Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.
add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}