I am using JSignature and am trying to figure out how to get events to fire when the signature gets focus and when it loses focus.
Binding to the change event works but focus, mousedown etc does not fire.
Would appreciate any guidance if anybody knows how to do this please
$('.jsig').jSignature({format:"image/jpeg"}) // inits the jSignature widget.
$(".jsig").jSignature.bind('mousedown', function(e) {
alert("mousedown");
});
$(".jsig").jSignature.bind('focus', function(e) {
alert("focus");
});
var j=$(".jsig").jSignature;
$(".jsig").bind('change', function(e) {
var d = $(e.target).jSignature("getData", "native");
document.getElementById('st').value=d.length+'.'+d[0].x.length;
});
If it helps anyone else, the answer appears to be add an onmouseenter to the div JSignature attaches to
<div id="jsig" class="jsig" onmouseenter="dosomething();"></div>
<script>
function dosomething(){
alert("Here");
}
Can then use the bind change to see if there is a signature or onmouseleave.
Related
I have this script:
<aui:script use="aui-node,aui-io-request,aui-base,event">
AUI().use('event', 'aui-node', 'aui-base', function (A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost').on('keyup', function (event) {
alert("Hi you have performed On change Event and Thank You");
});
})
</aui:script>
Why doesn't the alert ever appear?
Your code has multiple issues:
You do not need to specify an AUI().use(//... if you are using <aui:script> with the use attribute.
You only need to specify the aui-node module as an argument to the use attribute.
You most likely do not want to set inputObject equal to the return value of the on method. Instead it seems that you would want to do var inputObject = A.one('#id');.
A change event is not the same as a keyup event, so either your .on('change', function(event) { //... or your alert message which claims that it is an onchange event is incorrect.
You may have an issue with your A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost') failing to find the element (check the browser logs to find out if this is true). If it is, your element may have a partially generated prefix which can be obtained using <portlet:namespace />.
If you put all that together:
<aui:script use="aui-node">
// possibly change the A.one() argument to '#<portlet:namespace />_Tend_ApplicationMain_WAR_ETenderportlet_vrednost'.
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
</aui:script>
Here's a runnable example:
YUI().use('aui-node', function(A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<input id="_Tend_ApplicationMain_WAR_ETenderportlet_vrednost" />
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
When FloatingPane change size, I would like to launch a function.
I think there is something with resizeHandle but not know how to do.
I use Dojo 1.8+.
Thanks
Indeed, you have to define an event handler for the resize handler of your floating pane.
For example:
require(["dojo/on"], function() {
var floatingPaneObj = ...;
...
floatingPaneObj.startup();
on(floatingPaneObj._resizeHandle, "resize", function(e) {
// Your event handler
});
});
I also made a working JSFiddle to demonstrate it. http://jsfiddle.net/8azsz/2/
I'm using a dijit DropDownButton with an application I'm developing. As you know, if you click on the button once, a menu appears. Click again and it disappears. I can't seem to find this in the API documentation but is there a property I can read to tell me whether or not my DropDownButton is currently open or closed?
I'm trying to use a dojo.connect listener on the DropDownButton's OnClick event in order to perform another task, but only if the DropDownButton is clicked "closed."
THANK YOU!
Steve
I had a similar problem. I couldn't find such a property either, so I ended up adding a custom property dropDownIsOpen and overriding openDropDown() and closeDropDown() to update its value, like this:
myButton.dropDownIsOpen = false;
myButton.openDropDown = function () {
this.dropDownIsOpen = true;
this.inherited("openDropDown", arguments);
};
myButton.closeDropDown = function () {
this.dropDownIsOpen = false;
this.inherited("closeDropDown", arguments);
};
You may track it through its CSS classes. When the DropDown is open, the underlying DOM node that gets the focus (property focusNode) receives an additional class, dijitHasDropDownOpen. So, for your situation:
// assuming "d" is a dijit.DropDownButton
dojo.connect(d, 'onClick', function() {
if (dojo.hasClass(d.focusNode, 'dijitHasDropDownOpen') === false) {
performAnotherTask(); // this fires only if the menu is closed.
}
});
This example is for dojo 1.6.2, since you didn't specify your version. It can, of course, be converted easily for other versions.
Dear All,
I've created a new Dojo button programatically. I'm doing that in one of my custom dojo class. While creating the button, I've defined an onClick method which should be called when the button is clicked. This method is part of the class. I'm not able to invoke that method, since the scope of "this" is different when the button is clicked. Can some one please help me to do fix this?
dojo.declare("CustomClass",null,{
createCustomButton:function(){
var button = new dijit.form.Button({onClick:function(){
removetrack();
testDataGrid.filter({status:"COMPLETED"});
}},"testButton1");
},
removetrack:function(){
//some logic
}
});
var customObj=new CustomClass();
customObj.createCustomButton();
I need removetrack() method to be called when I click on the Button created.
Use dojo.hitch();
dojo.declare("CustomClass",null,{
createCustomButton:function(){
var button = new dijit.form.Button({
onClick:dojo.hitch(this, function(){
this.removetrack();
testDataGrid.filter({status:"COMPLETED"});
})
},"testButton1");
},
removetrack:function(){
//some logic
}
});
var customObj=new CustomClass();
customObj.createCustomButton();
I cannot manage to do better way, in case you need urgent fix
var button = new dijit.form.Button({
label: "Custom!",
onClick:function(){
CustomClass().removetrack();
}},"result");
Hope someone can give you better option.