I would like to disable browser's scrolling when an event happens, but not remove the scrollbar ?
I would like something very similar to setting CSS's overflow:hidden to the whole document. My reason is that doing so changes the browser's width, hence I will have to re-align the body.
The best practise fix to the problem I think you're describing is this simple CSS:
html {
overflow-y: scroll
}
That forces the vertical scrollbar to always be visible, so that the browser's width will not change "when an event happens", and you won't "have to re-align the body".
Why not just set the entire web page to align:center? No manual re-aligning, and works with any screen resolution or browser :-)
Related
I have an iframe with scrolling="no" and overflow: hidden;
I need to be able to simulate scrolling with JavaScript alone from either the parent window or within the iframe (it doesn't matter).
Am testing on iOS 8 (iPhone) and I can't seem to be able to move the iframe through a touchmove event handler (or any way for that matter - even tried a setInterval).
For the code that moves the iFrame, I tried both window.scrollBy() and window.scrollTo() from within the iframe. I debugged and had no exceptions. I may be missing something.
Thanks in advance.
You could achieve it by css only. try the following to the selectors where you want that touch move.
webkit-overflow-scrolling: touch; /* lets it scroll lazy */
but you've to use the overflow: auto to get it working. If you wish to keep it within certain width or height, use fix values.
Is there any way we could disable the browser scrollbar itself?
I'm not sure if this is a stupid question, but I really hope there are any alternative ideas you can suggest.
I am creating a Site following a Parallax effect with timeout. I want users to disable scrolling the browser so that it wont make the presentation screen get behind/advance, making its flow distorted.
I have already found a way to disable scrolling using mouse wheel and key strokes (thanks and Credits to this --> How to disable scrolling temporarily?) but users can change the view by clicking on the browser scrollbar itself
$('body').css("overflow", "hidden");
Should do the trick. Or add it via your stylesheet.
I'm looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.
Oh Iframes and iPad - what a wonderful old chesnut you are. I know that:
iPad expands iframes to the full height of the content within it (almost like it was using HTML5's "seamless" property, but not quite since it doesn't inherit styles or events from the parent). Bizarre, annoying to many, but true.
<iframe height="100%"> is therefore useless since it sizes to its content not to the container
I need to wrap my iframe in a div - a la
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
or else introduce some trickery to set the scroll position of the frame (which I think is based on tricks mentioned in this article)
My issue is that content that is dynamically shown inside the iframe body (e.g. jquery tabs, accordion, etc) may cause the browser to crop the content at the display extent of the page.
E.g. if my "tabs" are most of the way down the visible viewport inside the iframe and I perform a two-finger scroll (or implement the one finger scrollTop hack) then after that content is scrolled into view, some of its content that was previously not drawn remains undrawn. Clicking to a second tab / back again causes the content to appear as if the page doesn't draw off-screen content. After this, if I then scroll back up to the top of the page the content isn't drawn for the start of the page (which was previously visible). Scrolling the page up and down a few times with a two-finger scroll resolves the issue.
I had read this article that stated that the problem was fixed. But it doesn't seem to be fully fixed; and still doesn't get around the issue that because you have to wrap your iframe in a div and put scrollbars on that div, desktop browsers may show a double scrollbar depending on how they interpret overflow:auto.
p.s. I'm using HTML5 boilerplate page both inside and outside the iframe, with the correct meta viewport settings.
I found I was also able to solve the problem by making the document as tall as the iframe content. (As suggested Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone) But in my case I didn't want the user to be able to scroll down in the now tall app, because its supposed to be a fullscreen application. I used this code to prevent vertical scrolling:
/*
Prevent Scrolling down.
*/
$(document).on("scroll",function(){
checkForScroll();
});
var checkForScroll = function(e)
{
var iScroll = $(document).scrollTop();
if (iScroll > 1){
// Disable event binding during animation
$(document).off("scroll");
// Animate page back to top
$("body,html").animate({"scrollTop":"0"},500,function(){
$(document).on("scroll",checkForScroll);
});
}
}
I evaluated a lot of options and wrote this blog post, including test code.
http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/
Hope this helps,
Topher
I'm assuming there is a bug in iOS safari in how it treats iframes with defined width / height. Without width / height being defined it tries to scale them automatically to fit their content without any scrolling needed.
The best workaround I've found is to not scroll the iframe at all, but rather to scroll a wrapper div inside the framed-in page.
Here's an example:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
This is a very tedious problem, especially if you are in a scenario where you must use a dynamically scaling iframe, in my case with the YouTube iframe API. You are not able to control the scroll properties of the iframe. It doesn't even work if you modify the iframe elements in the ios simulator/safari debug window.
The best solution that I found was to use negative positioning to remove the excess whitespace. Android may have mixed results so you have to use browser detection and apply that way.
I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Check this article out...
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible
I've got a javascript-based Scrolling Widget Thingy™. One of the things it does is create a fixed height div and gives it overflow: auto.
Alas on mobile Safari (and other mobile browsers) overflow: auto; doesn't show a scrollbar. Any content below "the fold" can only be found by accident.
Is there a way to detect this in javascript, without resorting to browser detection? e.g.
if (there is a scrollbar) {
/* give me a fixed height and a scrollbar */
} else {
/* Do something more suited to this situation */
}
I can only think of resorting to dirty tricks:
Create 50x50 box
Set box to overflow: auto
Flood box with text
Read box inner size: if 50x50, something went wrong
Store result in variable and destroy box
... given that there's actually a way to measure the inner size, scrollbar excluded.
It's a scary algorithm anyway, hundreds of things can go wrong... Consider it just an idea.