We Keep Coding

No scroll bar in popup window

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.

Absolute positioned div, prevent background scroll

I'm using a Bootstrap popover for a dynamic list that can be several pages long. I simply added a overflow: scroll to it and it works, however if the page is longer than the list, it continues scrolling past the popover.
Is it possible to disable scrolling of the background content while the popover is open?
In other words can you have an absolute positioned div scroll while disabling scrolling of the background content?
UPDATE: Fixed the issue based on both answers
$('#message-preview-trigger').on('show.bs.popover', function () {
$('body').css('overflow', 'hidden');
});
$('#message-preview-trigger').on('hide.bs.popover', function () {
$('body').css('overflow', 'visible');
})

Set both overflow: hidden; to body element and overflow: auto; to the modal dialog when the modal is open.
To be more clear we'd need to see your code.

I've made a pretty simple example ;
Scroll
Your popup should be in another div:
<div id="shadow">
<div id="popup">
<a id='close' href="#">Close</a>
</div>
Then trying adding these CSS codes on the root div:
#shadow{
display: none;
position: fixed;
top:0;
bottom: 0;
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.6);
}
**Then there's the little JS trick : **
$('#open').click(function(e){
e.preventDefault()
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
$('#shadow').css('display', 'block');
})
$('#close').click(function(e){
e.preventDefault()
$('body, #shadow').removeAttr('style')
})
Hope it Helps..... :)

Javascript: Disable iOS scroll-to-top when status bar is tapped

I've got a site, and I want to disable all scrolling when a lightbox pops up, and then re-enable it when the lightbox is closed.
I've got this:
document.ontouchmove = function(e){
if (stopScroll) {
e.preventDefault();
}
}
Which works great for manual scrolling, but the user can still tap the status bar and get taken to the top of the page (and now the lightbox isn't centred anymore, or worse still, totally off the page). I'm using JQuery Mobile. How can I temporarily disable this functionality in iOS?

I don't believe this is possible. A better solution to the problem would be to prevent your lightbox from breaking when scrolling occurs by changing the lightbox position to fixed instead of absolute:
</style>
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background:#ccc;
width:100px;
height:100px;
}
</style>
<div class="centered">I won't scroll off page</div>
Another option is to check for the scroll event and restore the original position:
$('.show_popup').on('click', function(){
var position= $(window).scrollTop(); // save pos
// show popup
$(window).scroll(function(){
$(window).scrollTop(position); // restore pos on scroll
});
});
$('.hide_popup').on('click', function(){
$(window).off(); // remove handler
});
Example: jsFiddle

Why are two vertical scrollbars showing?

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;
}

disable background in jquery popup

OK, So i have this snippet http://jsfiddle.net/8vFEd/ here;
whenever the popup comes up, I either want to disable the background, so that users can't click on another language until they close the first popup, or how would I accomplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.

My suggestion would be to put an overlay over the background which will "catch" clicks through to the rest of the page. Add the following to your $('.prop a').click() function, before the <div class='lang'> append call:
$("body").append('<div class="modalOverlay">');
and this to your css:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}
Then in your code for handling "close" clicks, remove this .modalOverlay from the DOM. Remember to add the overlay before your popup window so it sits behind the window (or add "z-index: 5" to your overlay css and "z-index: 6" to your popup css)
I would also suggest modifying your .lang css rule to be position: absolute; or fixed instead of relative.

Add this at beginning of your onclick
$(".lang").remove();
That will remove or clear the div with lang class before repainting the DOM with a new one.