I have a problem with iOS browsers
This is starter conditions:
- We have a simple html page and it contains iframe
- iframe also contains simple html page with form
- iframe haven't scroll and it sizes is fixed
Bug:
Now, if we will open this page on iPhone(from Chrome/Safari browser) and start fill form,
then in some moment when text printing, page scroll down by itself
This is example link
<div id="container">
<iframe src="https://www.w3schools.com/php/demo_form_validation_complete.php" frameborder="0"></iframe>
</div>
Why is this happening? How to prevent these automatic "jumps" of the page?
This might work:
HTML:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
CSS:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Source: https://davidwalsh.name/scroll-iframes-ios
Related
Is there a way to use the browser native scrollbar when scrollOverflow:true instead of the additional scrolloverflow.js file?
I want to use fullPage.js only on the home page of a WP site and I want all pages to have the default scrollbar.
I managed to solve it by setting scrollOverflow:false (default value) and defining an extra container inside the desired fullpage section like this:
<div id="fullpage">
<div class="section">
<div class="inner-section">...</div>
</div>
...
</div>
CSS:
.inner-section {
height: 100%;
overflow-y: scroll;
}
This seems to work fine on desktop screens, but on mobile screens, there are problems with swiping.
I have an iframe inside a main page container. I have managed to remove the second scroll bar that is in the main html. Leaving only the iframe scroll, this was done by request of a higher up. We have mandatory headers and footers that need to appear at all times. We decided to get creative and added some .js to out html that makes the headers and footers appear and disappear. The only problem is this causes the iframe to not take up the whole page height. because if the headers and footers are shown when mouse is over them and the iframe is too long then the footers get hidden under the page. (cant scroll down to them because the scrollbar was removed.)
What I am trying to get at is there a way I can have both work? Ill post the code.
*JavaScript*
function show_topnav()
{
document.getElementById('nybe-top-nav').style.display="block";
document.getElementById('nygov-universal-navigation-frame').style.display="block";
}
function hide_topnav()
{
document.getElementById('nybe-top-nav').style.display="none";
document.getElementById('nygov-universal-navigation-frame').style.display="none";
}
function show_bottomnav()
{
document.getElementById('nybe-footer').style.display="block";
document.getElementById('nygov-universal-footer-frame').style.display="block";
}
function hide_bottomnav()
{
document.getElementById('nybe-footer').style.display="none";
document.getElementById('nygov-universal-footer-frame').style.display="none";
}
here is the html
<header id="test-header" onMouseLeave="hide_topnav()">
<iframe id="nygov-universal-navigation-frame" title="NY Gov Universal Navigation" class="nygov-universal-container" width="100%" height="86px" src="//static-assets.ny.gov/load_global_menu/ajax?iframe=true" data-updated="2014-11-07 08:30" frameborder="0" style="border:none; overflow:hidden; width:100%; height:86px;" scrolling="no">
Your browser does not support iFrames
</iframe>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-T4FP6H" height="0" width="0" style="display:none;visibility:hidden" title="Google tag manager" ></iframe>
</noscript>
<script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;j.type='text/javascript';j.async=true;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T4FP6H');</script>
<!-- End Google Tag Manager -->
<div id="nybe-wrapper">
<!-- Begin the top navigation -->
<div id="nybe-top-nav">
<div id="nybe-account">
<span class="glyphicon glyphicon-user"></span>Your Account
</div>
<div class="nys-global-header horizontal unstacked">
<h1><span class="glyphicon glyphicon-home"></span>New York Business Express</h1>
<ul id="nys-global-nav">
<li>
Start your Business
</li>
<li>
</li>
</ul>
</div>
</div>
<div id="hidden-top" onMouseEnter="show_topnav()"> </div><!-- helper div for onMouseEnter -->
</header><!-- end header -->
here is some of the css
html{
overflow-y: hidden;
}
body.nybe-opa-frame #main-content{
margin:0px;
padding:0px;
}
body.nybe-opa-frame #main-content > iframe{
min-height:650px !important;
width:100%;
border:none;
}
body.nybe-opa-frame #nybe-footer {
margin-top:-5px;
}
/* end opa frame*/
/*#hidden-top{background-color: #142047;}*/
/*added two help divs to use on mouse enter events for the page
opacity is set to 0 so they cant be seen */
#hidden-bottom,#hidden-top{
opacity: 0.0;
height: 20px;
}
/*set all the headers and footers to display none*/
#nygov-universal-navigation-frame,#nybe-top-nav,#nybe-footer,#nygov-universal-footer-frame{
display: none;
}
most of the code was not made me my higherup created most of the page the iframe comes from an external source.
Any Ideas would be great! I know this is kind of a weird post. What i Have now works pretty well but I feel like there is a better more efficient way to do this.
Thanks!
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.
I'm working on a div that overflows with a scroll. The expected behavior is when the scroll-able div is focused via clicking on the div or clicking on the scroll bar, keyboard commands will be enabled (i.e. cursor keys, page up page down etc.). Here's some sample test code:
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div style="width:200px; height:500px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
<div style="width:150px; height:2000px;"> </div>
</div>
</body>
</html>
This will work on IE, Chrome, Safari. But for Firefox, the keyboard actions are only activated when clicking on the div, NOT the scroll bar itself, so this is the problem.
Apparently making the div tab-able solves the problem! I simply added tabindex="0" attribute and in Firefox clicking on the scroll bar will now enable keyboard controlls.
I am running IOS 5.1.1 on an IPad One. My application is a HTML5 App and uses JQuery Mobile. I have an IFrame that is programmatically inserted. The IFrame has some criteria that is then used to generate a PDF inside the IFrame.
the PDF won't display unless the I-Pad is rotated.
I cannot scroll the IFrame
On I-Pad 2 (running 4.1.3) I have no problems it displays and (two finger) scrolls fine.
The code is as follows:
JQM Page, Content Section
<div class="content overflowScroll" data-role="content">
</div><!-- /content -->
CSS
.overflowScroll {
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The IFrame Insert
strHtml = '<iframe src="' + fullUrl + '" width="100%" height="95%" style="background-color: #FFFFFF;"></iframe>';
$page.find(".content").empty().html(strHtml);
Update
The problem looks to be IOS5 as the same thing happens on a mobile running IOS5. Is there a good alternative here? Perhaps If i remove dependancy from an iframe?