I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.
Related
I am developing web application in Angular 2. On button click I am trying to open popup. I am able to do it in JavaScript. I am trying now in Angular 2.
Below is my HTML code for popup inside main page.
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
In main page I have one text box. When I open popup inside popup text box is also displaying as below.
Filter records text box is in html page and not in popup. Can someone help me to fix this issue? Thank you.
It sounds like you've applied a high z-index to the filter records textbox and button; z-index is a styling attribute that allows you to specify which things appear in front of others, by lowering the z-index on your "Filter records" textbox/button they should sit behind the popup.
Read more on z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
<div>
<p class="bounceIn">
Hello world
</p>
</div>
https://jsfiddle.net/2fr1tcv6/
After page load, these elements are visible, so the bounceIn animation runs.
But on the page users can click a button and hide the div, and re-show it. When the div shows again, I don't want the animation to run. Is there a way to achieve with CSS properties?
You can remove the bounceIn class from the P tag. Something like this:
$("button").click(
function(){
$("div").toggle();
$("p").removeClass("bounceIn");
});
I am trying to show only the active tab in md-tabs on mobile view. I want the tab to be centered, and when I user swipes left or right, the tab title changes with the next or previous (somehow should be 100% width). Is this possible?
I have my tabs set up like this:
<md-toolbar>
<md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
<md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding>
<ng-switch on="selectedDay" class="tabpanel-container">
<div>
<p>{{selectedDayInfo.day}}</p>
</div>
</ng-switch>
</md-content>
Please see the following Plunkr: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
I would play around with 'hide' attributes - https://material.angularjs.org/latest/layout/options.
Also it would be fairly easy (without looking at your code) to just create logic that would detect screen size and from there just to create different DOM elements based on that (ng-show etc.).
I am using angular and I need to add an animation that will increase the size of the image.
<div class="card">
<div class="item images-parent">
<img src="img/carryout-icon.jpg" class="left-image"></img>
<img src="img/or.jpg" class="center-image"></img>
<img src="img/delivery-icon.jpg" class="right-image"></img>
</div>
</div>
demo:
http://play.ionic.io/app/933b5926b6da
I want to add same animation/transition to first and third image when the user clicks on it and should be removed when user clicks on the other one i.e if I click on first image, it increases in size, then if I click on the other one, first one goes back to normal and second one has that animation.
Also, I have tried doing it but I am just not able to get ngAnimate, I am not a CSS person either. Also, Any resources to help someone like me would be appreciated.
I see events such as ngView , ng if e.t.c But I do not really want these animations on such events. Only when user clicks on the image. Am I even supposed to use ngAnimate here?
I do not know which particular image you intend to increase it's size on click, but here's one way to go about it.
You can create a css class that increases the image, and you toggle on or off with NgClass, A tutorial Scotch.io
That is to make sure it changes class, but if you want to toggle on/off the class when you click CodePen snippet below
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
I have a fixed button to roll the page to the beginning. When you put the mouse hover, it animates (and animate back when mouse is out). But if you hit the icon, the animation doesn't roll back. The arrow should translate 360º back.
The structure is
<div id='back-to-top'>
</div>
The workin code with css is http://jsfiddle.net/7vrw4abx/
You are associating the style with :focus so on click of the item it will stay the same, until you click away. Change the following
.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before {
to this
.hvr-icon-spin:hover:before, .hvr-icon-spin:active:before {
(Demo)