Windows 8 prepare site for pinning - windows-8

I would like to prepare my site for windows 8 pinning and have been reading some documentation on how to add the various images and could figure out that it could be done by using metadata and according to instructions and help on this site I could actually build the following meta tags but i couldn't figure out where I can call the browserdetect.xml file assuming I have the file located at mysitee.com/upload/win8/browserdetetct.xml and the images in the same folder
<meta name="application-name" content="MySite"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-square70x70logo" content="http://placehold.it/70x70/000000/ffffff&text=MySite"/>
<meta name="msapplication-square150x150logo" content="http://placehold.it/150x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-wide310x150logo" content="http://placehold.it/310x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-square310x310logo" content="http://placehold.it/310x310/000000/ffffff&text=MySite"/>
Any help please ?

Update: Microsoft Edge on Windows 10 and Windows 10 Mobile now only uses /browserconfig.xml, so stop including meta tags.
I see that Microsoft has — a bit prematurley — updated their wizard to Windows 8.1. Which is not backwards compatible with Windows 8.
What you need (in addition to my comments in the other post) is the older code with a 144x144 px image:
<meta name="msapplication-TileImage" content="/tileimage-144.png" />
That will work in Internet Explorer 10 on Windows 8 in conjunction with the two backwards compatible tags you already have:
<meta name="application-name" content="MySite" />
<meta name="msapplication-TileColor" content="#2d90c6" />
Note that you should not use application-name unless your site is actually a web application. (Per the HTML5 specs.)
You can test the Windows 8.1 (Internet Explore 11, actually) stuff in a virtual machine. Microsoft is handing them out for free over at http://www.modern.ie/en-US/virtualization-tools#downloads
Further enhancements: Internet Explore 11 does not actually need the tags to be present in the document. so you can save users who do not intend to pin your site the bandwidth (thus gaining performance) by including a browserconfig.xml in your root (eg. example.com/browserconfig.xml). IE 11 will read this file when a user tries to pin a site and load the resources needed from there instead of from the meta tags. So what you do is include the two/three tags IE 10 needs, and put the new IE 11 tags in your browser config file. Read up on http://msdn.microsoft.com/en-us/library/ie/hh772707%28v=vs.85%29.aspx (ignore the bits where it tells you to include a meta tag to load the config file. As long as the file name is browserconfig.xml and it is on your root, it will automagically work.)
Making it all darn perfect: Windows 8 requires no padding in their image, only a transparent background. Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding. You will stick out like a sore thumb amongst the other applications if you do not pay attention to the padding.
Live example: I implemented this on my own site over at Slight Future if you want an working (as of the Windows 8.1 Preview 1) example.
Final thoughts: Why Microsoft have to introduce something new for every single version of Internet Explorer / Windows, I can’t understand. Nothing is backwards compatible. For IE 9 / 10 and pinned sites on the Windows 7 / 8 desktop taskbar, you need a favicon in four different sizes.

You can follow the step-by-step tutorial / wizard at http://www.buildmypinnedsite.com

Related

JSPDF 2.3.0 with IE11 in SharePoint on premise not loading

I am trying to use jsPDF.umd.js in SharePoint to create some pdfs in an enterprise environment.
Sadly I have to rely on IE11 in this environment.
I am loading the jsPDF with script tags
<script type="text/javascript" src="/sites/xxxx/polyfills.umd.js"></script>
<script type="text/javascript" src="/sites/xxxx/jsPDF.umd.js"></script>
and try to create an object with
new jspdf.jsPDF();
This works in Firefox and Edge, but Internet Explorer seems to not load the jsPDF.umd.js at all.
The error seems to be
SCRIPT1047: In strict mode, function declarations cannot be nested inside a statement or block. They may only appear at the top level or directly inside a function body.
File: jsPDF.umd.js, Line: 744, Column: 5
I am at a loss, because this works in ff and edge, but not in IE.
The sample (http://raw.githack.com/MrRio/jsPDF/master/#) site works with all browsers.
Is there a way to disable strict mode?
I never had problems with use strict before - though I do not know if and where it is activated.
I am not JavaScript developer - so maybe there is a completely different issue at work here.
edit:
the issue seems to be IE with javascript. I commented the lines with error from jspdf.umd.js out, and now I am getting a syntax error at line 847
let protection = 192;
maybe IE is using a pre ECMAscript 5 engine?
edit2:
navigator.userAgent
outputs
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Zoom 3.6.0)"
so I think I am in compatibility view - switching Document Mode seems to fix the issues - I don't know how to proceed from here yet, because this cannot be a general solution for all users.
edit3:
so the page contains
<meta http-equiv="X-UA-Compatible" content="IE=10">
so I will need to change that I guess.
Maybe these articles will help:
https://www.dannyjessee.com/blog/index.php/2020/03/rendering-a-single-sharepoint-page-in-ie-using-edge-mode/
https://paultavares.wordpress.com/2015/01/20/how-to-render-a-sharepoint-page-in-ie-using-edge-mode-without-changing-the-master-page/
From the description, I understand that JSPDF can work with the IE 11 or Edge document mode. But Sharepoint site contains the meta tag that loads the site in the IE 10 document mode. That breaks the JSPDF functionality.
To fix the issue, you need to load the site in the IE=edge mode.
You simply need to update your SharePoint's master page to target the latest version of IE, to update your master page, follow these simple steps.
Step 1: Download master page file.
Go to Site Settings.
Then to master pages and page layouts.
Look for the HTML version of your master page. If you are using Seattle as a master page for the site, look for the seattle.html file. If you're using the Oslo master page, then look for the oslo.html file.
Step 2: Update the master page code.
Open the downloaded file into a text editor of your choice, and look for the following meta-tag.
<meta http-equiv="X-UA-Compatible" content="IE=10" />
Update the value of the content attribute to have:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Now Save the file.
Note: The meta tag might be placed multiple times in your master page file, make sure to update them all.
Step 3: Upload master page file.
On the Master pages and page layouts click the ribbon bar, and click Upload Document button.
Now Choose the file you have just edited by clicking the Choose File button, then click OK to upload.
Another dialog will appear asking you to enter some information about the master page. Don't type anything, just click Check In button.
One last step you need to do is to make your changes available to all of your site visitors, which is to publish this master page.
To do that, Select your master page, and click the Publish button from the ribbon bar.
To proceed with publishing click OK on the next dialog.
Reference:
IE Compatibility with SharePoint and Office 365

Dojo Combobox not rending properly in XPages

My team is having a strange issue with the dojo combobox. When we moved the code to the integration environment, the dojo combobox started to render improperly. We verified that the code is the same. Strangely other dojo comboboxes in the same application render normally.
The integration server is on a older version: 9.0.1 HF32 64 bit
The unit server where it works is at: 9.0.1 FP3 HF632
UNIT SERVER rendering on left, INTG Server rendering on right.
My question is has anybody seen this and do they know how to fix it?
Notes:
this happens in IE and Chrome. It is coming wrong from the server.
We are using CIAO to promote between environments (which I hate).
Upgrading the server is not an option for me
I can post code if requested, but I suspect that it isn't a code issue.
UPDATE: For some reason the following two CSS files are not loaded on that particular page. They are loaded on every other page in the application. I can't find any property or setting that would effect this. The admin verified that these files are on the server and the dates are identical. These are system generated resources.
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/base/dojo.css">
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/defaultTheme/dojoTheme.css">
Does anyone know why these two stylesheets are not being loaded??
I've seen some strange positioning issues depending on where Dojo comboboxes are relative to the browser screen, i.e. if there's not enough space left in the screen to position relative to the field they're bound to. That may have been in XPiNC and was in older versions. The thing to check is whether the rendering issue is related to where the field is relative to the page in the browser.

IE 11 - Is there a way to check then enable / disable enterprise mode?

I am out of wit as how to solve this problem in Javascript or HTML. I have customers currently using web applications built for ie9 and under. These legacy applications do not work well on IE11. IT solutions was to enable enterprises mode. Enterprises mode was designed to avoid "common compatibility problems associated with web apps written and tested on older versions of Internet Explorer".
See: http://www.eightforums.com/tutorials/43972-ie11-enterprise-mode-enable-disable-users.html
Enabling enterprises mode appear to be problematic on web application written using Bootstrap and AngularJS. Ie, responsive does not work at all unless enterprises mode is disabled. Not just AngularJS and Bootstrap but other libraries as well.
The solution that I am looking for is a way to check the status of enterprises mode via javascript, then tell the users to either enable / disable the mode. Better, if it can be turn off / on automatically via JS or HTML attributes.
Snooping in the document.x and window.x objects, I do not see any properties that we would give me an indication that enterprises mode is enable. Any suggestion?
Repro(s):
IE11 > Developer Tool > Console > Type window
IE11 > Developer Tool > Console > Type document
There is no DOM property that indicates that you're running EMIE. The whole idea of EMIE is to emulate IE8 behavior better than the IE8 document mode emulates IE8 behavior. EMIE should only be used in specific cases where it's needed; it should not be used wholesale.
It is possible to detect EMIE in certain cases. If you look carefully at the list of user-agent strings over the last couple of releases, there's a noticeable difference between EMIE on IE11 and the user agent string for IE11 RTM.
However, before you take that as your magic bullet, there are two caveats:
You cannot disable EMIE programmatically. It's a local configuration change only.
The user agent for IE11 is completely different today than it was when IE11 was released. Based on reports from the IE team, the UA string is going to be even more complicated, especially once "IE Spartan" (or whatever they choose to call it") hits the wire.
My recommendation? Create a small launcher page that does a simple feature detection for the web app in question. If you detect features consistent with what's needed for the app, then display a link to launch the app. If feature detection fails to detect IE8, IE11, or whatever version you've targeted, display a warning with a link to more troubleshooting information. Be sure to include a launch link anyway, just in case.
This way, the user has the information they need and you have a lightweight way of handling the issue, one that doesn't require too many updates to the app in question.
Hope this helps...
-- Lance
To my mind the reason of the issue is that IE 11 Enterprise mode emulates IE 8. But bootstrap doesn't support IE 8. To overcome it just use HTML5 shim and Respond.js as described here.
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js"></script>
But without check like <!--[if lt IE 9]> - because it seems that it doesn't work in the enterprise mode.
The better solution would be not just include the mentioned scripts without conditions but find out the appropriate condition instead of < IE 9.
To fix the problem with angularjs just use the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
For those who also struggled with this problem. I have submitted a feature request to MS IE Team.
See:
https://connect.microsoft.com/IE/feedback/details/1159543/need-a-way-for-client-side-codes-to-detect-enterprises-mode
My solution is a workaround that involve checking the width of the container div. Enterprises mode do not support responsive.

vb.net Webbrowser Control not displaying Javascript

I have tried this on numerous pc's and are receiving the same error. My webbrowser control isnt displaying javascript or jquery.
Here is a example:
when i visit this url in my browser: https://binarykings.co.uk/traderoom-aspx, it looks great with the charts and prices etc.
example: http://i.imgur.com/1Lmq4em.png
same in internet explorer: http://i.imgur.com/3KP864X.png
however in my vb.net webbrowser control it looks like this: http://i.imgur.com/qjme2Yg.jpg
What is causing this ? Its not just this site but any other site that has a similar way of displaying things via jquery/javascript.
I do have script errors suppressed however when i disabled this and clicked yes to the errors manually it still displayed the same empty page.
Thanks
The WebBrowser control uses the Internet Explorer rendering engine. But by default, for compatibility reasons, it is stuck using the IE 7 rendering engine, even if you have a later version of the browser installed on your computer.
There are a couple of ways to convince it to use a newer version of IE to render the page. One involves editing the registry, while the other involves modifying the web page.
In general, it is best to avoid attempts to solve local problems with global solutions like registry edits. There might be another app running on the same machine that uses the WebBrowser control and relies on the behavior of the IE 7 rendering engine. If you go changing global settings, you'll mess up that other app.
Therefore, the best solution, if possible, is to edit the web page. This is quite simple, and probably a good idea anyway. All you need to do is add the following code inside of the <head> section:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
If you absolutely must use the alternative approach of editing the registry, you'll find the information you need here in the documentation.

jQuery Mobile website is strangely magnified in Opera Mobile 10 despite 100% zoom level

I've developed a mobile website based on jQuery Mobile. Everything works on my own Windows Mobile device with Opera Mobile 10, but a customer of mine always sees the page magnified.
I thought that he might have a zoom setting >100% in Opera Mobile, but he claims that this is definitely not the case.
The same problem also occurs on the jQuery Mobile test site ( http://jquerymobile.com/test/ ) . Here's a screenshot of the site as displayed on my customer's device:
Any idea what might be going wrong here? I was unable to reproduce this problem on my own device or in an emulator.
My customer's device is a HTC HD2 runing Windows Mobile 6.5 and Opera 10.
Thanks,
Adrian
I'll just paste the answer by David Storey which was made for this on Opera Dev forums. It is not specifically about the 100% issue, but there might be similar issues related to the viewport tag issue, for people getting across it.
Opera Mobile assumes that any document
with a mobile specific doctype, such
as XHTML Mobile Profile or XHTML Basic
are designed and optimised for mobile,
while documents with a regular doctype
are not optimised for mobile
generally. Thus if there is a desktop
doctype the overview mode is enabled,
which you can control with the
viewport meta element. If there is a
mobile doctype the overview mode is
disabled and a regular 1:1 viewport is
used.
There were some bugs in the viewport
meta element support in Opera Mobile.
They should be fixed in the latest
version.
Did you try adjusting the scale?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
You should use xhtml mobile doctype
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Try adding <meta name="viewport" content="width=device-width">. Opera seems to behave better when it's there.
If that doesn't work, please file a bug report https://bugs.opera.com/wizard/.