Is that possible to only reload / refresh a entity like in A-frame? not the whole A-frame page
<img id="front" src="assets/png/front.png">
because i want to change the image
You can use javascript to manipulate the dom in the aframe. For exmaple you can flush the data changes to the dom like this:
document.querySelector('img').flushToDOM();
You also can change the attributes of an entity like this:
entity.setAttribute('img', { src: 'assets/png/front.png' });
Related
What would be the correct way to lazy load youtube video but keep focus on play / pause button like on the regular load (so people with disabilities can use space key to pause the video)?
All solution are seem not to keep focus on video and space scrolls the page down.
Is that possible at all?
This might not be the best way to do it as JavaScript will need to be enabled in you client's browser, however you should be able to run a JavaScript function when the iFrame loads like this:
const iframe = document.querySelector('.my-iframe');
iframe.onload = function() {
onLoad();
}
or like this:
<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>
If you would then write a function called onLoad() that calls the .focus() method on the play button with code similar to that in the next block, you should be able to have focus set to the play button. Note that the following code block assumes that the ID of the play button will be "play_button" which is unlikely to be the case.
funtion onLoad() {
iframe.contentWindow.document.getElementById("play_button").focus();
};
Hope this helps!
By default the Networked A-Frame component for A-Frame uses LERPing to smooth the animation between position and rotation updates for objects synced through the networked component. I'd like to disable that feature but the docs show a syntax example of NAF.options.useLerp which isn't an attribute that I can set on the networked-scene component which instead looks like this:
<a-scene networked-scene="
room: handcontrollers;
debug: true;
">
Where do I put the NAF.options.useLerp command to disable LERPing?
This code goes in a JavaScript tag anywhere in your page source after you import networked-aframe.
Simplified example that worked for me inside of <head> tag:
<script>window.NAF || document.write('<script src="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js">\x3C/script>')</script>
<script>NAF.options.useLerp = false;</script>
I've been reading the RactiveJS docs on event management at https://ractive.js.org/get-started/tutorials/events/, and had a question around rendering of events:
Instead, the on- directive will bind a shared callback directly to the element using addEventListener when it is rendered.
Is it possible to see what the rendered event would look like? I know it won't appear within console, but it would be nice to see if there is a way of viewing an example of how a rendered event would appear.
What that portion of the tutorials meant to say is that the on-* directive doesn't render inline JS nor render on the DOM at all. It's a directive that simply signals Ractive what to do. Even if the template looks like this:
<button on-click="#global.alert( 'Activating!' )">Activate!</button>
What ends up in the DOM is a button with an event handler.
<button>Activate!</button>
Under the hood, the on-* is processed from the parsed template and is converted to something roughly similar to the following:
buttonReference.addEventListener('click', function(){
theGlobalDependingOnTheEnv.alert( 'Activating!' );
});
I've got a list of menu items and each is an a tag. Inside those, I've got notification bubbles insides a div. When the notification div is clicked, I'd like to first follow the a tag (the hash is always to a Meteor route, using Iron Router) before it executes the click event attached to the div. Since reverse-propagation hasn't existed since the netscape days, I thought maybe that click event could store a function as a callback when the route changes? Has anyone tried to do something similar? Couldn't find anything in the Iron Router docs about it. I'm currently mitigating the problem with a few Session vars, but would like to clean it up.
Without seeing what your code is currently doing (or even better, a simplified example), I am guessing a bit at what you are trying to do. Maybe you have something like this:
<div id="bubblething">Click Me!</div>
With a click event:
'click #bubblething': function() {
// Do the bubble thing.
}
But the problem is you'd like to trigger the click event after you route but the click is happening to early. Would it be possible to change it to something more like this:
<div id="bubblething">Click Me!</div> //no <a> tag.
With the click event handling the actually routing first then moving on:
'click #bubblething': function(){
Router.go('/yourroute'); // First you route
{ ... } // Code to handle the notification bubble.
}
You may have to update your styling a bit do to the lack of am <a> tag but that should be pretty simple. The routing is handled by the click and then other things happen. You can parameterize this so that instead of calling an id you call a class and inject the route.
As you can see here, I have set up an addon to replace some contents of the network-inspect-popup with pretty-printed values. The odd thing is, I'm setting background of both the iframe and the inner document (background;#FFF), but it still shows the bluish background of the net-inspector. What's wrong with this, and why does DOM Inspector addon not even let me inspect to see what's wrong here?
Your own code overrides your own style. You have:
netPanel.iframe.addEventListener('load',function(event) {
var doc = event.originalTarget;
doc.body.style.backgroundColor='rgb(85,87,128)';
// ...
}, true);
This event listener will be called for all load events bubbling in the netPanel.iframe DOM, and that includes the load event the iframe document you insert creates. Change your code to first check the load is actually coming from a document you want to "overlay".
PS: You can actually use the DOM Inspector. But note that the "window" is not actually a window, but a <panel> in under the browser.xul top-level DOM.