I want to drag and drop an eMail from Office365 (Outlook)
to another browser window.
The problem is that after I select and drag an email to my drop location, it doesn't accept the drop location. (Only in IE, chrome works)
How can I create a drop location which accepts the eMail?
I had a look at: https://www.html5rocks.com/en/tutorials/dnd/basics/
but there the dragged objects are never locked this way.
Then I had a look at the different implementations of the drag and drop functionality at this site: http://mereskin.github.io/dnd/
In Chrome the following code works:
JSFiddle: https://jsfiddle.net/puq3y6u1/
(JavaScript for the DropLocation)
var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var data = evt.dataTransfer.getData("text/plain");
console.log(data);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drag and Drop the Office365 Mail</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="dropbox">DropZone </div>
<script src="js/script.js"></script>
</body>
</html>
CSS:
#dropbox {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 30px;
text-align: center;
line-height: 200px;
}
I know that for the Internet Explorer the getData type should be changed to "text" only.
However I can't change the setData to "text" only because that is already implemented by the owa site.
When I try to move a mail into the droplocation via chrome it works as expected.
If I try to move a mail from a Internet Explorer Window to a Internet Explorer Window gets instantly blocked the moment I am not on the navigation bar where the folders are.
I tried to Debug how Owa does it. Because you can drag and drop eMails to Folders (in IE). But I got stuck there. The code is minified and very large for me to analyze it.
When you drag an eMail in Outlook Web App or Exchange with the Internet Explorer it gets copied into the clipboard.
With:
window.clipboardData.getData("Text");
you can get the data. However you need to enable the clipboard option in the Internet Security Policy Settings.
Related
I just tried FMX TWebBrowser in Delphi 10.3.3. I could not rotate a photo in img tag. The following page is working in Google Chrome. But it is not working in FireMonkey TWebBrowser of Delphi 10.3.3. What is wrong? Please someone help me!
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
width: 300px;
height: auto;
}
</style>
</head>
<body>
<button onclick="rotate();">Rotate 90 degrees</button>
<br />
<img src="20190228-1.JPG" id="theID" />
<script>
function rotate() {
var imgX=document.getElementById("theID");
imgX.style.transform = "rotate(90deg)";
imgX.style.display = "block";
}
</script>
</body>
</html>
I guess your target platform is Windows. TWebBrowser wraps IE based web browser control on Windows which displays pages in IE7 standard mode by default. This mode doesn't support CSS transformations. You have multiple options to workaround that.
Option 1: Use deprecated -ms-filter CSS property
-ms-filer or filter is Microsoft CSS extension to apply collection of graphic filters to an object. It also supports rotation:
imgX.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
Option 2: Force Egde standard mode via registry
This is also what TWebBrowser documentation encourages you to do on Windows platform. You basically need to enlist your application's EXE name under HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION either manually or programmatically as DWORD value that defines compatibility mode for your application. 11001 ($2AF9) is for IE11 edge mode. See Browser Emulation for further values. This setting will affect all pages loaded in any web browser control within your application.
Option 3: Use x-ua-compatible header to specify legacy mode
You should be able to achieve the same effect as in option 2 by injecting x-ua-compatible header via <meta> tag in your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
…
See Specifying legacy document modes for more information.
All of the above applies to Windows platform. Keep that in mind when picking from the options. Option 1 most likely won't work on other platforms.
While you're at it consider also separating JavaScript from CSS by leveraging CSS classes:
<style>
img {
display: block;
width: 300px;
height: auto;
}
.rotated {
transform: rotate(90deg);
}
</style>
…
<script>
function rotate() {
var imgX = document.getElementById("theID");
imgX.classList.toggle("rotated");
}
</script>
I'm really new to js and just need a short script that redirects users to an URL from another website. This is my script so far:
<!DOCTYPE HTML>
<html>
<head><META CHARSET='UTF-8'><title>My webpage</title>
</head>
<body onload="redirectUser();">
<script>
function redirectUser() {
window.location = "https://www.google.com";
}
</script>
</body>
</html>
The major issue is that some web browsers (i.e. IE) do not automatically run these scripts (they are prompt to manually activate javascript and activeX in order to run the scripts). If this turns out to be the case, is there a way to automatically display a text in the middle of the screen to warn the user about this or to simply display the link?
you can place your link into a <noscript></noscript> tag.
<noscript>Go!</noscript>
You can take advantage of the fact a user doesn't have JavaScript enabled to tell them that they don't have JavaScript enabled.
You can add a div with a message warning about JavaScript being required to use your site, then immediately remove/hide this div with JavaScript.
Users that have JavaScript enabled won't see it as it will have been removed by JavaScript.
Those that don't have JavaScript enabled see the message.
Example below, either disable JS or comment out to see the message.
document.getElementById("jswarning").remove();
#jswarning {
width: 100%;
padding: 10px;
background: red;
color: #fff;
text-align: center;
}
header {
text-align: center;
background: #333;
color: #fff;
font-size:40px;
}
<div id="jswarning">This website requires JavaScript.</div>
<header>Your Website</header>
No script solution (credit to #Founded1898):
<noscript>
<div id="jswarning">This website requires JavaScript.</div>
</noscript>
<header>Your Website</header>
hi i am working on a website using HTML CSS JavaScript and jQuery.
I wanted to display website fullscreen(like when we click F11) onload. I am able to enter fullscreen using onclick even. But with onload event fullscreen script is not working. When i load a site it should display in fullscreen. please help. Here is my code :
here is my HTML code:
<html id="player3">
<body onload="goFullscreen('player');">
</body>
</html>
Here is my js
function goFullscreen() {
var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();}
}
Browsers doesn't allow sites to load in fullscreen mode without user interaction. You will get the following error message
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
To Handle this change your UX to make the user interact with your site to go fullscreen mode.
I added an onload, ondrag, onmouseover, oncontextmenu and more to make sure it is always at fullscreen
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="appin" onclick="openFullscreen();" onload="openFullscreen();" onmouseover="openFullscreen();" oncontextmenu="openFullscreen()" ondrag="select()">
<h1>Fullscreen on load page</h1>
<style>
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: rgba(255,255,255,0)!important;
padding: 20px;
}
::backdrop
{
background-color: white;
}
</style>
<script>
var elem = document.getElementById("appin");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
<p>Note: It does not work on iframes, that means, it will not work on the stackoverflow snipped. Copy and paste the code to ex. w3schools and it will work :)</p>
</body>
</html>
Have something wrong in your code:
Your function have no parameter:
function goFullscreen()
But when you call it, you transfer parameter to function:
onload="goFullscreen('player');"
And if everything is right. you should be put javascript function in $(document).ready()
This solution: https://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
you can create an index.html with this code in the body on load, fill in "fullScreenPage.html" with url of the page that you can open in fullscreen.
<body onload="window.open('fullScreenPage.html, '', 'fullscreen=yes, scrollbars=auto');"></body>
I wrote a little script to get file input via drop in a div in a hidden input. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>drop</title>
</head>
<body>
<div id="dropzone" style="height: 200px; width: 200px; background-color: green;">
drop here
</div>
<input type="file" id="file" class="hidden">
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="drop.js"></script>
</body>
</html>
drop.js:
$(document).on("dragover drop", function(e) {
e.preventDefault(); // allow dropping and don't navigate to file on drop
})
$("#dropzone").on("drop", function(e) {
console.log("drop");
$("#file").prop("files", e.originalEvent.dataTransfer.files); // put files into element
this.style.backgroundColor='green';
});
$("#dropzone").on("dragover", function(e){
console.log("dragover");
this.style.backgroundColor='blue';
});
$("#dropzone").on("dragleave", function(e){
console.log("dragleave");
this.style.backgroundColor='green';
});
This works on Chrome but unfortunately not on firefox and safari and i expect also not on IE ... I know this is the stuff every Webdeveloper loves, so should i stick with the native way ? or is there a library which can help me with the cross browser stuff ? So i just need this part no upload or sth else just putting the informatipn via drop in a input field.
This problem has been solved before by various javascript libraries that also ensure file uploading will work in all browsers. As it stands, your script, once you perfect it, will only work in browsers that support the File/Blob API. This leaves out IE9 and earlier, along with some versions of Android.
No need to reinvent the wheel. If you insist on doing this, be prepared for a frustrating ordeal. I recommend Fine Uploader, which will handle dropped files in browsers that support the File API, dropped directories in Chrome 21+, and will resort to a file input element for browsers that do not support the File API. It also includes many other features that you may fine useful, such as chunking, auto/manual retry of failed uploads, auto resume of failed or interrupted uploads from previous sessions, etc.
Try looking into a prebuilt package, like http://blueimp.github.com/jQuery-File-Upload/
I am finalizing the first version of my javascript app, and I would like to add sound effects. What is the recommended way to play a short sound (mp3 or wav or other format) using javascript in a web browser? I have ten sounds that I would like to have pre-loaded and able to play during application execution.
I've created this small test app and can't get the audio to play. Maybe someone can show me where I'm going wrong:
<html>
<head>
<title>Sound Test</title>
<script type="text/javascript" src="raphael.js"></script>
</head>
<body>
<div id="debugPane" style="width: 300px; height: 500px; float: left; background-color: #EEEEEE; margin-left: 10px; border-style: solid; border-width: 1px;"></div>
<script type="text/javascript">
try {
var snd = new Audio("mp3/1.mp3");
alert(snd.src);
snd.play();
} catch (err) {
document.getElementById("debugPane").innerHTML += "" + err.message;
}
</script>
</body>
</html>
The correct file is being chosen. However, when I point to a file that doesn't exist, I don't get any exception. The file happily reports what its src is even though it's not actually on my filesystem.
function playSound(soundfile) {
document.getElementById("dummy").innerHTML =
"<embed src='"+soundfile+"' hidden='true' autostart='true' loop='false' />";
}
where dummy is a hidden div somewhere on your page.
It ended up working the whole time in Chrome and Safari in Windows and Mac. My dev box was a Chromium/Ubuntu environment, which either is not supported, or my sound is misconfigured. In fact, it doesn't work in Ubuntu with any browser so far.