I have a file upload which works great in everything except IE. When i drag a file or picture to the upload area and drop it that file or picture opens and redirects my site. How do i stop this?
The plugin i used is simple and can be found here, they also have a quick snipt to see how to implement it.
http://www.jqueryscript.net/form/jQuery-Plugin-For-Drag-Drop-File-Input-Field-ezdz.html
You can see the code on how to implement this file upload in the link above, its pretty much a one liner.
try to prevent default behaviour of drop event: (not tested!)
<body ondrop="drop(event)">
JS:
function drop(e)
{
e.preventDefault();
}
If you need lt ie10 support try http://filedropjs.org/. There is no point in reinventing the wheel :).
Related
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
Edit: So I've narrowed the problem down - it works when I link to an externally hosted bootstrap.min.js file, and doesn't work when I use the local file (django's dev static folder setup)
This has me pulling my hair out. I've looked at tons of threads, inspected the HTML very carefully, and I can't tell what's the difference. Here's my dev page: http://iceberg.creatifcubed.com:8080, and here's the jsfiddle http://jsfiddle.net/5UAUP/4/
The problem is on a mobile browser (iPhone and iPad) the login dropdown closes when I click on it. Many threads recommended e.stopPropagation() - which is showing up in a desktop browser but not on the mobile browser. I added some alerts, and tried different variations to attach the event - and it's not being called in mobile safari.
I add the same code into jsfiddle - and it works there (copied and pasted the same HTML - see jsfiddle /5UAUP/5). Don't even need e.stopPropagation(). I ran my code through the w3 validator and there are no errors. Any idea what could be causing this?
Currently, my page is set to use the local static file. It's been included properly and everything - you can see it at http://iceberg.creatifcubed.com:8080/static/lib/bootstrap-2.3.0/js/bootstrap.min.js . I've checked the headers, and I don't see anything strange - so why does it cause that javascript bug when I link to the local file? Other parts of the file - like the carousel plugin - seem to be working.
The solution is actually much easier than you'd think and it's unfortunate that people have to waste time on this little quirk, but I promise now that you know it, you'll never forget it!
$('.dropdown form').on('click tap', function (e) {
All you have to do is add a "tap" handler, so that mobile browsers react to it properly. By the way, this DOES work because jquery will automatically split up event handlers by spaces, so "click" and "tap" are two distinct handlers
The problem was actually a bug in 2.3.2. Github issue: https://github.com/twitter/bootstrap/issues/7927
Just the way I tested 2.3.0, 2.3.1, and 2.3.2 with serving from Django vs. CDN and accidentally caching just happened to not show me it was nothing to do with django until after asking this question >.<
I'm looking for cross-browser desktop file into browser drag example. I've found a few good examples such as jQuery FileDrop and jQuery FileUpload , awesome examples, but I'm not sure they work in Opera or IE. Could you suggest me a really cross-browser solution? Thanks in advance!
For a completely cross-browser file drag drop solution, you would need to go in for a file upload control which uses a browser plug-in like Silverlight or Flash. Here is another SO question on the same lines
Multiple-target cross-browser drag& drop file upload
I would like to create a file-upload field where users can just drag and drop a file onto a certain area in the browser window.
Does this work with all modern browsers?
thanks!
I found this plugin quite nice:
http://valums.com/ajax-upload/
The page has a live demo where you can drag and drop a file that gets uploaded.
Unfortunately, it only works in Chrome and Firefox, other browsers have to press a button!
I am implementing a touch animation with the EaselJs library.
When I read am image from a local folder all mouse events are working OK, like: onPress.
But when I choose an image source from a URL like:
http://www.visionale.net/wp-content/uploads/cool-accessories-car.jpg
mouse events, like onPress, stop working.
Try for example to dragAndDrop from library and change image link "img/x.jpg" to any link from internet.
That's the <canvas> crossdomain issue (security feature).
There is a workaround: you can use a simple 'proxy script' on your server.
This one is pretty nice: http://benalman.com/projects/php-simple-proxy/