my web application has an and a SideNav (left) and horizontal Navigation on top.
The height of the is always based on the height of the loaded content. I have a "resizeMe" function for that.
But now I have the problem that the scroll bar flickers briefly when loading (of the iFrame) and then disappears again. Is there a way to make the scrollbar disappear by default in IE11?
I have already tried the following attributes on the :
<iframe name="Source"
id="Source"
src=""
frameborder="0"
scrolling=""
style="height: 905px; overflow: hidden; -ms-overflow-style: none;"
onload="resizeMe()">
</iframe>
height is calculated
Thanks! :)
I am having a site, which embeds another page,whose scrollbars are hidden and even do not show in IE 11(while loading). And the codes, I have used in the embedded site are:
scrollbar-width:none;
-ms-overflow-style:none;(You have used this, try the others)
::-webkit-scrollbar{width:0}You have used overflow:hidden; which not only hides the scrollbar but also disables scrolling, so using -ms-overflow-style:none; would be useless if you want to disable scrolling as you have already used overflow:hidden;. And the above codes hide the scroll-bar, but enables scrolling(unlike overflow:hidden;)
I would recommend you, that if you have embedded a site, which is owned by you, then try putting these codes in your embedded site. And I do not think that scrollbar style of iframe will be followed in major browsers according to this Stack Overflow answer.
Related
I am developing a site where I disabled regular scrolling simply using overflow: hidden; so the user has to click through the nav to interact with each part. I was testing the mobile view on an iphone X using safari and discovered you can bypass that using two finders to scroll. Is there a CSS or JavaScript workaround to disable that function?
Use overflow: clip instead of overflow: hidden;. As explained in MDN:
Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.
I'm trying to find a way to get rid of the bouncy scrolling behaviour on mobile devices (e.g. when there is no content below to scroll yet you are still able to do it and scroll content to top and when released it bounces back)
My html structure looks like this
<html>
<body>
<div id="wrapper">
<div id="container">
where all elements stretch to full height of the window. I tried overflow hidden on html and body, auto etc.. yet nothing seems to achieve a state where if you scroll than it doesn't scroll unless there is more content below.
It sounds like what you're looking for is to disable the scroll bounce for a UIWebView in iOS. If you're developing a native iOS app, you can disable the bounce by setting [WebViewObject].bounces = NO where [WebViewObject] is the UIWebView.
If you're just looking to prevent the bounce in the Safari mobile browser, I don't believe there's a way to do this.
Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.
On my website, I embedded a Youtube video with this simple code:
<iframe src="//www.youtube.com/embed/bpqTiwfzqdo" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
The results is the video that is at the bottom of the page here:
http://www.rpginsider.com/child-of-light-releases/
When in Chrome and I press the full screen button on that video, the video does not go full screen. Instead my whole browser goes full screen (as if I pressed F11) but not the video.
However, when I use Explorer or Firefox, full screen works just fine. So obviously I'm doing something wrong. Any help would be appreciated.
This issue can be caused by CSS Animations. If any of the iframe's ancestor elements is animated by CSS3 Animations with an (-webkit-)animation-fill-mode property set to "forwards" or "both", the video isn't set to fullscreen on Chrome.
try to remove
="allowfullscreen"
so past this one
<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>
This is not exactly what is happening with my embed, fullscreen works fine in IE and Firefox but the video is being pulled up and to the left in Chrome because I have transform translate styling applied to the iframe which is affecting the video in fullscreen mode, but at the same time I also have a position absolute applied to the iframe with a top of 50% which is not affecting the iframe in fullscreen mode.
I'm going to listen for fullscreen changes on the iframe and remove the translate css on the iframe and add it back when going back to normal. How can I detect when an iFrame goes fullscreen?
World's not perfect, the fullscreen api is not playing well with me. Scraping that idea, removing the translate css altogether and going back to negative top and left margins half the iframe's dimensions. Fullscreen works fine in chrome that way.
Found a solution. I had the same issue.
<div class="blog-post blog-large fadeInLeft">
My youtube iframe was in a card and that card had an css animation. Deleting that animation (fadeInLeft) solved the problem completely.
Try this with css:
embed,
iframe,
object {
max-width: 100%!important;
max-height: 100%!important;
}
This might help someone. I have just faced exactly the same issue in 2021 on Safari. The full screen button on the Youtube iframe will make the whole web page display full screen instead of the actual video. The problem was also related to CSS animation being applied to the parent element of the iframe so removing animation solved the problem.