On IE11, when there is a modal opened or a fixed element, the PDF's preview on just passed over all the content.
I tried to z-index etc but nothing seems to work, it works well on all other browsers.
Is there a solution only in CSS/HTML ?
Here's a example (only bugs on IE)
I try to check your sample code and find that you are using object tag to display the PDF which is not working in IE 11.
I suggest you to try to use Iframe to display the PDF in IE 11.
You can replace the object tag with code below may help you to solve your issue.
<div id="pdf">
<iframe src="https://www.vousnousils.fr/casden/pdf/id00264.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
Related
I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
I applied Overflow:hidden to <body> and <html> tags to stop scrolling of page when popup element is clicked this property working fine for me in almost every browser but not in Safari I googled for this solution but cannot find a solution to this so please someone help me in solving this thanks in advance
Could you try adding the overflow to the Body and the HTML tag?
html,
body {
overflow: hidden;
}
I am trying to show a pdf content in a Ext.Container of Sencha Touch 2. Tried several ways answered on SO but they all didn't work.
Few things tried, include:
Tried converting file content into html and extract the HTML inside the BODY tag and put it into Ext.XTemplate of the Container. This way I can only play cool with it, if HTML is being converted from a .doc file but if it was a .pdf file it messes up design because when I convert a pdf file into HTML then it adds position: absolute inside every DIV and with absolute position the parent element will not have any height and I am stuck with the scrolling issues.
for example:
<div style="position:relative;display:inline-block;;top:994px;left:712px;font-family:'Times New Roman';font-size:10pt;white-space:nowrap;">description</div>
Second try,
2. Tried putting PDF into IFRAME and EMBED tags as a link and put them into the Ext.XTemplate but these tags are also not working in mobile.
for example:
<embed type="application/pdf" width="800px" height="800px" src="example.pdf" />
<iframe style="position:absolute; z-index: 1; left: 0; top: 0;" width="100%" height="2000" src="example.pdf"></iframe>
Please give some idea how to display/open PDF(or its content, with atleast few formatting). Or do we have any plugin to display it. One final solution is showing using google docs but my initial requirement is showing PDF content in sencha touch 2 app not using any third party service(like google docs).
you can use inapp browser plugin for opening file in the iOS:
install inappbrowser cordoav plugin and open file like this:
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=no');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
It is very useful the PDFObject library, I have added this third-parties library to my project based on Sencha Touch 2 and its working in the browser, my current issue is show the pdf in Ipad.. :-(
I'm trying to embed a Vimeo video and force it to use HTML5 by default.
Here's a thread about doing the same thing I'm tying to do but with YouTube.
Here's another thread talking about getting the Vimeo HTML5 cookie
Here's a discussion of the issue on Vimeo's site. Basically, I would be doing it in response to a user's preference on my site so their concerns don't really apply.
Does anyone know a workaround or way to force HTML5 Vimeo embeds even when Flash is available? (I know the cookie should work in Safari but I have many Chrome users.)
Thanks.
Currently there is no way to force HTML5 with the embed script. The "universal player" automatically chooses the format based on the device.
The old embed provides a way to force Flash, but that's the only other option.
Let's hope for the option in the future.
On a browser with flash the player loads in html5 mode with the following code. The sandbox prevents the iframe from accessing any plugins including flash.
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
To allow the vimeo button to open the vimeo web page for the video you need the 'allow-popups' permission. It's not needed to play the video.
Edit: adding complete example
If you had just a black view it's possible that the video had a size of zero because I had the iframe set to fill parent with width 100%, but if the parent was shrink to fit then that size would still be zero. Here is a whole web page with the CSS to make the video fill up most of the page. Additionally the -webkit-transform will mirror image the video, and then rotate it slightly. If it was displaying in flash this would produce a black screen as it can't handle rotations at all. I have since found out that this probably won't work on firefox at all because it doesn't natively support h.264 which is all vimeo serves, and disabling plugins will disable whatever plugin is making h.264 work on firefox.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
position: absolute;
}
iframe {
-webkit-transform: scaleX(-1) rotate(2deg);
}
</style>
</head>
<body>
<div>
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
</div>
</body>
</html>
I've built a form, and next to my form element I've placed a flash object. When the page is loaded, the form is display: block, and the flash object is display: none.
The layout looks something like (the img is there so that if the user doesn't have flash, the gif animation will play instead):
<form id="form"></form>
<div id="upload-anim-div">
<object type="application/x-shockwave-flash"
data="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"
width="626"
height="600">
<param name="movie" value="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"/>
<img src="<?= PAL_STATIC_HOST ?>/music/introducing/img/Anim-placeholder.gif" alt="upload animation (gif)"/>
</object>
</div>
When I submit my form, which is just to upload a file, I hide the form and display my animation div as follows in javascript:
$('#form').hide();
$('#upload-anim-div').show();
This works great in all browsers except Safari, where a big white space appears. Right clicking this white space simply gives me the following menu:
Flash movie not loaded... _not clickable_
About Adobe Flash Player 10.5.blah...
Why is the movie not loaded/loading?! If I simply display the movie when the document first loads (by removing the javascript line that initially hides it) it loads and displays fine! Any ideas would be greatly appreciated!
---EDIT---
I've now tried using swfobject, but get exactly the same problem. I used this kind of code in my javascript to embed my swf with javascript after displaying the upload-anim-div:
swfobject.embedSWF("myContent.swf", "upload-anim-div", "626", "600", "10");
Anyone have any further ideas?
Sounds like Safari tries to shave the page load time by not rendering Flash in a hidden div. How are you putting the Flash into the div, is it just an object tag, or are you using something like swfobject? If you're using swfobject you could write the Flash to the div when you reveal it.
I think you should try to embed your Flash content with swfobject: