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/
Related
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.
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..)
Let's say we have a simple Backbone View, like this:
class MyView extends Backbone.View
events:
'click .save': 'onSave'
onSave: (event) ->
event.preventDefault()
# do something interesting
I want to test that event.preventDefault() gets called when I click on my element with the .save class.
I could test the implementation of my callback function, pretty much like this (Mocha + Sinon.js):
it 'prevents default submission', ->
myView.onSave()
myView.args[0][0].preventDefault.called.should.be.true
I don't think it's working but this is only to get the idea; writing the proper code, this works. My problem here is that this way I'm testing the implementation and not the functionality.
So, my question really is: how can I verify , supposing to trigger a click event on my .save element?
it 'prevents default submission', ->
myView.$('.save').click()
# assertion here ??
Thanks as always :)
Try adding a listener on the view's $el, then triggering click on .save, then verify the event hasn't bubbled up to the view's element.
var view = new MyView();
var called = false;
function callback() { called = true; }
view.render();
// Attach a listener on the view's element
view.$el.on('click', callback);
// Test
view.$('.save').trigger('click');
// Verify
expect(called).toBeFalsy();
So you want to test that preventDefault is called when a click event is generated, correct?
Couldn't you do something like (in JavaScript. I'll leave the CoffeeScript as an exercise ;)):
var preventDefaultSpy;
before(function() {
preventDefaultSpy = sinon.spy(Event.prototype, 'preventDefault');
});
after(function() {
preventDefaultSpy.restore();
});
it('should call "preventDefault"', function() {
myView.$('.save').click();
expect(preventDefaultSpy.callCount).to.equal(1);
});
You might want to call preventDefaultSpy.reset() just before creating the click event so the call count is not affected by other things going on.
I haven't tested it, but I believe it would work.
edit: in other words, since my answer is not that different from a part of your question: I think your first approach is ok. By spying on Event.prototype you don't call myView so it's acting more as a black box, which might alleviate some of your concerns.
I am now using dojo 1.8.3 and now have a BorderContainer with 2 ContentPane on my page. I would like to listen the resize event, the code like this
dojo.ready(function(){
dojo.connect(dijit.byId("Container"), "resize", function(changeSize, resultSize){
// do my stuff here...
});
});
However, is there anyway to let me know if the resize (splitting) is end? Please advice, thanks!
First of all, I'd recommend using "modern dojo", since you're using dojo 1.8 anyway. dojo/connect is deprecated and the way to "monitor" function calls is now by using dojo/aspect.
So you'd end up with something like:
require(["dojo/ready", "dojo/aspect", "dijit/registry"], function(ready, aspect, registry) {
ready(function() {
aspect.after(registry.byId("Container"), "resize", function() {
// do something after resize has been called...
});
});
});
If you want to have access to the arguments that have been passed to the resize function, call aspect.after with true as the last argument like:
aspect.after(registry.byId("Container"), "resize", function(changeSize, resultSize) {
// do something with changeSize and resultSize after resize has been called...
}, true);
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.