Easeljs: mouse events stop working - javascript

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/

Related

Creating progress bar without using "onprogress" event

I've been working on an upload feature that uses HTML5 xhr.upload.progress listener to update the progress bar. It works great everyone except for Edge, which, starting with version 15 has a bug in progress listener implementation. It manifests itself in progress event been triggered once, when the upload is complete.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12224510/
I looked at a few upload frameworks (FineUpload, jQuery File Upload), but they all seem to rely on that feature, as well. How was it done before progress listener existed? I hope there are other options besides Flash, which I won't be able to use.
Thank you!

currentlyLoading-Event for html5 video-Tag

I'm looking for a way to create something like a loading animation on a html5 video similar to the Youtube Video display (reference: https://www.youtube.com/watch?v=5vcCBHVyG50)
I tried it with the canplay-Event but I think I misunderstood the real meaning of this event.
My thought of this event was that enough data has been loaded and buffered so that the video can be played again.
But in my case this event just fires once. At the beginning of the video.
Is there any special Event which will be fired when the video is playable or needs to load more data?
Use fontAwesome framework. It has got your animation.

Why the click does not work in touch mode

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/

mouse move and click over vlc embed

I've been searching far and wide for a solution to this, I have a vlc plugin embedded on my pages. I know the "windowless" option exists, but that increases resource usage excessively.
Is there any other way to catch mouse events like click and mouse move over the embedded video in JavaScript?
Any solution to this problem would be helpful.
It is now possible to catch mouse events in a VLC Web Plugin without any local programming knowledge. This method does although require some knowledge of QML (Official Docs).
You will need to install WebChimera Plugin for this to work.
See Working Demo

Allow drop file upload in IE?

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 :).

Categories