So I have 2 projects and a third party application for this situation:
app - The main app
gwt library - A library I built for re-usable GWT components
grapesjs - a drag n drop html editor in javascript
I created a gwt wrapper around the grapesjs library and in the gwt library playground, it works great. However, when I import this library into the main app, I am finding that dragging blocks onto the canvas does not work.
I dug into this as much as I could and found that the browser 'drag' event is not firing. To take this a step further, I went into the browser console on different websites and was able to attach drag listeners to any elements and they would fire properly. You can try it on stack even. Just inspect an element, alter to have draggable="true" and attach a listener:
$0.addEventListener($0, (event) => { console.log('drag event firing'); });
Then try to drag the element and the console logging will fire. Well, if you do the same thing in my app (any element, not just in the grapes component), it does not work. So it seems that the drag event is somehow disabled at a global level. At least, that's my best guess. My ultimate question is:
What would cause the native 'drag' event not to fire at a global level (in GWT or plain Javascript)?
I tried Chrome and FF and they both behave the same, so I don't believe it is a browser issue. I don't know what of my code would be useful for this, but I can post some stuff if asked.
I finally figured out what the issue is. To answer this question generically, you can disable all manner of drag events with this in the index.html:
<body ondragstart="return false;" ondrop="return false">
</body>
Removing these attributes let the drag event work properly again.
Related
I am new to this and need some tips. I want to know if is there some way to optimise an A-Frame page to work fully on Mobile. I made some events and all works well with PC and Mac, but a lot of functions don't work on Mobile (iPhoneX and Android 6), and even using lines like:
this.el.addEventListener('touchstart', (e) => {
window.open('https://physi-enabled.glitch.me','_blank');
Any ideas? This is the code: https://glitch.com/edit/#!/building-world?path=index.html:28:62
enter image description here
Your question is not specific enough, but here's a few tips as you requested:
Use A-Frame built-in components, primitives and util functions to your advantage. For example there's already link component - you can use it instead of manually attaching click events just to open link in new tab.
Look controls is a component that defines mouse and touch behaviors, so you might want to look into it.
AFRAME.utils.device.isMobile is a function that tells you if the device is mobile, you don't really need your own most of the time.
event-set component might help you reduce all the code related to changing one property on hover or click etc.
Most of the above, if not everything is mentioned in A-Frame docs.
I have a div tag in HTML that looks something like this:
<div id='tiptip_content">...</div>
Now, I can see that by moving my mouse over certain places (mouseover event) on the webpage the text content of this tag is changing. The problem is, that I can't find the piece of Javascript code which is editing this tag. Does anyone have a way, either using some debugging tools or by writing some kind of script to find the code responsible?
The Firefox dev tools that come with the browser (not Firebug) lets you see events on an element. Clicking the little 'ev' bubble next to the element in the DOM view lets you see the code that handles the event.
I would suggest to check it in 2 ways.
1) Use browser Dev tools to find if the corresponding <div> has any events associated with it.
The problem with dev tools that it cant find if events are triggered via jquery. So
2) Look for a javascript peice of code like
$("#tiptip_content").mouseover();
I made a nice website that does a lot of DOM manipulation. Works very nicely in chrome and firefox. Though the client has requested now that it also works in Internet Explorer. The latest version is good enough to start with (that would be 10.0.9200.16721 in my case).
So the adventure starts, i press F12 and see a set of pretty familiar developer tools (coming from chrome and firebug). As i'm tracking the JS code i notice that the HTML tab (with the DOM) doesn't actually update.
According to the manual here http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx it's "a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements." (d0h ??) problem is .. i can't find a button to enable automatic update of the HTML tab. So i would have to click the refresh button everytime i step into a new line of JS (never mind of real-time DOM view).
But that's not all ... every time i click the refresh button the whole DOM tree view collapses. And i have to click a bunch of pluses to view the node i'm interested in.
Does anyone have a solution for this? Because what would take days will take weeks this way...
Duplicate of How to inspect elements on dynamically created DOM by using IE developers tools
From doing a little digging aroung, it seems like this is an issue other people have reported too. This thread might be of some interest to you.
The most relevant part of it:
The problem is when you modify the dom (with or without jquery) from a callback which is called by a timeout, which is in a callback bound to an event, IE freaks out and doesn't update the dom tree in the development tool. Subsequent modifications to the changed tag in the dev tool won't have any effect.
According to my tests, it's the combination of that sequence of calls that make this happen. If the dom is modified from a settimeout callback but without being inside of an event callback, it works. If instead of settimeout you directly call a function that modifies the dom, it works.
Here's a working example of what you're saying to compound the issue.
Basically, this is an issue with IE. There is no fix available at the moment. The accepted answer on the other thread seems like a very poor workaround.
I've been wondering a long time about this. Is there a way in eg Chrome to see what events are bound to an element? Since many people now use jQuery with a syntax like the following:
$("a.subtle").click(function(){
//do something
});
Is there a way in the inspector to easily find this code? I know in the inspector you can go to the "event listeners"-tab to see what events are bound. Looking at an example I can see there is a click-event on the element with the js file of jQuery next to it, so this must somehow point to it, but of course it is obscured by all the jQuery code. Here's what I'm looking at:
So the question is, is there a quick way to find the jQuery code applied to an element? To be clear, I want to quickly find the code I posted up top.
I could search through the source code for a .click() on that class, but of course it could be done via its parent, or with .on(), or on so many bazillion ways..
Check out the Visual Event bookmarklet.
Here's a quote from their website:
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.
Visual Event shows:
Which elements have events attached to them.
The type of events attached to an element.
The code that will be run with [sic] the event is triggered.
The source file and line number for where the attached function was defined (Webkit browsers and Opera only).
I'm writing a XUL application using JavaScript for the coding. I would like to be able to drag files onto a control in this application and, when dropped, have them show up.
This seems like it would be almost exactly like the tutorial here, but when I break in the drag and drop event handlers in a debugger, the dataTransfer member of the event isn't there!
How should I be doing this?
Thanks,
Nathan
These features were added in Firefox 3.1, and XULRunner 1.9.1, so make sure you are using the correct version. Be aware these builds are still in beta.
The old API for drag and drop is here.