How can I set cursor="rayOrigin: mouse" dynamically using setAttribute
Actually I tried
document.querySelector('a-scene').setAttribute('cursor',{rayOrigin:'mouse'});
but it just adds cursor attribute to a-scene without rayOrigin: mouse.
The second parameter of setAttribute function must be a string, so you should write it like this :
document.querySelector('a-scene').setAttribute('cursor', "rayOrigin: mouse;");
Additionally, if you want your cursor to follow the camera, it's better to make it a child of the camera entity instead of setting the attribute on a-scene. You can find an example here in the documentation.
Related
I want to build a web page in plotly.js for plotting a mathematical function depending on some parameters. I want the user to be able to change it using a slider.
For doing this, I need to call my own javascript function (to recalculate the points of the graph), get the current value of the slider and update the graph.
I've looking at the examples in
https://plotly.com/javascript/sliders/
but none of them does what I need, and the documentation
at
https://plotly.com/javascript/reference/layout/sliders/
is not clear at all. It seems that I need to set the "method" property (also "args"). It says
"Sets the Plotly method to be called when the slider value is changed. If the skip method is used, the API slider will function as normal but will perform no API calls and will not bind automatically to state updates. This may be used to create a component interface and attach to slider events manually via JavaScript."
What does it mean?
I already have an application using plotly dash at
https://github.com/pdenapo/normal_bivariada/blob/main/normal_bivariada_interactiva.py
and it is very easy to do using #app.callback. However,
I want to do the same in javascript (since I want to run it on a web server, where I cannot run a python application).
¡Many thanks for any help!
In my project there is one usage case: user click one button and then copy some data to clipboard for next step.
The copied data is related to the clicked button, and is stored in the component state.
I do some search, and find the potential solution as following:
function copyToClipboard(text){
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.setAttribute('value', text);
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
to some extend, we need to create a dummy element, set the copied data to the dummy element and select the element, then execute the execCommand(copy) method.
is it possible to do this without creating dummy element? I know there are some react plugin about clipboard, but I just want to use vanilla javascript. thank you
Your solution works well.
If the value you want to copy is not yet rendered on the DOM, your Document.createElement('input')... method is a good way to create a document node that Document knows about, but that is not visible to the user. Once you use .createElement() you can then call execCommand() on it to copy the value to the clipboard.
The execCommand() method is exposed by HTML5's Document. This means Document has to know about the node you are targeting before you can use the method (this is called Selection).
However, if you want to copy text from an element already rendered on the dom (e.g an input in a form), you could use React's callback ref. Here's a good example of using ref to do this. It's pretty simple, so using a library is likely to be overkill.
I have a very big handsontable. I have dropdown columns defined, but, the values for the sources are retrieved with AJAX.
How can I set the "source" property of a "column" of type "dropdown" dynamically?
Regards!
You can, and should, use:
hotInstance.updateSettings({
columns: getNewColumns()
})
Where getNewColumns() would return an array of columns with the data and new source (or make the AJAX call from in here). That should do it!
Thank you for the answer ZekeDroid.
I was able to solve my issue.
First lets talk about a problem in the angular directive:
I am using the handsontable's angular directive. Two things happen: 1. If I associated the datarows attribute to a nested variale in the model, for example $scope.hot.data, then when I change the value of the model ( $scope.hot.data ) the grid ui is not refreshed. I am pretty sure this is an issue with the directive. Now: 2. Assume I use $scope.data and I update its value (this is the model right), then the grid ui is not refreshed either. I have to do something like hotInstance.updateSettings({data: newData}) as well.
I have to do both things; that is, update the model and call the update settings method. This is the only way I could get it work properly.
Note: if I do $scope.$apply() instead the updateSettings, I get an error in the console.
My EmberJS app is confusing me a lot at the moment. I have a collection view, that in turn defines an itemViewClass of a custom view I have defined in my code. Something like:
App.CarouselView = Ember.CollectionView.extend({
itemViewClass: App.SlideView.extend(),
});
And this CarouselView is rendered inside a template that has a dynamic segment backing it (I hope this makes sense?) . The controller for these dynamic segment is an array controller because the model for these dynamic segments is a collection :) (more confusion, please let me know)
App.SlidesController = Ember.ArrayController.extend();
By now all of you have figured that I am basically rendering a bunch of slides inside of a carousel. And these are dynamically backed in the collectionView by setting the property
contentBinding:'controller' // property set in CarouselView, controller corresponds to SlidesController
The confusion begins now. I want to add a slide to the existing set of slides. So I provide a button with an action : 'add' target='view'
In the SlidesView,
actions:{
add: function(){
var carouselView = this.get('childViews')[0];
// SlidesView has carouselView and another view as it's child, hence this.get('childViews')[0] is carouselView
var newCard = carouselView.createChildView(App.SlideView.extend());
carouselView.get('childViews').pushObject(newCard);
}
}
The above piece of code sucks and hurts me bad. I want to basically add a new SlideView to my CarouselView collection programmatically upon a button trigger. But apparently Ember recommends that childViews should not be manipulated directly and I ought to instead change the underlying content.
It states in my console.log that manipulating childViews is deprecated etc.
So essentially I need to add something to my content to my SlidesController content ? However, I don't want to add something to the content, this is just a soft add, that is providing the user with a slide so that he may choose to edit or add something if he wants to. He can always discard it. A hard add that will require me to persist the new slide to the DB will come once the user decides to save this information.
I can watch in a directive one object's property (actually - clientHeight). But how to change other object's padding-top according to this height? I know how to do this using jQuery, but I am looking for an Angular way.
In Angular one can access some page element using a directive. Ok, but how to access other page element in the same directive?
There are a number of ways you could do this. For all of the suggestions below, assume you have two directives – one for watching the clientHeight, the other for adjusting the padding.
Create a service (that is injected into both directives). Have the first directive modify an object property in the service (e.g., someObj.prop1). The other directive $watches that object property.
Use events. Have the first directive $emit or $broadcast an event and the second directive can listen for it using $on (in its link function or in its own controller).
If there is an ancestor relationship, you can require the ancestor directive's controller in the descendant directive. See AngularJS: reuse component with different parent for an example.
Not recommended, but another option: use $rootScope instead of a service: inject $rootScope into both directives. Have the first directive modify an object property on $rootScope. The other directive $watches that object property.