I'm developing an ionic app in iOS, I placed the pdf inside an iframe just by simply doing the following:
<iframe src="https://docs.google.com/gview?embedded=true&url=http://example.com/resources/myfile.pdf" mozallowfullscreen marginwidth="2" marginheight="2" width="90%" scrolling="auto"></iframe>
I didn't used cordovaInAppBrowser because I ran a lot of problem like after clicking the button the InAppBrowser doesn't open unless I don't minimize the app. So I just used iframe as the workaround. But the problem now is that, after the pdf being loaded, and the user clicks on the full screen of pdf, there's no back button. Is there a way I can remove the full screen button from the pdf or add a back button on full screen mode of pdf? I tried removing the mozallowfullscreen but doesn't work since it's for the iframe not for the pdf.
P.S.
I tried accessing the div inside the iframe that holds the button for full screen, but no good, it doesn't get the div, it's probably because I'm violating the Same Origin Policy.
Here's the code on how I tried to access the div:
$('#myframe').each(function(){
console.log($("div[role='toolbar']"));
});
Related
The video below describes adding a "Skip to main content" link at the top of a web page and making it visible only by users with screen readers, using plain CSS.
The idea is to improve accessibility by allowing screen readers a way to bypass all the navigation, etc. and get to the main content
How can this be done with Tailwind CSS?
https://www.youtube.com/watch?v=VUR0I5mqq7I
Tailwind CSS let you designate elements as on visible to screen readers via "sr-only"
Code example (just inside the tag):
Skip to main content
And then add <main id="main-content"> where the main content begins on that page.
And lastly, add the closing </main> tag right after the page's main content ends.
Link to TailwindCSS's screen reader only documentation
So here's my predicament.
In mobile safari, overflow:hidden; doesn't work as it does on desktop. On desktop, adding this to the body disables scrolling in the browser, but then you can still scroll inside another div, say a drawer or a lightbox.
On mobile safari, you can still scroll the page with a touch and drag with your finger.
I came across a possible solution:
document.ontouchmove = function(event){
event.preventDefault();
}
However, this disables scrolling altogether. Even in a drawer or lightbox div where I need to still allow scrolling.
I also came across another "fix" where people add position:fixed; to the body. This doesn't work in my scenario because the user could already be halfway down the page when they open a drawer/lightbox. This method would put the body in a fixed position, thus losing their scroll position of the body.
How can I disable any movement/scrolling of the body on mobile safari, but still allow scrolling in a drawer/lightbox?
The document has a number of divs only one of which is visible at any one time (others are display:none).
When a div which was visible is hidden and then made visible again the videos within the div don't play any more.
However this is only a problem on iPad.
Any suggestions as to how to re-initialise them?
thanks
Derek
Having searched in every possible way for a solution it does seem that videos using video.js in a container that is hidden after video.js has initialised them become unplayable when made visible again.
So for now, when my pages detect that the browser is on iPad/iPhone they use the native video player.
To do this I place the includes for the video.js inside a javascript block in the head of the page so they are not loaded if iPad or iPhone is detected.
<script type="text/javascript">
if(!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
document.write('<link href=\"\/\/vjs.zencdn.net/c/video-js.css\" rel=\"stylesheet\" type=\"text/css\" \/\>');
document.write('<script src=\"\/\/vjs.zencdn.net/c/video.js\" type=\"text/javascript\"\>\<\/script\>');
}
</script>
I had this problem on firefox but it was because I was trying to stop the video after move its container div to a hidden div. I removed the "stop" code, the player seems to reinitalize?(and stop by itself) after being moved from one div to another on chrome, firefox and opera.
Before this simple solution, I thought to just re-add the video original html via javascript, it probably can be done after the div is hidden or before it is shown.
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch
I am currently having some trouble displaying a you tube video on my custom fan page. I am using Static HTML I Frame Tab to embed this code. The problem is that the facebook notifications or search drop down menu continues to go behind y you tube video when using IE.
I have included param name="wmode" value="transparent" within the embeded you tube code but for whatever reason the fb drop down menu continues to go behind the video. The fan page is https://www.facebook.com/blaineostrander
Again, this issue only seems to be happening in IE
Thank you in advance
Into src in iframe put ?wmode=opaque
Ex :
<iframe width="420" height="315"
src="http://www.youtube.com/embed/pVllEZirODQ?wmode=opaque"
frameborder="0" allowfullscreen>
</iframe>
Works great for me