I'm doing some old school IE and trying to get drag and drop from windows explorer to IE working. I'm getting the drop events but the dataTransfer object does not contain the file name(s). getData("Text") is also null. What am I missing?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DnD</title>
<script src="scripts/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="dropstuff">drop stuff here</div>
<script>
$(function () {
var dropTarget = $("#dropstuff");
dropTarget.bind("dragenter dragover", function () {
window.event.returnValue = false;
return false;
});
dropTarget.bind("drop", function (e) {
window.event.returnValue = false;
var file = e.originalEvent.dataTransfer.getData("Url");
// file is null!
return false;
});
});
</script>
</body>
</html>
IE is really bad at supporting things.
You should use special plugin, i.e. https://github.com/blueimp/jQuery-File-Upload or http://www.plupload.com/ or you might want to find solution on Flash. But that might take some time.
I suggest you fix this issue organizational way: advice users to use modern browsers by showing warning of partial funcionality compatibility in IE.
Related
in aspx page (WebForms) I have a JavaScript function that works only in Internet Explorer and not in Edge/Chrome.
This one:
function ChoosePharmacy()
{
var result = window.showModalDialog('search_pharmacy.aspx', window,"dialogWidth:800px;dialogHeight:600px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
This should open a pop-up window (with an aspx page inside), but because is
an old legacy application, works only in Internet Explore, and now that users have move
to Edge, has stop working.
Do someone has idea why?
Thanks a lot in advance.
Luis
From your description, I understand that you would like to know why your JS code is not working with modern browsers like Chrome or Edge.
If we refer to the document for Window.showModalDialog(), we could notice that it is deprecated and is not recommended to use on the sites.
As suggested by Elder, dialog is a replacement for window.showModalDialog().
If it is difficult to implement in your code then as an alternative, you could use the ShowModalDialog Polyfill.
You just need to add a reference to ShowModalDialog Polyfill in your code and your code will start working without any changes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/showmodaldialog"></script>
<script>
function ChoosePharmacy()
{
var result = window.showModalDialog('index.html', window,"dialogWidth:300px;dialogHeight:200px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
</script>
</head>
<body>
<h1>Example for ShowModalDialog Polyfill</h1>
<br>
<button onclick="ChoosePharmacy()">Call ChoosePharmacy Function</button>
</body>
</html>
Output in the MS Edge browser:
The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)
I want print dialog to be open after PDF is rendered in browser which is working fine in firefox by adding JavaScript mentioned here but it is not working in chrome.
I have tried to add onload event and setTimeout function still it's not working.
These scripts are working in firefox but not in chrome:
<script type="text/javascript">
try {
this.window.print();
}
</script>
<script type="text/javascript">
try {
setTimeout(function() {
this.window.print();
}, 3000);
}
</script>
<script type="text/javascript">
window.onload = function() { this.window.print(); }
</script>
It's been a while since I worked with JavaScript for PDF. I believe window is a browser object and not available in all PDF readers. Try this.print() (this at the root level being the Doc object). You can check for support in your script or use try/catch to enable better cross-reader compatibility.
Here's one way to do it:
<!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" xml:lang="en" lang="en">
<head>
<title>Javascript test</title>
</head>
<body>
<p>This document will trigger a print dialog.</p>
<script type="text/javascript">
try {
this.print();
}
catch(e) {
window.onload = window.print;
}
</script>
</body>
</html>
The JavaScript API implemented by the various browsers may or may not support the full API as documented by Adobe in the JavaScript for Acrobat API Reference. I have so far been unable to find a reference for other PDF viewers (such as the one bundled with Chrome).
After some testing it does seem that there is limited support by the web browsers when a PDF is rendered stand-alone (i.e. within the browser chrome) versus in a web environment (i.e. in an iframe).
Also note that Dompdf does not support embedding JavaScript into the PDF by default so you'll have to enable it in the Dompdf settings.
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', true);
$dompdf = new Dompdf($options);
Opening a PDF (or any URL) in a new tab allows for (optionally) triggering the print dialog via the following function.
/**
* Opens a URL in a new tab. Optionally triggers the print dialog after the window has loaded.
*/
function openInNewTab(url: string, triggerPrintDialog: boolean = false): void {
if (url !== "") {
const newTabWindow = window.open(url, "_blank");
if (newTabWindow !== null) {
if (triggerPrintDialog) {
newTabWindow.onload = newTabWindow.print;
}
newTabWindow.focus();
}
else {
window.alert("openInNewTab() blocked by browser.");
}
}
}
I don't know why, but it works on Chrome and Safari, not in Mozilla.
I have object html tag that loads svg file. File contains .s0 classes. I want to handle event when you click on that class.
Who knows what is wrong? sry, jsfiddle does not show object when I tried to paste code there.
<object data="jo.svg" type="image/svg+xml" id="obj"></object>
Code
$(function() {
var a = document.getElementById('obj');
a.addEventListener("load", function() {
// !!!
console.log('this line is not reachable in Mozilla or reached before svg loaded');
var svgDoc = a.contentDocument;
var els = svgDoc.querySelectorAll(".s0");
for (var i = 0, length = els.length; i < length; i++) {
els[i].addEventListener("click", function() {
alert('clicked');
}, false);
}
});
});
Primarily you need to decide use jquery or not and do not mix jquery-code with native javascript-code.
Javascript version:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var obj = document.getElementById('obj');
obj.addEventListener('load', function(){
console.log('loaded');
});
});
</script>
</body>
</html>
Jquery version
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $obj = $('#obj');
$obj.on('load', function () {
console.log('loaded');
})
});
</script>
</body>
</html>
Ubuntu 14.04.3 LTS, Firefox 40.0.3
I solved it by using:
$('#svg').load('"image/svg+xml"', function () {
alert('svg loaded');
});
It works on Chrome, Firefox and IE9+.
It's better to use <svg> tag, instead of <object>. Firefox works better with <embed> anyway. If you can put the svg code inside tag all works fine.
You can try with <embed> tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
I recommend to you to use the <svg> tag, because you can control all elements inside with CSS and Javascript in a easy way:
https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction
And maybe, Raphaël JS is a good library for you. It allows to control all SVG element with javascript and make a lot of tasks without complexity:
http://raphaeljs.com/
It will be fine if you can use Modernizr.js library, that helps you detecting if there's browser support.
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}
To include modernizr: https://modernizr.com/
You can read this interesting and complete article, with how to use svg in all variants:
https://css-tricks.com/using-svg/
However, you should make that #cetver suggest to you in his answer, don't mix jQuery and native js code.
With all recommendations, you can achieve in a simple way the loading content.
Good luck.
So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.