Disappearing divs

[cwoodza]

Hi Anseki,

Thank you very much for this fantastic solution, it's working great. However, I have one strange issue: I'm applying plain-draggable to a few div elements that are initially hidden with display:none, and then are called with display:block through a very basic Javascript function like this:

function OpenAppFolderWindow() {
  var AppFolder = document.getElementById("AppFolderWindow");
  AppFolder.style.display = "block";
}

This generally work fine, however the divs have a scrollable area, and when the scroll reaches the end of its block, the div disappears. Similarly, if I resize the screen, the div disappears. From the inspector it looks like the div drops the display:block style from the plain-draggable element in both cases. There is nothing fancy on my plain-draggable function, it is just as follows:

draggable = new PlainDraggable(document.getElementById('AppFolderWindow'),{
  handle: document.querySelector('#AppFolderHeader'),
  top: 30,
  left: 120
});

Do you have any idea what might be causing this? (And apologies if there is an obvious answer, I'm not very knowledgeable with Javascript or frontend development in general). Thanks again!

[anseki]

Hi @cwoodza, thank you for the comment. Could you show me an example to reproduce that? I copied your code to JSFiddle, then that seems to work fine: https://jsfiddle.net/0t84d3ws/ Change this example to reproduce that.

[cwoodza]

Thanks very much for the quick reply! And you're completely right, I edited the fiddle and it's not reproducing the result (see here: https://jsfiddle.net/4efyqc0u/1/). However, I did find what I think is the cause of the problem, I'm just not sure where it originated from or how to remove it. If you look at the image, it seems there are event listeners on both scroll and resize, and removing them stops the unexpected behavior. Maybe I added something accidently when first trying your library?

[anseki]

Unfortunately, nobody can help you without reproducing that. However, I recommend you to write the code correctly for avoiding making bugs. Your code (HTML, CSS, JavaScript) is not easy to read and it has some strange things. For example, wrong characters , are included, <div> element is used instead of <button> element, draggable variable is not defined (you should write const draggable), querySelector is used instead of getElementById, many syntax errors in CSS code, and more... Maybe your code has bugs because it seems that you didn't write the code politely. At least, you should use syntax checker such as ESLint (also, CSS checker and HTML checker), and I recommend VS Code editor that has ESLint extension.

[cwoodza]

You are almost certainly right, I'm sure that must be the reason. (I'm an economist trying to cobble something together so this is bound to be messy). But I think I have come up with a make-shift solution at least, in which removing window.addEventListener("resize", o, !0), window.addEventListener("scroll", o, !0); appears to resolve the issue. Very imperfect I know, but seems to work while I try fix the underlying problem.

Thanks again for all your help!

[anseki]

The removing the event listeners doesn't solve the issue because those listeners are parts of the library. Therefore removing those may make another problems. Maybe, bugs in your code were not executed by the removing those.

I'm glad if I could help you. :smile: