My webp images are not loading in Safari and Edge, so I want to use srcset to use the png variant instead if the browser can't load the webp file. Currently this is how I define my image:
<img
:srcset="`${require('../../assets/art/blob-right-side.webp')} ${require('../../assets/art/blob-right-side.png')}`"
:src="require('../../assets/art/blob-right-side.webp')"
class="hidden-sm-and-down"
height="500"
width="217"
style="position: absolute; top: 300vh; right: 0;"
/>
But my browser (Chrome) returns the following errors:
Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate
"/images/blob-bottom-desktop.webp?92a59c3833d65ecd5913e9d37354bcc8"
Can anyone explain to me why this isn't working? I can't find much information about it.
Possible you missed comma between values
:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}`"
And I don't see any rules for resolution switching
:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}` 1.5x"
Related
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>
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 have deployed fancybox v2.0.4 on my RoR v3.0.3 web app to create a photo gallery. I've been able to get fancy box to product a large image when a thumbnail is clicked, but am having several issues with the appearance and behavior not working as expected.
1st issue - I can't seem to get the fancybox buttons to appear. I've gone into the jquery.fancybox-buttons.css and changed the paths for the various "background-image: url" to point to the fancybox folder in the public/images folder (standard RoR). Here is an example:
background-image: url('./images/fancybox/fancybox_buttons.png');
My first suspicion is that I am referencing this incorrectly, but I've tried every relative path iteration I can think of.
2nd issue - The default div that shows fancybox image keeps getting tucked behind the div that has the image_tags in it. I have changed the z-index in the fancybox css files to be greater than the z-index in the other divs on the page. I can't seem to change this at all. Here is the default fancybox div I am referring to:
<div class="fancybox-wrap fancybox-default fancybox-opened" style="display: block; overflow-x: visible; overflow-y: visible; height: auto; width: 486px; position: fixed; top: 20px; left: 468px; ">....</div>
3rd issue - I am unable to get any of the drop shadows or other "stock" css effects to appear. I have checked that the source code is pointing to the appropriate css files. I have placed all the fancybox css files in the standard RoR stylesheets folder and all the .js files in the standard javascript folder. In my Application.html.erb file I have explicitly called for these javascript libraries and stylesheets inside my tags.
OK, I found the problems that were preventing this from working:
The path for the fancybox_sprite.png and all the other urls in the jquery.fancybox.css file need to be as follows (assuming you are placing the images in the default "public/images" folder in a standard RoR application:
background-image: url('/images/fancybox_sprite.png');
I had conflicting jquery-.min.js files in the javascripts folder.
Case closed.
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
table.uitbetaling {
margin: 11px 18px 10px 19px;
border: 1px solid #8ccaee;
width: 498px;
padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
margin: 0;
border: 0;
padding: 0;
width: 496px;
}
table.uitbetaling tr {
margin: 0;
border: 0;
padding: 0 1px 0 0;
}
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">
It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
Try:
table{border-collapse:collapse;}
Its good practice to always set table{border-collapse:collapse;} in the css, and then use cell-padding="0" and cell-spacing="0" in the html anyway.