I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
Related
I have a button that the user can press and hold to record their voice. The problem is that on mobile when I press and hold the button, the button text gets selected. If I disable text selection, apparently the ontouchstart event is not triggered. How to achieve both?
You can simple use the user-select: none css property on that elemet
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.
Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?
It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.
To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".
Then, I created an callback on a mouse down event that is outside of the dropdown
$('html').mousedown(function(e) {
if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
$scope.variable.isOpen = false;
$scope.$digest()
}
});
I initialized $scope.variable inside the on-toggle callback.
Currently, i have a few number of fields that shows up and hides on a button click.
I want to transfer some of those fields to a pop-Up (preferably using angular material) . Can you help me with some links?
Also this is in Angular !
Set id on parent tag and on button click hide show functionality.
Otherwise use [Toggle]: https://www.w3schools.com/jquery/event_toggle.asp functunality.
I've started using flexicious data grid for the last couple of weeks and I have come up with a need to put a clickable button next to the value in my column. I add the button using javascript but the problem is that when I want to click on the button my item-click fires a row selection. I have to use both the row selection for other functionality and button click for popup functionality.
Is there some built in functionality for adding buttons in flexicious? I can't seem to find any in their documentation. Or if there isn't how can I move the button on top of the row so that clicking the button doesn't fire row click functionality?
I figured this out by keeping it simple and ignoring flexicious documentation.
I added
item-click="onGridItemSelectedOfferCombo"
and then in this function I did a small hover over button test
vm.onGridItemSelectedOfferCombo = function (evt){
var isHovered = $('#clickableButton').is(":hover");
if (isHovered == true) {
//do my thing
}
}
Pressing button will disappear, and the next button appears in HTML-
I want to create 5 buttons When the first button in a specific location. Only after the user clicks on the first button, then the user will see the second button which is in a different location.The same applies to all the buttons.
I RUN IT HERE:
http://bit.ly/1lkoLSK
another problem that the code run only on firefox-why ?
I don't know if i understand your problem correctly, but show first button, than on click just hide current active element and show next one. JSFiddle
$('button').click(function(){
$(this).hide();
$(this).next.show();
});