Drag&Drop on (windows) desktop touchcreen - html

I'm using Bernardo Castilhos' HTML 5 Drag&Drop Polyfill:
https://github.com/Bernardo-Castilho/dragdroptouch
Here is a demo:
http://bernardo-castilho.github.io/DragDropTouch/demo/index.htm
Some time ago it stopped working on windows-based desktop touchscreens. I do not test it very often on those devices so I don't know when it stopped working.
In firefox browser a preceding double tap on the element makes the dragging working, in chrome / edge all the actions on the touchscreen are ignored.
Does anybody has a workaround for enabling "HTML5 draggable=true" elements on windows touchscreens? It works perfectly on android / iOS.
Thanks

The issue was fixed: https://github.com/Bernardo-Castilho/dragdroptouch/issues/40
But the developer forgot to update his own demo / example-page.
So just use the version from april that is provided at github and it works.

Related

Debugging on iOS safari

I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html

Web site not rendering properly with IE10 +

I have few web site running on aspx using older version of DNN 4.x. All site are rendering properly on Google Chrome, Fire Fox, Opera etc... but starting with IE 10x +, the navigation pane started to render improperly...
The site in question is the following :
http://www.westendsports.ca
I suspect a CSS failure, but I haven't been able to pin point the issue. I really need to fix this issue for the client, any suggestion would be appreciated.
Thanks
Upgrade to the latest DNN. Yours is 6 year old.

Firebug use with fullscreen API

I'm using on a website the fullscreen feature offered by HTML5. With chrome I can modify the style with webkit developer —in fullscreen mode— just fine.
But when I'm using Firefox with Firebug, I can't, because when I clink on the firebug panel (on a separate window on another monitor — I have a dual monitor setup) the page exits fullscreen mode.
How can I resolve this?
Edit, additional info:
I'm using Ubuntu 12.04.2, Firefox 21 with Firebug 1.11.4
I've tested this on Windows 7, Firefox 21 and the behavior is the same.
I found the solution here: Html5 video won't stay full screen on second monitor?
In brief, set full-screen-api.exit-on-deactivate to false in about:config. It's a configuration setting available since Firefox 13.
For anyone interested, the bug is explained here: Bug 724554 - Don't exit fullscreen when focusing window on different display.

How do I debug Silverlight not working in Firefox/chrome/Safari?

I have a problem where a Silverlight system I have developed is working perfectly in Internet Explorer but not at all in Chrome or Firefox
I have no idea where to start to try to figure out what the problem is?
Chrome just says Cannot load Silverlight plugin which is obviously useless from a debugging point of view
Firefox just displays the container page
I have used firebug and interestingly Firefox makes no attempt to download the xap files?
This is a major issue and any pointers would be very helpful!
The application does make use of Prism which may be something to do with it
Paul

KinectJS drag image demo not working in latest chrome version

I am having a similar issue on my project but was able to reproduce it on the kinectjs demo site. The following page works on IE but the latest version of Chrome (ver. 26.0.1410.43) the drag and drop features no longer work.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/
Hopefully, the issue can be identified so we can fix my environment as well.
Thanks
I had the same problem with an application i built and updating to the latest version of kineticJs solved my problem. (4.4.0)
I got problems with this demo too, on Android's 4.1.x native browser. On Chrome mobile and other browsers, it works like a charm. On native browser, right after the dragstart, the image goes to top left corner and stays there until i redraw the layer.