Running
document.querySelector("[light]").components.light.data.color="#A00";
Doesn't do anything, it will add color="#A00" if flushToDOM as an attribute but not change the light.
Changing light="color:#BBB" does work by hand, but what is the best way programmatically to do this now?
Modifying the data object directly isn't supported - you'll want to use setAttribute instead. Example:
var lightEl = document.querySelector('[light]');
lightEl.setAttribute('light', {color: '#a00'});
Related
When I drag an image in react that has draggable set to true, I get not-allowed / no-drop cursor. I can't figure out how to target it with CSS to overwrite. The way I handle the drag is onDragStart then onDragEnd.
Without some reproducable code i just can try a shot in the dark: You have to call at the beginning of your drag handler e.preventDefault();.
I faced the same issue back when I was working on one of my React projects, so I did some research and tested several methods that I found, but nothing worked for me. You see there is a property named DataTransfer.effectAllowed that specifies the effect that is allowed for drag operation, and there is a limitation to this API as you can read here -
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
Changing the styles or attaching an eventListener won't work, you have to use a different backend for this. Use react-dnd and react-dnd-touch-backend or react-dnd-html5-backend npm packages as a custom backend.
https://www.npmjs.com/package/react-dnd
https://www.npmjs.com/package/react-dnd-touch-backend
https://www.npmjs.com/package/react-dnd-html5-backend
I have been trying to get my head around a way to intergrate Ember.js with Three.js. In particular, I want to render a number of elements, controlling the data with Ember.js bindings and general pub/sub handling, but also wont to be able to manipulate the views/elements with three.js using THREE.CSS3DObject.
I'm fairly confident with Ember but new to Three. I guess what I'm thinking is, can I have an element that exists in both the THREE.Scene and the Ember application namespace?
In the THREE.js periodic table example:
http://mrdoob.github.com/three.js/examples/css3d_periodictable.html
an DOM.element is create and then later decorated with attributes (style, position etc).
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,'+(Math.random()* 0.5 + 0.25 ) + ')';
Later, it is added as an element to the THREE.CSS3Object constructor:
var object = new THREE.CSS3DObject( element );
I'm wondering if I can create the elements in perhaps an Ember containerView and then use jQuery to iterate over the childViews, caching the currently iterated element as 'element' and then render this to the THREE.CSS3DObject constructor?
I know it's a bit hacky and I only mention the above as some indication that I have tried to think up a way before asking for help! haha!
Any guidance or even pie in the sky suggestions like mine would be greatly appreciated. Thanks in advance.
Three's CSS3D renderer is just a thin abstraction of the browsers' own renderer and therefore should not conflict with the manipulation of DOM elements with Ember or jQ.
Once passed to the CSS3DObject constructor, an element's 3D transforms are updated but beyond that, it's business as usual. You can manipulate its content and style it as needed.
Can anyone tell me how to detect -webkit-appearance, moz-apperance, or appearance using Modernizr?
I have custom selects, and checkboxes that use these and I need to ensure the additional styles are not applied on those browser that dont support these properties.
Thanks
Just use Modernizr.testProp() method:
Modernizr.testProp('webkitAppearance');
And with this check you can write your own Modernizr test using Modernizr.addTest():
Modernizr.addTest('webkit-appearance', function() {
return Modernizr.testProp('webkitAppearance');
});
I'm pretty certain that Modernizr doesn't include a detection routine for this feature yet -- it's just too new.
However, as it's a CSS property, you should be able to detect it fairly simply for yourself without needing to invoke modernizr.
This page details how to do a quick check to detect if a CSS property is available.
Simply check whether the property exists in the style property of any given DOM element. If the property is supported, it will be in the DOM, even if it isn't actually set to anything.
Hope that helps.
I am trying to make enabled="false" to one form field in my flex application. But the appearance of the field after disabling it
is looking furious. I want to change the look of the field after disabling it in my way. So can i change the look and feel of a field after disabling it ?
Thanks in advance...
I think you have to write a skin for your component.
Every skin has different states for skinning. In your case, you have to write skin for disabled state.
To get started, this tutorial might be useful - http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
For detailed information on skinning, please visit http://help.adobe.com/en_US/flex/using/WSC8DB0C28-F7A6-48ff-9899-7957415A0A49.html
Yes.
Concept: -
Use constraint based layout concept.
If you are using actionscript use move()
Ex: -
button.move(100,100);
if(button.visible)
{
button1.move(button.x + button.height + 5,button.y);
}
so on....
Please add some code so that we can suggest what exactly you are looking for.
I`m really new to Flex and ActionScript so please be patient with me.
I want to implement this script: tinyurl.com/yafqrqb
...that is doing this "magic" : tinyurl.com/y9qg32r
...but I want to tweak it a little on InfoWindowTabbedComponent. To be more precisely I`m trying to insert links in that tabs, and when you click one the state will change.
You can see my custom InfoWindowTabbedComponent at the end of the post As you can see, right now I have 2 functions that open url`s.
What I`m trying to do is to change this:
var adobeURL:URLRequest = new URLRequest("http://www.microsoft.com" );
navigateToURL(adobeURL, "_self");
Into something that change the current state.
Can you please help me?
Here`s my custom InfoWindowTabbedComponent: http://pastebin.com/f387bc3b9
I'm not sure I understand what you want to do. If you just want to set the selected Tab, instead of calling navigateToURL() set myTabNavigator.selectedIndex (or selectedChild)
If you really want to change the state, each component has a currentState property, but then you would have to define the states first (via the tag)
And if you really want to navigateToURL() you could navigate to javascript:somefunction() and then set the application state via ExternalInterface, but that would be horribly circumstantial.
Cheers,
Jörg