Hi ,
I am facing a problem with the button in my application. Consider I am applying the following css to my button:
SyntaxEditor Code Snippet
.btn-primary:active, .btn-primary:hover, .btn-primary:focus { background-color: #931f5b; border: none; color: #fff; } .btn-primary{ color: #931f5b; background-color: #fff; border-style: solid; border-width: 1px; border-color: #931f5b; }
But when I longpress the button the css of
.btn-primary:active,.btn-primary:hover,.btn-primary:focus "stays"...
But after longpress I want the button to take its ".btn-primary" css.
How can I achieve it?
With Thanks,
A.Ebina Sony
Hi,
On the event that you trigger with the long press you can try this javascript to have focused item to lose the focus.
$(':focus').blur()
It will activate and focus the button when doing a long press thus the css selector :active and :focus will still be applied after the mouse up. You might want to consider just having the focus in there. Something like this - https://jsfiddle.net/proksis/7hgafzok/1/. If you want it to be more precise that the changes will happen upon mouse up, you may explore on using toggleClass inside 'mouseup' event.
John
Hi Fabien BURLOT,
I would like to inform you that there is no event or trigger for longpress of the button. Anyway I tried the script in the focus event but it is not working. I am working in an mobile application, when I tested by longpressing the button I identified this issue.
With Regards,
A Ebina Sony
Hi John Alvin Salamat,
I hope the code you have shared works well for web application. I am trying to achieve the above mentioned scenario in a mobile application. Can you help me with this?
Ebina Sony wrote:
The script I shared requires jQuery which is not by default included in mobile. I would avoid in adding it either if it can be supported by native javascript. You can convert the script by using event listener
jQuery
$('#button').on('mousedown', function(){ ... });
to native
document.getElementById('button').addEventListener('mousedown', function(){ ... });
function(){ ... }
or try Fabien's answer
Hi Ebina,
You have to "create" your long press event. I have to do it in the application I'm developing.
You have to use OnTouchStart and OnTouchEnd events of your widget and start a timeout.
InThe OnTouchStart create a javascript with
clearTimeout($parameters.TimeOutIn); $parameters.TimeOut = setTimeout(function(){ $actions.OutSystemsActions(); },1200);
First define a variable of type object that will contain your timeout and you'll have to pass to the javascript(TimeOutIn in my example) And pass it as output parameter to be reused in OnTouchEnd.In my exemple action OutSystemsAction will be started after 1200 milliseconds. (you have to create your own action)
In the OnTouchEnd create another javascript that will cancel the timeout. Parameter TimeOutIn is the same object than the TimeOutIn in OnTouchStart
clearTimeout($parameters.TimeOutIn);
It means that if you don't press the button long enougfburh, the action will not be triggered.
You can add the lost of focus in the javascript of OnTouchEnd acton.
Hope it'll help you.