Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to play/pause two audio files by using single control anyone can please help.
if I click on play button the two audio files should stop and same pause also..
just do this in js for each of your audio tag :
var a = document.getElementById("audio1");
a.play();
for example :
var audioElements = ['audio1','audio2'];
function playAudio() {
for(i = 0; i < audioElements.length;i++) {
document.getElementById(audioElements[i]).play();
}
}
function pauseAudio() {
for(i = 0; i < audioElements.length;i++) {
document.getElementById(audioElements[i]).pause();
}
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
I am switching from class component to function component.
Now I have a question, I just want to have the method which return valuable in component. such as
const ImagePreview = (props) =>{
const onClick= (e) =>{
　　　　if (isVariableTrue(myvar)){
}
}
function isVariableTrue(b){ // I want to call this from onClick
if(b){ return true; }
else { return false;}
}
return (<div>mytest<br/></div>);
}
Howver of course this is not correct.
What is equivalent for this purpose?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have written HTML code inside a JSON object as a string, is there a way in which i can access the HTML id from there.
{
"text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
}
I want that whenever user is clicking any link in the inner list, i should get the id of it. In this scenario i have defined this case in IBM Watson, now my motive is whenever user is clicking any of the links i need to trigger another case. But for that i need to check which one did he choose.
You can use DOMParser(), querySelectorAll() and map() like the following way:
var json = {
"text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
}
var doc = new DOMParser().parseFromString(json.text, "text/html");
var ids = [...doc.querySelectorAll('li')].map(el => el.id);
console.log(ids);
You first need to add that list elements into the DOM
Then you need to attach click event listeners to each of the <li> elements
Using that listener you can access the id and other attributes of that element
var obj = {
"text": "<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
};
document.getElementById('container').innerHTML = obj.text;
var liElems = document.querySelectorAll('ol li');
for(var i=0; i<liElems.length; i++){
liElems[i].addEventListener('click', function(e){
console.log(e.target.id);
});
}
<div id="container"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to get rid of my header and footer components in just one specific component and don't know how to go about it. I am treating the app component as the index.html component. When I create a new component, these are always there and I need to figure out how to make it so my new component is blank.
You can watch router events in Angular and execute something based on the route.
Example:
You can implement this in your app component.
ngOnInit() {
this.router.events.forEach((event: NavigationEnd) => { // fires on each route change
if (event instanceof NavigationEnd) {
this.routeParam = event.url; // routeParam is a variable.
}
if (this.routeParam === '/') {
// do something
} else if (this.routeParam === '/login') {
// do something
// you can store a boolean in a service and use it to hide components.
this.someService.myBoolean = true;
} else {
// do something
}
})
}
In the UI you can use that boolean.
<myComponent *ngIf="!someService.myBoolean"><!-- someService should be
public -->
<!-- component you want to hide -->
</myComponent>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want to have the not clicked image first, and then when clicked (as long as it's been pressed [not hover]) I want it to have the other image, but once it gets released, it should follow a link. Is this possible, if so, how do I do it?
Thanks in advance.
with javascirpt it is easy:
put the image in a div.
you need something like (not tested allright?):
var firstclicked = false;
var released = false;
var image = document.getElementById("yourImage")
image.onclick = function ()
{
if(firstclicked == false)
{
var image = document.getElementById("yourImage");
image.src = "directorynewimage/pathnewimage";
firstclicked = true
}
}
image.onmouseup = function()
{
if (firstclicked == true && released == false)
{
var image = document.getElementById("yourImage");
image.parent.innerHTML = "HREF";
released=true;
}
}
Allright?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am trying to make a div display at 95% play time of the video, can someone help me with this?
HTML5 player
Use the 'timeupdate' html5 media event - http://jsfiddle.net/m3orwedL/1
JAVASCRIPT
(function() {
var video_el, percentage;
function init() {
video_el = document.createElement('video');
video_el.src = "http://jspro.brothercake.com/media-events/media/BadgerWatch.mp4";
video_el.setAttribute("controls", true);
console.log(video_el);
video_el.addEventListener('timeupdate', checkTime);
document.body.appendChild(video_el);
}
function checkTime() {
percentage = video_el.currentTime / video_el.duration * 100;
console.log(Math.round(percentage) + '%');
if(percentage >= 95) {
alert('video is at 95%!');
video_el.removeEventListener('timeupdate', checkTime);
}
}
window.addEventListener('DOMContentLoaded', init);
}).call();