Essentially, I would like to know the best way to toggle between two img or div on a user click. So, first the play image is visible and when user clicks, play image is hidden and pause image is shown. When user clicks pause image, pause image is hidden and play image is shown.
I tried using an ng-show but I could only figure out how to show both images without hiding the other. So, a play image would be next to the pause image, which is not ideal.
Thanks in advance :)
Code I have tried that does not work:
HTML
<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>
Controller:
$scope.changeStatus=function(){
$scope.checkStatus = false;
}
$scope.changeStatusAgain=function(){
$scope.checkStatus = true;
}
https://jsfiddle.net/n8nnwtte/
Use the same expression for both and negate it according to your logic.
HTML
<button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
<button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">
JS
var $scope.song = {
playing: false, // Set the initial state
togglePlay: function() {
$scope.song.playing = !$scope.song.playing; // This would alternate the state each time
// Do something with the song
if ($scope.song.playing) { /*..*/ } else { /*..*/ }
}
};
This assumes you have a song object defined in your scope and that it has a boolean property called playing. So if song.playing is falsy we show the play button and if it's truthy we show the pause button.
The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.
JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element
his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.
https://siongui.github.io/code/javascript-sound/toggle.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>
<button id="player" type="button"
onclick="javascript:toggleSound();">
Click to Toggle Sound
</button>
<audio id="audio">
<source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<script type="text/javascript">
function toggleSound() {
var audioElem = document.getElementById('audio');
if (audioElem.paused)
audioElem.play();
else
audioElem.pause();
}
</script>
</body>
</html>
Related
I want to fade in an element using a javascript tween library. When loading the Sveltekit page for the first time, the DOM elements I want to animate flashes for brief moment before onMount kicks in and I can hide it with javascript, and tween it like I want.
This flashing effect is not desired.
It is possible to hide this with using the following code:
<script>
import { onMount } from 'svelte';
let ready = false;
onMount(() => ready = true);
</script>
<div class="always-visible">
{#if ready}
<div class="visible-on-mount">...</div>
{/if}
</div>
But this will hide the content permanent if the browser does not support javascript. I want the content to appear when javascript is not available.
I'm programming an App for the Aldebaran's Pepper robot. I'm using Choregraphe and I made an html page for displaying in robots tablet.
I just want to activate an output (that i have to add at the "SHOW APP" box) by pressing a button in the Html page displayed on the tablet of the robot.
How to do this?
index.html
<head>
<script src="/libs/qi/2/qi.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="flex">
<button class="button" onclick="launchEvent1()">First event</button>
<button class="button" onclick="launchEvent2()">Second event</button>
<button class="button" onclick="launchEvent3()">Third event</button>
<button class="home" onclick="launchEventHome()">Home button</button>
</div>
</body>
script.js
session = null
QiSession(connected, disconnected, location.host);
function connected(s) {
console.log("Session connected");
session = s;
//If you want to subscribe so some events (to send info pepper->tablet) call the function here
}
function disconnected(error) {
console.log("Session disconnected");
}
function launchEventHome(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("homeEvent", "paramHome");
});
}
function launchEvent1(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event1", "param1");
});
}
function launchEvent2(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event2", "param2");
});
}
function launchEvent3(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event3", "param3");
});
}
On choregraphe, click on "add event from ALMemory" (the plus icon on the left side) and select "add new key". Give it the name you gave it on your .js file (in my case, event1, event2, event3 and homeEvent).
With that, whenever the user clicks on the button on the tablet, it will trigger the event and it will send the param as a dynamic type (param1, 2, etc. depending on which button the user pressed)
What you can do is use the Javascript SDK to raise ALMemory events, and subscribe to those in Choregraphe.
Something like this (left red box):
i have angularJS 1.5.0-rc.2
I found on the internet that i can use the directive
data-ng-disabled="Expression"
But it won't disable a button.
What i tried :
<button data-ng-disabled="false">Select</button> // don't work
<button data-ng-disabled="loaded">Select</button> // don't work
<button data-ng-disabled="loaded != false">Select</button> // don't work
Loaded is defined in my controller as $scope.loaded = false.
How can i disable a button ? Thanks
The button will be disabled only if the expression is true.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="disableBtn=true">
<button ng-disabled="disableBtn">test</button>
</div>
I make it without derective. I made it like this:
remove
In controller first of all made
$scope.disabled = true;
Than in if/else remove class disabled and change $scope.disabled = false;
I give you example with tag <a></a> this work with button simple.
And in button ng-click first made Test ng-click="disabled||usertaskctrl.removeTasksToArchive()" before make click on some you function.
Try this
1 This is direct method of implementation
<script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<button ng-disabled=true>test</button>
</div>
2 another way you can change the value for
<div ng-app>
<button ng-disabled=dsblBtn>test</button>
</div>
in controller inside init function
$scope.dsblBtn = true;
Always use the button tag with ng-disabled in angular js otherwise it will not work.
I am trying to show the time on hover of seek bar of a html5 video. ( similar to how youtube does it).
I have tried to use the timeupdate event on the video as below but looks like there is more to it.
<script>
function myFunction(event) {
// The currentTime property
document.getElementById("demo").innerHTML = event.currentTime;
var video = event;
video.addEventListener('progress', function() {
var bufferedEnd = video.buffered.end(video.buffered.length - 1);
var duration = video.duration.toFixed(1);
alert(duration);
if (duration > 0) {
document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
}
});
// display the current and remaining times
video.addEventListener("timeupdate", function () {
// Current time
var vTime = video.currentTime;
var vLength = video.duration.toFixed(1);
document.getElementById("curTime").textContent = vTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
}
</script>
html:
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<div class="buffered">
<span id="buffered-amount"></span>
</div>
<div class="progress">
<span id="progress-amount"></span>
</div>
<p>Playback position: <span id="demo"></span></p>
<p>Current Time: <span id="curTime"></span></p>
<p>Remaining Time: <span id="vRemaining"></span></p>
I did try to understand multiple posts but did not find a solution.
Do I need to use onmouseover event instead? How do I calculate the time of the video frame when the user positions the mouse on the slider?
I would make a custom controls something like this:
Using the width of the controls div and video.duration to calculate the new time.
Hope this helps!
window.onload = function(){
controls.innerText = ''
function getNewTime(e){
return e.clientX / controls.clientWidth * video.duration
}
controls.addEventListener('mousemove', function(e){
controls.innerText = (getNewTime(e).toFixed(2))
})
controls.addEventListener('click', function(e){
video.currentTime = getNewTime(e)
})
video.addEventListener('click', function(){
video.play()
}
)
}
body{
margin:0;
background:black;
}
#wrapper{
display:flex;
flex-direction:column;
}
#video{
flex:1;
height:calc(100vh - 32px);
}
#controls{
height:32px;
background:red;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom Video Control</title>
</head>
<body>
<div id='wrapper'>
<video id='video' src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'></video>
<div id='controls'>loading</div>
</div>
</body>
</html>
edit: to clarify my answer
If you look at the code: e.clientX / controls.clientWidth * video.duration you will see that
e.clientX is the current x position of your mouse on the controls rectangle.
controls.clientWidth is the total width of the controls rectangle.
video.duration is the total time of the video.
so if I would put my mouse on the end of the of the rectanlge. I would get 100% of the video duration. and in the beginning I would get 0%. if I would put my mouse at exactly in the middle I would get exactly the time of the middle of the video.
with video.currentTime I can change the current time of the video so that the frame is exactly the right frame of the time.
Try using controls attribute. You will get similar control bar that is present on YouTube videos.
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
https://developer.mozilla.org/pl/docs/Web/HTML/Element/video
Example in code.pen:(wait for video to load)
http://codepen.io/mikemoney/pen/QdQvXY
Example on SO: (wait for video to load)
<video src="http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4" autoplay poster="https://i.ytimg.com/vi/1iGy1Rp93o4/maxresdefault.jpg" controls width="480">
</video>
Basically I have an angular project that is based on bootstrap 3 for media queries resize.
What I intend to do is allow user to change between desktop mode (laptop full screen width) or mobile mode (media width < 667px).
I have see a lot of theme preview sites have this feature. As it is quite a common feature, I expect that it can be done this way but not sure how it could be implemented exactly.
Note: I am not expecting to change any part of existing CSS.
My opinion on how to implement this.
<html ng-viewport="deviceWidth">
<button ng-click="changeDeviceWidth()">
</html>
// initial
$scope.deviceWidth = getDeviceWidthFunction();
$scope.changeDeviceWidth = function (deviceWidth) {
$scope.deviceWidth = deviceWidth;
}
First: Give id to you viewport meta
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
Second: Create selector buttons
<div id="selecter">
<button onclick="toDesktop()"> Desktop</button>
<button onclick="toTablet()"> Tablet</button>
<button onclick="toMobile()"> Mobile</button>
</div>
Third: Add iframe as content viewer
<iframe id="mycontent" src="http://www.majali.net"></iframe>
Fourth: Add JS functions to set viewport,content width and height
<script>
function toDesktop() {
document.getElementById("viewport").setAttribute("content", "width=1200");
document.getElementById("mycontent").style.width='100%';
document.getElementById("mycontent").style.height='600px';
}
function toMobile() {
document.getElementById("viewport").setAttribute("content", "width=340");
document.getElementById("mycontent").style.width='320px';
document.getElementById("mycontent").style.height='480px';
}
function toTablet() {
document.getElementById("viewport").setAttribute("content", "width=767");
document.getElementById("mycontent").style.width='767px';
document.getElementById("mycontent").style.height='600px';
}
</script>