I've simplified it down to this html:
<html>
<body>
Test_170185.00000
</body>
</html>
On Edge I get:
On Chrome and Firefox I get something like:
When I inspect on any of them I just get the plain html back.
What is going on here?
Here's a jsfiddle: https://jsfiddle.net/dtrubb5z/
In Edge (41.16299.371.0):
In Chrome (or anything else) :
Edge detects it as a phone number and decides to style it. The only way I know to disable it is this:
<html>
<body>
<p x-ms-format-detection="none">Test_170185.00000</p>
</body>
</html>
Their documentation is here
https://msdn.microsoft.com/en-us/library/Dn337007
Related
I would like to use jQuery progress bar and add it to the top of the page only when the page is loading (and make it disappear afterwards), a behavior which is somehow similar to the progress bar in GitHub:
.
How can I do that?
I currently have the following HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div id="content">
<div id="progressbar"></div>
<div id="my-content">
My page content goes here....
</div>
</div>
</body>
Javascript:
$('#progressbar').progressbar({
value: false
});
I'd advise you to use NProgress. It's not using jQuery-UI, but it's really slim and easy to integrate. I've used it in several projects and it worked fine.
With NProgress you don't have to have HTML code, you just need to run the following lines:
NProgress.configure() if you need some special configurations
NProgress.start() to start the progress bar
NProgress.inc() to increment the progress
NProgress.done(true) once progress complete
That's it! Very easy!
I’d suggest using PACE (http://github.hubspot.com/pace/docs/welcome/). It does exactly that and makes it very easy to customize!
I want to display product specification from an external service. To do that I have to pass the below JS string to Webview.
<!DOCTYPE html>
<html>
<body>
<div id="flix-minisite"></div>
<div id="flix-inpage"></div>
<script
type="text/javascript"
src="http://media.flixfacts.com/js/loader.js"
data-flix-distributor="12612"
data-flix-language="id"
data-flix-brand="Samsung"
data-flix-mpn="UA55JU6600KPXD"
data-flix-ean=""
data-flix-sku=""
data-flix-button="flix-minisite"
data-flix-inpage="flix-inpage"
data-flix-button-image=""
data-flix-fallback-language="e2"
data-flix-price=""
async>
</script>
</body> </html>
I've added the below method:
webview.NavigateToString("htmlString");
Adding this just displays the text from the service, but the images and videos are not getting displayed.
Expected result :
http://media.flixcar.com/delivery/minisite/show/12612/id/957752
What I'm I doing wrong?
For me, it doesn't work because the following script in not correctly added to your html page:
<script type="text/javascript" src="//media.flixcar.com/delivery/static/inpage/9/js/lazy.js"></script>
It is dynamically added by the script http://media.flixcar.com/delivery/static/inpage/9/js/append.js.
The url should be http://media.flixcar.com/delivery/static/inpage/9/js/lazy.js so as be correctly loaded by the webview (which is nothing else than Edge browser).
I also think that you need to update each image attributes. Currently they are added also without protocol which are not supported by all browsers (for me it only works with Chrome).
<div class="flix-feature-image">
<img src="//media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="//media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, //media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
Adding protocol will fix the issue:
<div class="flix-feature-image">
<img src="http://media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
The html looks like this:
<html>
<head>
<style type="text/css">
h1:before
{
content: '\292d';
}
</style>
</head>
<body>
<h1>Sample Text</h1>
</body>
</html>
So, I've already converted the '⤭' character to ASCII which shows fine in my desktop's browser; however, on iPhone, it's blank!
The problem could be with content: '\292d'; even though they say content is supported with safari 1.0 and up it still does not work properly.
i used it for displaying images and it used to show up in inspect element but not in browser window, the entity '\292d' is infact supported
instead Try putting it directly inside the tag, or use javascipt if you want it to be dynamically inserted
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
If a user is on IE 7 and I read
<% = Request.Browser.Version %>
I get 7.0
if they have IE 9 and are on compatibility view, I get the same thing.
Is there anything in Request.Browser that can differentiate between a real IE7 user and a user that is using IE8 or IE9 but in compatibility mode?
It would be better to do this on the client side using JavaScript. You can use something like this:
http://code.google.com/p/ie6-upgrade-warning/
You can tweak it to whatever you want.
If your goal is simply to make sure the user is not in compatibility mode, then you can use either the meta tag or http header version of X-UA-COMPATIBLE:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
</head>
<body>
<p>Content goes here.</p>
</body>
</html>