I have a form containing an input file field [<input type="file" id="select-file" accept=".md"><label for="select-file">Select import file</label>]. It has defined a jQuery handler for the change event [$("#form").on("change", "#select-file", handler)] to fire as soon as I selected a file.
It works flawlessly on Linux with Firefox at work and at home with Windows using Firefox and Chrome.
Instead at work with Windows using Chrome or Firefox, the browser freeze for about 8 sec after selecting the file. Only after this hiatus I can push other buttons on the form and the "change" event fires.
Discarding the hypothesis that Windows and work does not mesh, the freeze seems related to the different network disks available at work. Can anyone suggest what I have to check and hopefully a way to avoid the freeze? Thanks!
Small example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>File Select</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="import-form">
<input type="file" id="select-file" accept=".md">
<label for="select-file">Select a file</label>
<p id="selected-file">No file selected</p>
</div>
<script>
$("#import-form").on("change", "#select-file", function(e) {
$("#selected-file").text(e.target.value.split('\\').pop());
});
</script>
</body>
</html>
Chrome freezes for few seconds when after any use of file field.
It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.
Related
I am trying to use zebra datepicker library in my project. I have followed the instructions here and written the following codes:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="assets/Zebra_Datepicker-master/public/javascript/zebra_datepicker.js"></script>
<link rel="stylesheet" href="assets/Zebra_Datepicker-master/public/css/metallic.css" type="text/css"></link>
<script type="text/javascript">
window.onload = function(){
$('#calendarValue').Zebra_DatePicker();
}
</script>
</head>
<body>
<div id="calendarContainer">
<input type="text" id="calendarValue"></input>
</div>
</body>
</html>
This results into a yellow icon attached to a text field with the id 'calendarValue', and the icon loads a calendar when gets clicked. I am getting the expected result in chrome, firefox and internet explorer 10 and 11.
While it is mentioned by the developer (Stefan Gabos) of zebra, that following strict doctype () makes it compatible with IE6+, and the example html's in zebra datepicker package also works fine to load the datepicker on IE9 particularly, my codes does not load the datepicker UI when I test it on IE 9; only the yellow icon gets attached to the text box and the calendar UI does not open when the button is clicked. It can be seen I did use doctype in my code so it should have been a problem to get the UI with old versions of IE, but that is not so in my case. Screenshots are given below:
I am a noob in web developing, and I cant figure out what is wrong here.
Hope everything is explained in detail this time.
Actually the problem was my company has policy to render intranet sites in compatibility view in IE which was causing troubles here. I used edge meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
which is forcing my site to load in default standard mode in IE and fixed my issue.
Hope it would help noob people like me in the dark
In my HTA application I'm using a JavaScript calendar window, it opens using window.open() and closed using window.close(), when the user clicks on one of the dates. This calendar works fine on multiple browsers and versions over more than 10 years. It even works in HTA applications most of the time.
However on specific workstations running IE11. The window.close() command is simply ignored, resulting in the window left open. On other IE11 workstations it works fine. I figured that turning off the "Enable Protected Mode" checkbox on IE11, Internet Options, Security tab resolves the problem on one of the problematic workstation. However, other workstations works fine with this setting turned on and turning off this setting is not an acceptable solution.
Code sample which reproduces the problem:
HTA application
<HTML>
<HEAD>
<HTA:APPLICATION ID="OpenCloseExample" BORDER="thick" BORDERSTYLE="complex"/>
<TITLE>Open Close HTA container</TITLE>
</HEAD>
<iframe width="1024px" height="768px" src="http://localhost:28080/openclose.html"/>
</HTML>
openclose.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<script src="openclose.js"></script>
</head>
<body>
open
</body>
</html>
openclose.js
var win;
function openWindow() {
win = window.open("", "_blank", 'width=250,height=250,status=no,resizable=no,location=no,top=100,left=100');
win.document.writeln("<html><head><script src='openclose.js'></script></head><a href='#' onclick='javascript:window.opener.closeWindow()'>close</a></html>");
}
function closeWindow() {
win.window.close();
}
I can't see this working in any IE with any settings. The problem is this string: <script src='openclose.js'></script>. That is, a literal ending script tag in a string works as an ending script tag on a page, when HTML parser will find it. This means, that your script was never loaded.
To fix this, you've to break the literal tag, for example like so:
<script src='openclose.js'><\/script>
Since you have pointed out that IE11 is causing the JS not to work, you can force IE to render in an older version very easily.
<meta http-equiv="X-UA-Compatible" content="IE=9">
This meta tag is very popular amongst HTA applications for utilizing JS/ActiveX methods/properties within specific IE versions (most of them being deprecated).
For more information, visit the X-UA-Compatible Tag Wiki
Hope this helps
I figured this out eventually.
Changing:
open
to:
open
Has resolved the problem
I have this very simple html file.
<!doctype html>
<html>
<head>
</head>
<body>
<script>alert("hi");</script>
</body>
</html>
This usually runs fine in Firefox and Google Chrome on my laptop. But when I run this in Safari in an iPhone device and Google Chrome on an Android device, the JavaScript code doesn't run. That is, no alert appears. This is extremely unusual for me. Do we need to change JavaScript code when running on mobile devices? What should I do?
(function(){
window.alert('hi')
})()
<html>
<head>
</head>
<body>
</body>
<script src="aJSfile.js"></script>
</html>
Add window to alert so that it says window.alert('hi') also see the core window functions supported by most browsers
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
We have use the following html code snippet. While right click on that html file and open with the Operamini, Mozila,Safari, Chrome are working fine but it did not working in the internet Explorer.
Code snippet[html]:
<!DOCTYPE html>
<head>
<title>Simple Example</title>
</head>
<body>
<script type="text/javascript">
function displaymessage() {
alert("hai");
}
displaymessage();
</script>
</body>
Can you please any one look into this and provide suggestion to resolve the problem . Thanks in advance.
Regards,
Rajasekar
try this:
1) add html tag to open the page
2) internet explorer blocks "activeX" contents, you should click on the top and unlock them...
By default Internet Explorer restrict running script and ActiveX Controls. If you are not getting any warning, then Go to Tools --> Internet Option ---> Advanced ---> Security ---> Restore Defaults for "Security level for this zone".
Hope this may help.
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.