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...
Related
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.
I'm developing a Vue.js application and I'm having trouble to link an anchor to a certain div within a component.
I have the following anchor:
Porto, Portugal
and the following div:
<div id="porto" class="fl-porto">
I'm using vue-router in hash mode.
The problem is, whenever I click the "porto-button" it will redirect me to the "home" page ( ' / ' )
I'm using Vue.js 1.X and I tried using history mode (URL without the hashbang) but it gives me a cannot GET '/page' error upon refreshing a page.
Am I doing something wrong? What can I do about this?
Because you are using router in hash mode, you will not be able to scroll that easily because scrolling to /#something will actually redirect you to 'something' page.
You will have to emulate scrolling behaviour on your own, try doing something like that:
//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.
//Your view:
<a class="porto-button" #click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">
//Your code:
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
How it works:
Set the references through ref attribute to the element you would like to scroll to;
Write a function that will programmatically set window.scrollY to the top of the referenced element.
Job is done :)
Update 1:
jsfiddle https://jsfiddle.net/5k4ptmqg/4/
Update 2:
Seems that in Vue 1 ref="name" looked like el:name (docs), here is an updated example:
https://jsfiddle.net/5y3pkoyz/2/
Another method is to use "scrollIntoView()"
So, euvl's code still stands, except you would change the method slightly:
new Vue({
el: '#app',
methods: {
goto(refName) {
var element = this.$els[refName];
element.scrollIntoView();
}
}
})
If you wanted to get fancy and make the scroll smooth, you can even add the following:
element.scrollIntoView({ behavior: 'smooth' });
Note that this will need a polyfill for older browsers.
What worked for me
<router-link to="#leaders">Leaders</router-link>
or dynamic
<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
{{subMenuItem.linkTitle}}
</router-link>
in router
routes:[],
scrollBehavior (to, from, savedPosition) {
//https://router.vuejs.org/guide/advanced/scroll-behavior.html
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
}
An alternative solution is to use the v-scroll-to directive (webpage, github).
I find this solution to be clean, simple, flexible and effective. To use:
Install it:
npm install --save vue-scrollto
Have Vue 'use' it:
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
Apply it as a directive in your Vue component's template:
Scroll to #element
<div id="element">
Hi. I'm #element.
</div>
Or apply it programmatically in your Vue component's methods:
this.$scrollTo('#element', 500, { easing: 'ease-in-out' })
Or apply it programmatically in your Vuex actions:
import { scrollTo } from 'vue-scrollto'
scrollTo('#element', 500, { easing: 'ease-in-out' })
Another solution, if you're already using Vuetify, you may prefer to use Vuetify's built-in programmatic scrolling method, $vuetify.goTo():
<v-btn #click="$vuetify.goTo('#element', {duration: 500, easing: 'easeInOutCubic'})">
Scroll to #element
</v-btn>
<div id="element">
Hi. I'm #element.
</div>
If you set a ref="something" on an element, you could also use this oneliner with #click:
<a #click="$refs.something.$el.scrollIntoView()">
Go to something
</a>
Here is fiddle example of something I would like to do. I want to mouse over element that is inside iframe (same domain) and then change color of the font. Like in example.
But in my version first the iframe is created after I push the button - my fiddle example. In my example mouseover wont work and I do not know why. I am not that experienced with JavaScript and can not figure it out on my own. Maybe what I want to do cannot be done or maybe I'm just missing something out.
function load_iframe(callback) {
$('#iframe').append('<iframe class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');
})
return iframe
})
iframe.on('mouseover', 'b', function() {
$(this).css('color','red');
});
What I have done so far: Fiddle
this is simple code i hope to help you .... i am edit your code
var iframe
var a
function load_iframe(callback) {
$('#iframe').append('<iframe id="1a" class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b id="bb">This is a test</b><br><b>Click here</b>');
a=document.getElementById('1a').contentWindow.document.getElementById('bb')
alert('pass')
a.onmouseover=function(){
a.style.color="red"
}
a.onmouseleave=function(){
a.style.color="black"
}
})
return iframe
})
I have the below content that loads on through AJAX.
<div class="grid">
<div class="thumb">
<img alt="AlbumIcon" src="some-image.jpg">
<div style="bottom:-75px;" class="meta">
<p class="title">Title</p>
<p class="genre"> <i class="icon-film icon-white"></i>
Genre
</p>
</div>
</div>
</div>
Additionally, I have writen the following script in jquery that applies to the above 'div.grid'.
jQuery(function ($) {
$(document).ready(function () {
$(".grid").on({
mouseenter : function () {
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},
mouseleave : function () {
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
});
});
});
The script works fine when the page loads the first time. However, the hover effect doesn't work once the above div is generated via AJAX after clicking on an 'a' tag. I can't seem to figure out what's wrong here? New to all this. Can anyone help?
To append these event handlers to dynamically generated elements, you need to bind to the document or another static parent element and then specify .grid as the second argument passed to .on.
The second argument is used as a filter to determine the selected elements that trigger the event. So when the event is fired it will propagate to the document or parent element selected by jquery. The event target will then be scrutinized using the selector provided as the second argument. If the target matches the second argument, (.grid in our case), the event is fired.
You can read more in the jQuery documentation.
Also, since your using document.ready there is no need for the short hand ready statement, jquery(function($).
$(document).ready(function () {
$(document).on({
mouseenter : function () {
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},
mouseleave : function () {
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
}, ".grid");
});
you lost your binding because of ajax that overwrite your div with class=".grid"
use parent element for binding
$('.ParentElementClass').on("mouseleave", ".grid", function(){...})
more from jquery api
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
Not sure what you're shooting for here but a little malformed HTML may have done it...
jsFiddle Demo
<div class="grid">
<div class="thumb">
<img alt="AlbumIcon" src="some-image.jpg" />
<div style="bottom:-75px;" class="meta">
<p class="title">Title</p>
<p class="genre"><i class="icon-film icon-white"></i>Genre</p>
</div>
</div>
</div>
$(function () {
$(".grid").on({
mouseenter: function () {
alert('entered');
$(this).find('.meta').stop().animate({
bottom: '0px'
}, 200);
},
mouseleave: function () {
alert('left');
$(this).find('.meta').stop().animate({
bottom: '-75px'
}, 200);
}
}, ".thumb");
});
});
Be sure to close img tags. They're notorious for causing intermittent glitches.
You can just use the hover function:
jQuery(function ($) {
$(document).ready(function () {
$(".grid").hover(function () { /*mouseenter*/
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},function(){ /*mouseleave*/
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
});
});
Explanation:
The first parameter function does the work of mouseenter and the second does the work of mouseleave.
I'd recommend using those both, mouseenter and mouseleave in situation when you don't want an effect back when the user gets off his mouse from the element.
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.