I am using Material Design lite in my mobile app.
With the buttons, the hover effect is added when it is touched, but it doesn't go away until another press is recorded.
With buttons as links this isn't too bad, but for a button that does an action, it doesn't look that good.
Is there a way to remove the hover effect after a period of time (EG 500ms)?
I have looked at removing the effect, but the lack of feedback doesn't help. Perhaps triggering a click on an unused part of the screen might work.
Edit: The answer below was a solution to a similar problem on the desktop, but it does not seem to be a fix for mobile platforms.
Also, development of Google's Material Design Lite is now in limited support (as of Dec. 2016), in favour of their newer Material Components for the Web, which still seems to be in early development. Their current button demo still has the same behaviour described in the post.
Original: On the desktop, the hover effect should remove itself automatically if you are using the mdl-js-button class. Here's a quick example:
<button class="mdl-button mdl-js-button">
Button with JS
</button>
<button class="mdl-button">
Button without JS
</button>
<!-- Remember to include the MDL JavaScript code -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
JSFiddle
Related
I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.
Currently I'm developing a phonegap application using onsen ui and angularJS. I'm trying to pop a page using
<ons-back-button onclick="myNavigator.popPage()">Back</ons-back-button>
I've used same code for "Back" button on every page. But the problem is when I push multiple pages using
<ons-button modifier="large" onclick="myNavigator.pushPage('in_menu.html', { animation : 'slide' } )" style="margin: 220px auto;">
Next
</ons-button>
and when I use "Back" button, it Pops two pages instead of only one page. Some please help me to solve this issue.
I seem to be unable to reproduce the issue only with the information provided unfortunately. Here's a working Demo.
Maybe you could provide a codepen, so that we can see it. Sorry if I'm not being of much use.
On a side-note - if you just have a backbutton in your page it should be able to have the same functionality by default. Maybe somehow in your case the default wasn't prevented but yours is also executed.
Another very important note here is the version of onsen since there were some changes regarding this behaviour.
If you're using the a recent version you could try to use onClick property instead (however you need to do it in javascript, not in the html).
I can update my answer if you provide some more info :)
I'm using angular-materialize for a demo project and so far it's been pretty easy to use. However, when doing a browser compatibility test pass I found that the datepicker component doesn't work when using IE and Edge browsers. On IE it scrolls the page down when the overlay appears and it doesn't even work on Edge browser. You can see the bugs on the angular-materialize demo page Open this link in IE or Edge.
Please refrain from answering this with a question like "Why not use Angular-Material". Although the UI is similar, there are some parts of materializecss that I prefer over Google's Angular-Material. So far, this is the only issue I've found.
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.
I have modified my app to use the tabbar control and it's working as expected. However, the back buttons that worked before modification no longer work. Any ideas on what the issue might be?