Get drop input with firefox/safari/IE - javascript

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/

Related

<script> and JavaScript not working in HTML file for all browsers after XMLHTTPREQUEST

Hello I am new to JavaScript. I have looked through other posts but I cannot resolve my issue.
Earlier I was attempting to play around with the following script found here (How to read text file in JavaScript).
I got it working successfully SEVERAL times:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('get', 'test.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('main');
el.innerHTML = reader.responseText;
}
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="test.txt" onclick="loadFile()" />
<div id="main">
</div>
</div>
</body>
</html>
While testing this script, all of a sudden it stopped working! I have assured that my content blockers are disabled and javascript is enabled on my web browsers. I am not sure if I locked up my web browsers ability to use javascript while using this XMLHTTPREQUEST or possibly overloaded it. I even tried inserting a reader.abort() function to possibly close the request if it was still open somehow. I tried inserting alert() functions to troubleshoot that did not work. I tried restarting my computer that did not work. I am using a MAC and have tried the latest versions of Firefox, Chrome, and Safari which all do not work with javascript now.
It is so bad that I CAN'T even get this simple javascript example to work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type=“text/javascript”>
document.write(“<h1>This is a test</h1>”);
</script>
</head>
<body>
</body>
</html>
PLEASE HELP! I don't know what I did or how to fix the issue.
Above script works only if you're loading the text file from a server. Make sure the file is located in the same place as your html file on the server and load the page with your server address. Most likely thing you're doing wrong is you're trying to access client's file. It doesn't work because that will be HUGE security breach, only the client can send you a file to read (If that is your intended purpose, then I advise you to use FileReader, example code can be found here).
About your second script, you're using “ instead of ".

Can't see localstorage event across tabs

I'm trying to create a simple proof-of-concept regarding the use of localStorage to trigger tabs in my application when changes occur. I know this is possible based on other articles I've seen. I understand the spec states the event will fire on ever page except the one I'm on - this is in fact what I want. However, I can't seem to get this simple demo to actually work.
I've taken the code below, and opened up multiple tabs of it. Using my Chrome Dev Tools, I can check >localStorage in the console and see the value before and after the "Add" and "Clear" buttons are pressed - they are in fact functioning as desired in storing and clearing the key value pair into local storage, yet the event isn't firing the alert.
I even placed breakpoints in the javascript in my Chrome Dev Tools of each tab, yet I can never seem to get the "onStorageEvent" function to hit in any tab opened.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>Tab1</title>
</head>
<body>
<button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
<button id="clear" onclick="localStorage.clear()">Clear</button>
<script type="text/javascript">
function onStorageEvent() {
alert("storage event: " + localStorage.getItem("tab"));
}
window.addEventListener('storage', onStorageEvent, false);
</script>
</body>
</html>
In order for the window.addEventListener to work on storage:
you MUST access the page using web-server (http://a.b.c.d/ or http://domain)
Direct access (using file:/// or c:\file.html will not work.
(chrome and ie ignore it, firefox and safari can run it anyway).
I would consider also removing the 3rd, it is not relevant to elements in your DOM tree, and it might cause troubles (let the browser have it's defaults).
This code was tested in Chrome 52, Firefox 47+48, IE 11, Safari 5.7.1
<!DOCTYPE html>
<html>
<head>
<title>Tab1</title>
</head>
<body>
<button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
<button id="clear" onclick="localStorage.clear()">Clear</button>
<script type="text/javascript">
function onStorageEvent() {
alert("storage event: " + localStorage.getItem("tab"));
}
window.addEventListener('storage', onStorageEvent);
</script>
</body>
</html>

Why is textarea not editable in fullscreen mode?

I am using the following jquery plugin to enable fullscreen in my web app.
https://github.com/martinaglv/jQuery-FullScreen
It works great, except that when I am in fullscreen mode my textarea is not editable? Why is this? Is it a browser thing or the plugin?
It doesnt seem to be disabled in any way...
My test code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/martinaglv/jQuery-FullScreen/master/fullscreen/jquery.fullscreen.js"></script>
</head>
<body>
<div id="content">
<textarea></textarea>
<button>
Go Go Fullscreen</button>
</div>
<script type="text/javascript">
(function () {
if ($.support.fullscreen) {
$('button').click(function (e) {
$('#content').fullScreen();
});
}
})();
</script>
</body>
</html>
There is a workaround (for Chrome, at least), but I don't know how it factors into the plug-in you're using. You have to pass along a little instruction to allow keyboard input:
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
UPDATE:
You could modify the plug-in pretty easily. This function would change to reflect the above:
function requestFullScreen(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}
By default, the plug-in forces the browser to enter full-screen mode without allowing keyboard input.
More information here from MDN, and the thread where I found some clues.
From the tutorial:
The idea of allowing developers to programatically take up the user screen doesn’t come without serious security implications, which is why keyboard usage is limited. Of course, there are many legitimate uses for keyboard input in full screen, which is going to be addressed in future revisions of the API via some kind of permission prompt.
However, even in its current, limited form, the API still gives us an opportunity to enhance the experience of the end user.
It doesn't even go full screen in some browsers, like IE 9.
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

Is it possible to disassemble html?

For testing purpose I create simple html with one button. When you click on button it show you alert. I try to to change button text value with olly, ida, and cheatengine to some other value but it doesn't work. Why?
Is it possible to change value of variable of html, is it possible to disassemble program like iexplorer?
Simple html on what i worked look like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>
If you're using Internet Explorer 9, hit F12 to enable the developer tools. This will show you the structure of your HTML, which you can then change. These will also allow you (via the Script tab) to set breakpoints and debug your JavaScript. From here you can change variable values.
For older versions of IE, similar functionality (though not including JavaScript debugging) is available in the Developer Toolbar.
If you're using FireFox, try FireBug.
If you're using Google Chrome, hit F12 to display the developer tools.
Your terminology isn't correct by the way: HTML does not get compiled (or assembled), so the idea of disassembling it isn't valid. The word you're probably looking for is debug.
If you're using Internet Explorer, don't hit F12 to enable the developer tools. This will only show you the structure of your HTML badly, which you can then change with difficulty.
Instead, make sure you're using FireFox, and then install the extension FireBug which will enable you to view and edit HTML/CSS and Javascript live in the browser (and much more).
Is this what you mean you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function olly()
{
alert("Olly");
}
function cheatengine()
{
alert("cheatengine");
}
</script>
</head>
<body>
<input type="button" onclick="olly()" value="olly" />
<input type="button" onclick="cheatengine()" value="cheatengine" />
</body>
</html>

Google+ +1 Button from Flash (or programmatically from JS)

I'm trying to figure out how to allow users to click on a Google+ "+1" button from within Flash. From reading through the Google+ docs and examining that their script is doing, I don't see a way and was wondering if anyone's solved this yet.
The problem is that their script creates an iFrame which points at a Google subdomain. So I can't trigger a button click due to cross-domain policy. I can't simply call the same URI that they're calling because it's encoded and their encoding may change. I can't find any documentation on how to programmatically call a +1, etc...
Any ideas?
Google Plus does not have a version of +1 button which can be directly embedded into flash, and the API they have just released is read-only, therefore you can't use methods which normally works for the facebook like button.
What I'd suggest is to have an absolutely positioned DIV tag on top of your flash object which you will invoke when needed, and you can pass the correct URL to "like" using the href parameter. I'm using explicit mode for tag rendering to show how you can dynamically prepare the tag.
Here's some sample code which uses jquery for the animations.
<style type='text/css'>
.gplus-container {
display: none;
position: absolute;
top: 8px;
left: 98px;
}
</style>
<div id="flash-container">
Flash content, click!
</div>
<div class="gplus-container">
<div class="g-plusone" data-href="http://jsfiddle.net" ></div>
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<script type="text/javascript">
$(function(){
$('#flash-container').click(function(){
$('.gplus-container').fadeIn();
gapi.plusone.go();
});
});
</script>
You can also test this sample code on jsfiddle.

Categories

Resources