Scrolling iframe on iOS causes the page to scroll - javascript

I have an application that displays an iframe that the user needs to be able to scroll on an iPad.
Apparently you can't scroll iframes and other elements by default on iOS unless you use the special -webkit-overflow-scrolling in the CSS.
So for example I have the following HTML (based on David Walsh's solution here: http://davidwalsh.name/scroll-iframes-ios)
<div class="frameContainer">
<iframe src="./frame.html"></iframe>
</div>
and the CSS:
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
html,
body
{
height: 100%;
background: #ff0000;
}
.frameContainer
{
position: absolute;
top: 40px;
left: 80px;
right: 80px;
bottom: 40px;
background: #ffffff;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* removes spacing below iframe */
font-size: 0;
line-height: 0;
}
.frameContainer iframe
{
width: 100%;
height: 100%;
}
However you can cause the page (red area) to bounce and lose focus of the iframe by either flicking the page (around the iframe) or by varying the speed at which you flick (e.g. dragging with your finger slowly). Or by tapping on the page around the iframe.
Demo here: http://preview.na-software.co.uk/Demo/ipadscroll/
I've tried some plugins like: http://www.hakoniemi.net/labs/nonbounce/ to prevent the page bounce, but because it's an iframe, it still causes the page to have a bounce effect when interacting with the frame because it's a different document level. I've also tried bubbling up the touch events from the iframe to the parent level so the plugin catches it, but the page can still bounce.

Related

How do I configure a full height Angular Material Dialog that closes when clicking on the overlay?

In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}

Chrome replaces main window when loading iframe

I wrote a simple viewer for Greek syntax trees:
http://ibiblio.org/bgreek/resources/syntax-trees/reader/
On Chrome, when I am not running this locally, the main window is replaced when the iframe is loaded. See below. How can I fix this so that the main window remains on all browsers?
The main page has an iframe into which I load an XML file that is formatted with its own CSS stylesheet:
<iframe id="display" src=""></iframe>
The code loads the file into this iframe when the button is clicked:
function loadPassage() {
var passage = document.getElementById("passage").value;
document.getElementById("display").src = treeFile(passage, "nestle1904");
}
The body hides the scrollbar, the iframe does not:
body {
background-color: antiquewhite;
overflow: hidden;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: 100em;
}
Remove the attribute overflow: hidden from the element body and add overflow: hidden to the element html
html {overflow: hidden}
body {background-color: antiquewhite; margin: 8px;}
so you will have no scrollbar in your browser, but there will be in iFrame.
Here's what I learned: when the iframe is loaded, some browsers scroll past the area of the parent window to make room for the iframe, some do not. If I enable the scrollbar in the parent window, it is easy to see this happening. If I disable it, it looks like the parent window disappears, but it is merely scrolling past the top part of the window without providing a way to scroll back to it.
I can get rid of this problem by reducing the size of the iframe. That gives me a simpler problem to solve: how can I create the child window to take up all the remaining space beneath it in a device independent manner.
And someone provided a nice answer here:
How do I make an iframe fill the rest of the page?
So it works now, using this CSS:
html {
overflow: hidden;
background-color: antiquewhite;
}
html, body, iframe {height: 100%}
#top {
height: 120px;
}
form {
font-size: large;
font-weight: bold;
color: blue;
}
form input {
background-color: white;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: calc(100% - 120px);
}

How to disable scrolling on mobile browsers?

I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).
The popup element has following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
And when the user opening a popup, the following code is called:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
This solution perfectly work on a desktop browser, but unfortunatly not on mobile.
On mobile, it always possible to scroll (but the scroll speed is slow).
How can I disable also scrolling on mobile browser?
Thanks in advance.
Change body position to fixed. That will disable the scroll.

Improving dialog box scrolling

I have created a dialog box that is aligned to the middle of the screen using a combination of position:fixed, overflow:auto and display:table, as follows:
.dialog {
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000000;
background-color: rgba(193, 208, 145, 0.75);
text-align: center;
overflow: auto;
}
.dialog > div {
display: table;
width: 100%;
height: 100%;
}
.dialog > div > div {
display: table-cell;
vertical-align: middle;
}
.dialog > div > div > div {
display: inline-block;
text-align: left;
min-width: 300px;
max-width: 640px;
border: 1px solid #004000;
background-color: #e2ffcd;
border-radius: 6px;
}
Demo
This works to good effect, however a problem is encountered when the contents of the dialog box are larger than the screen - this happens fairly often on mobile devices, but it can also happen on desktop in certain cases depending on contents.
When this happens, scrolling becomes awkward. On desktop, the user sees two scrollbars, and using the mousewheel will scroll the page behind the dialog box if the dialog itself has reached the end. On mobile, it seems to take some serious persuasion for the touchscreen to understand that the user wants to scroll the dialog, not the entire page. Testing on my 3DS Browser was the worst as the circle-pad would scroll the entire page, not the dialog.
How might I go about improving this situation? Ideally I'd want the page's contents to be locked in place while the dialog itself sort of "becomes" the main page for the purposes of scrolling. Note that the dialog is created by JavaScript, so JS-based solutions to this problem are acceptable.

How to add a banner inside a div at the bottom?

I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.

Categories

Resources