I am currently trying to get button input from the Oculus Touch buttons. I was able to attach a laser-controls to the control but I would like to be able to toggle the laser on and off. Not sure if this possible but I'm currently working with this setup that yields no response:
<script>
AFRAME.registerComponent('x-button-listener', {
init: function() {
var el = this.el;
el.addEventListener('xbuttondown', function(evt) {
var cameraEl = document.querySelector('#cameraRig[#left-hand]');
cameraEl.removeAttribute('laser-controls');
});
}
});
</script>
and
<a-entity id="cameraRig">
<a-entity x-button-listener id="left-hand" teleport-controls="button: trigger; collision-entities: #ground" laser-controls="hand: left"></a-entity>
</a-entity>
Any help would be greatly appreciated.
Your query looks odd. Don't you mean
document.querySelector('#left-hand')
or
document.querySelector('#cameraRig > #left-hand')
(see MDN for more information)
You want to do .setAttribute('raycaster', 'showLine', false), not remove laser-controls.
Related
I want to add mouse swipe effect to jquery tab so that an user can move to another tab by swiping the mouse over the screen. I think Hammer.js could solve this problem but I have no idea about how to integrate Hammer.js with jquery-tab. I am a beginner in jquery.
Thanks in advance.
Hope this helps...
var tabs = jQuery('.tab'),
i = 0;
slides
.on('swipeleft', function(e) {
tabs.eq(i + 1).addClass('active');
})
.on('swiperight', function(e) {
tabs.eq(i - 1).addClass('active');
});
Reference- http://stephband.info/jquery.event.swipe/
I've set up soundmanager:
soundManager.setup({
And I've created a sound:
soundManager.createSound({
From the console I also have threeSixtyPlayer:
threeSixtyPlayer.init()
threeSixtyPlayer.init(): Found 0 relevant items.
So how do I make the 360player play the sound? And how do I detect that it is finished playing so that I can create and play the next one after that?
The docs lack information regarding 360ui but from what I've tried:
HTML code needed:
<div id="sm2-container"></div>
<div class="ui360 ui360-vis">
<a id="song_link" class="sm2_link" href="asfgasg.mp3"></a>
</div>
JS:
soundManager.setup({
url: 'inc/soundmanager/',
flashVersion: 9,
useFlashBlock: true,
onready: function() {
soundManager.createSound('someSongId_', selectedSong);
},
ontimeout: function() {
// Error msg
}
});
You also need the files (depending on the theme you want):
flashblock.css
360player.css
360player-visualization.css
berniecode-animator.js
360-button-vis-play-light.png
360-button-vis-pause-light.png
After that there should be a div with a "play" image.
To play you can use soundManager.getSoundById('myId') and chain it with the onfinish event. Example at the doc:
soundManager.play('myId',{
onfinish: function() {
alert('The sound '+this.id+' finished playing.');
}
});
Hope it helps...
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/
I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.
What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
}
</script>
<section id="planetbox">
<img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>
<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>
Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)
I managed to solve my issue using the code below on the function drop(ev):
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
if ( image == ev.target.id) {
ev.target.appendChild(document.getElementById(image));
}
else {
}
}
I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).
What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I'm doing is replacing the buttons with images, each with a "pressed" version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to "un-pressed". Essentially so that only one image can be "pressed" at a time.
Right now the code for me pressed images are
$(function() {
$(".img-swap1").live('click', function() {
if ($(this).attr("class") == "img-swap1") {
this.src = this.src.replace("_U", "_C");
} else {
this.src = this.src.replace("_C","_U");
}
$(this).toggleClass("on");
});
});
I thought about using an if statement to revert all the "_C" (clicked) back to "_U" (unclicked).
Hopefully I've included enough information.
A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.
Also, your if statement ($(this).attr("class") == "img-swap1") is redundant -- it will always be true because it's the same as the original selector $(".img-swap1").live('click'...
Try
$(function() {
$(".img-swap1").live('click', function() {
$(".img-swap1").removeClass('on').each(function(){
this.src = this.src.replace("_U", "_C");
});
this.src = this.src.replace("_C","_U");
$(this).addClass("on");
});
});
If I understand the question correctly the following may work for you:
$(function(){
$('.img-swap1').live('click', function() {
$('.img-swap1').removeClass('on').each(function(){
$(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
});
$(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
$(this).toggleClass("on");
});
});
I hope this helps.