This standalone example has a DXFilter to render a gradient, it renders in quirks mode. IE10 has 'show legacy filters' set to off, I see it in the 'internet' zone. I still see the gradient?
from: http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx
"DirectX-based Filters and Transitions (DX filters) are obsolete in Internet Explorer 10 for webpages in the Internet Zone. "
Why does this work?
<!-- Comment before Doctype to force quirks mode in IE6/7 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><meta http-equiv="X-UA-COMPATIBLE" content="IE=5">
</head>
<style type="text/css" >
.SomeDiv
{
WIDTH: 50px;
HEIGHT: 50px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00ff00', EndColorStr='#ff0000');
}
</style>
<div class='SomeDiv'>
Hi
</div>
</html>
Obsolete does not mean removed. In this case, there are two reasons:
The comment before the doctype triggers IE5 quirksmode
The site is running in the Intranet Zone or Trusted Sites Zone
If it is inconsistently appearing in the Internet Zone, there are two reasons:
End-users can change these settings (for these document modes only) by using Internet Options to change the security settings for the zone in question. Administrators can also use Group Policy.
Related
I am looking to use the source code of an email which has the desired template that i need in the Microsoft Graph API.
The standard format for this looks like so:
"message": {
"subject": "Meet for lunch?",
"body": {
"contentType": "HTML",
"content": "The new cafeteria is open."
},
The sourcecodes template that i am looking to use already has contentType etc within the code.I have tried removing contentType and content and just having the source code within the body but this still does not work. Below is start of the source code that i am looking to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="http://www.opusenergy.com/wp-content/uploads/2016/03/Favicon-150x150.png" />
<title>Opus</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
Any help will be greatly appreciated, Thank you.
The above payload is not what Graph API looks for. You need to specify the payload for the create message API call and the structure is given in the Graph API document. Still if you want to customize, you can do it, by making sure to modify/customize in-lines with Microsoft Graph API recommendation. Say i will put the HTML content inside the content of the Graph API call, specify the contenttype as HTML. This is the way i would start testing it make sure whether it's working or still i need to modify so that the message can show correctly in Outlook or not.
You tried the above recommendation and confirmed that it works.
If i want to send out email/template then i would first make sure it works in Word/Outlook; so that you can validate the HTML/CSS tags are working in, as i know that not all tags are not supported. Please keep this best practice and plan it accordingly. It will help you to build the template as you wish and you're guaranteed that the Outlook will show-up them as well.
I'm trying a few different ways, but I can't get a pdf generated with Flying Saucer (from an html file) to show the unicode character for Indian Rupees - "₹"
This is what I have currently:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family: Arial Unicode MS, Lucida Sans Unicode, Arial, verdana, arial, helvetica, sans-serif;
}
#font-face {
font-family: 'Arial Unicode MS';
src: url(arialunicodems.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: UTF-8;
-fs-pdf-font-encoding: Identity-H;
font-weight: normal;
}
</style>
</head>
<body>
<p>We want to see a Indian Rupees symbol between the asterisks on one or more of these lines, in the PDF (if any of the symbols make it through to the PDF then we're good):</p>
<p>Using the glyph itself in the markup: * ₹ *</p>
<p>Using ₹ in the markup: * ₹ *</p>
<p>Using ₹ in the markup: * ₹ *</p>
</body>
</html>
which represents lots of different experiments, none of which have worked. The font file it refers to is sitting next to the html file version of the above.
The font itself seems to be being loaded, in that the text in the pdf file looks like Arial. It's just missing the Rupees symbol. I don't know what else to do - i'm pulling in a unicode font, and the html file itself looks fine, when viewed in the browser. When I print it out of chrome it looks fine too, so the problem is definitely with flying saucer I think.
I'm using Flying Saucer as follows:
/usr/bin/java -Djava.awt.headless=true -cp .:$FS_PATH/acts_as_flying_saucer/lib/java/bin:$FS_PATH/acts_as_flying_saucer/lib/java/jar/minium.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/itext-paulo-155.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/core-renderer.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/java-getopt-1.0.13.jar Xhtml2Pdf /home/max/font_test.html /home/max/font_test.pdf
Can anyone see if I'm doing anything wrong?
I'm answering my own question here in case anyone else makes the same mistake. The answer turned out to be really simple - it's not in the font! Turns out that the "₹" symbol was only invented in 2010, and so is not present in a lot of Unicode font files, including the one I used.
It worked in the browser because the browser (Chrome) was automatically looking for it in other character sets (without me explicitly asking it to), and found it in Deja Vu Sans as it happens (the fallback for Linux Chromium).
I changed my code to use the older (but still acceptable) "₨" symbol, but a more proper fix would be to include a font that actually has the modern Rupees symbol.
I'm trying to load an epub on my page using epub.js library and its not working on IE 11, it works perfrectly on chrome and Firefox though.
I'm not getting a script error, I don't get a message in the console log, fiddler says all scripts (including zip.js and my epub) are downloaded properly.
It just doesn't load, the iframe embedded has a src="" property and an empty html body. as in the following snapshot.
Here is my html page content:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="content/epubjs/epub.js"></script>
<script src="content/epubjs/libs/zip.min.js"></script>
</head>
<body>
<span onclick="Book.prevPage();">Prev</span>
<span onclick="Book.nextPage();">Next</span>
<div style="height: 700px; border: 5px solid red" id="area"></div>
<script type="text/javascript">
EPUBJS.filePath = "content/epubjs/libs/";
</script>
<script type="text/javascript">
var Book = ePub("content/aliceDynamic.epub", {
version: 4,
restore: false, // Skips parsing epub contents, loading from localstorage instead
storage: false, // true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
spreads: false, // Displays two columns
fixedLayout: true, //-- Will turn off pagination
styles: {}, // Styles to be applied to epub
width: false,
height: '700px'
});
Book.renderTo("area");
</script>
</body>
</html>
I tried to play around with the options parameter, set things to false and true here and there but it didn't help.
It looks like it is a problem with the current version of epub.js and internet explorer 11. If you try and load the moby dick page you should see the same problem.
Try setting a break on all exceptions (even handled ones) in the javascript engine of IE, and you will see that the javascript throws an exception saying that "'XPathResult' is undefined".
Common recommendations to correct that seem to be installing the wicked-good-xpath library in order to sidestep ie11 lack of XPath support. Install the library and initialize it before trying to load you epub.
If this doesn't correct your problem, you may have to wait until the issues are solved since you don't seem to be the only person who encounters it.
I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
When I display my app on a device, the fonts, icons and buttons are unusably small. This is especially true on a tablet.
How can I easily scale up all of of my UI components?
Make sure the following meta tag is included in your app html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
If you still feel that the buttons and text are to small (which the should be a personal preference) you could always try changing the css. Add a new rule like this:
body {
font-size: 140% !important; //I believe 114% is default
}
Hope it helps.