Override HTML native drag and drop ghosting effect - html

I have made a a feature using the native HTML drag and drop API in Vue 3. However, I would like to override the opacity that gets added when dragging. I have tried adding to the style like this in my ondragstart event
event.currentTarget.style.opacity = 1;
but it seems like that style can't be overridden. I have seen a lot of people on various forums complain about how its hard/not possible to change this "ghosting" effect. But if anyone has a solution, please let me know :)

I think the solution to this problem can be much easier than you think. Adding attribute !important to your style will overwrite everything :)
event.currentTarget.style.opacity = "1 !important";
Let me now if this works :)

This done by replacing the default drag behaviour. You setup your own drag experience and then you can control how the browser handles the default behaviour.
Usually, the drag is turned off and a clone is of the node is moved.

Related

How to detect that a TVML lockup loses focus?

Is there a way to detect that a lockup loses focus when using TVML and TVMLKit JS on tvOS 12?
I know there's a highlight event when something receives focus using the following:
lockupElement.addEventListener("highlight", this.handleHighlight);
I want to handle when the lockup is no longer highlighted. The closest I've found to a solution is to add highlight-events to absolutely every other element and then reset any previously highlighted elements. This seems like a hack and it is also tedious and bug-prone adding it to every other element.
Anyone know of a better method?
If your lockup element is a custom element created through the extended interface creator you can override the didUpdateFocus(context, coordinator) function in your Swift class.
If it's just a default lockup I think you're out of luck.

How to create popup windows in html

I want to know how the pop up windows integrated into websites are built. I am trying to create one for my websites but i don't really know it is created whether they are plugins or not. Any help as to how to go about it.
Below is an example of what i want to do.
You can use hotjar.com to put a feedback box in your page, there is a lot of services that provides this feature, but hotjar gets the job done
Beginner! To make a pop-up like the one you provided, you would need to write backend code (Node.JS, PHP, Python, etc.). But for just a simple info pop-up with a button that activates the pop-up refer to this jsfiddle I created:
https://jsfiddle.net/d706dyg7/1/
$("#whateverid").click(function(){
//whatever code
});
That mean when that element is clicked blah happens.
Hope that helps,
Ben A.K.A BlackSky
P.S. If you want a solution in pure javascript and not jQuery just let me know and I will edit my fiddle!
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
If you want to do this using ONLY html and css (using a framework in visual studio like ASP.NET) for example.. here's what I did:
First, I made sure I had multiple "divs" in my code. For me specifically, I had two main ones. The first one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
Your looking for something called a modal. Depending how you wrote your HTML there are different ways of approaching this issue.
If your wrote your website in Plain HTML you can use the following tutorial to create one
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/amp/
However if you wrote your website with a library such as Bootstrap they have built in pre made modules that you can attach to your cpde. These can Ben found in the library's documentation.

Emulate JavaScript events with developer tools?

Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:
The problem is that this doesn't seem to set off any JavaScript events.
I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.
I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:
$("#custom-element-hover").mouseover();
Which feels wrong (and is a little cumbersome).
Is there a better way to do this that I don't know about?
In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:
You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.
If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.
You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.
I can share with what I do in this kind of situations. I open elements tab in chrome debugger and right click on target element. Then I choose "Copy CSS path"
If you do this you will get something like this
#mdhelp-tabs > li:nth-child(1)
And this string can actually be used as legimit selector for jQuery. So this
$("#mdhelp-tabs > li:nth-child(1)")
will give jquery object with target element of dom in it.
So you would not have to assign an ID to every single element you want to deal with.
I am not sure but you can use console to handle tooltip

How to force invalidation in Flex 4 TextArea component?

I have a TextArea in a mobile application that I want to force invalidation on a certain event. So far I can do this:
myTextArea.width = myTextArea.width + 1;
I know it works because the text area updates correctly.
I've tried to do it "correctly" using the following:
testing.invalidateProperties();
testing.invalidateDisplayList();
testing.invalidateSize();
testing.validateNow();
parentGroup.invalidateProperties();
parentGroup.invalidateDisplayList();
parentGroup.invalidateSize();
parentGroup.validateNow();
None of the previous code works.
The TextArea is using the StageTextAreaSkin.
UPDATE
This seems to work as well as setting the width but is also a hack and also doesn't sync with the rest of the components:
testing.skin.styleChanged("anything");
The only way I've found to force a validation is to call myTextArea.setStyle("anything_here") or myTextArea.skin.setStyle("anything_here"). Note, it may be the fault of the skin, it is a mobile spark skin from the SDK (not my own creation). Better answers are appreciated.

Making JPopupMenu's submenus heavyweight

http://java.sun.com/products/jfc/tsc/articles/mixing/index.html advices how to make JPopupMenus heavyweight. Just set the property:
setLightWeightPopupEnabled(false);
It works fine, but if I have submenus in the popup, implemented as JMenu items, they don't seem to inherit the popup's heavy weight. JMenu doesn't have a method to make itself heavyweight, and using an AWT Menu isn't an option, since I want to put Swing items into it.
How do I make the submenus heavyweight, too?
It seems to be a Swing bug. Setting the global property
JPopupMenu.setDefaultLightWeightPopupEnabled(false);
works! Also submenu JMenu items go heavy, as they should. Obviously the per-instance method setLightWeightPopupEnabled should work similarly, but it doesn't.
I filed a bug (Bug Id: 7005406) on this, but I leave the question here just in case that someone else bumps on this. So the solution is to use the global setting until the bug gets fixed.