I am using CSS3 resize: vertical; to allow the user to resize a Div, and would like to be notified when this happens (so that I can adjust the size of other elements with Dart code if necessary).
How can I attach an event listener for the user resize event?
( DivElement.on.resize does not exist.)
When you want to observe event which is not listed under the on getter, you can use $dom_addEventListener to set event listener.
Thus, if you would like to use something like the unexisting divElement.on.resize, you can use :
divElement.$dom_addEventListener("resize", (e) {
// event occurs
});
That said, unlike click event, the resize event doesn't seem to be fired (even in javascript).
Related
Hi i am using a UIButton and i want to change its image property on touchstart and touchend events.
Here is something i am following
$.button.addEventListener('touchstart',function(e){
e.source.image="image-pressed.png";
});
$.button.addEventListener('touchend',function(e){
e.source.image="image-normal.png";
});
But i am wondering its not going to happen images are not changing on these events though the event is properly being fired on both touch events.
Kindly guide me how i can place my normal and pressed image for a button.
Thanks.
Try this:
$.button.addEventListener('touchstart',function(e){
$.button.image = "image-pressed.png";
});
$.button.addEventListener('touchend',function(e){
$.button.image = "image-normal.png";
});
It may also happen that your event is bubbling up to any of its parent or parent of parent (if parent has such events attached to it) which means that e.source will not be the button itself. So it's always safe to use $.Button_ID to access property like image or title.
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I was trying to get if Window is focused or not so i gone through available method of Window class ,did not get any getFocus(); or isFocus(); method. Is there any reason to ZK drop this method ? There is only focus() method with void type.
I have a complex problem ,In my application single page have two parts left hand side contain a.zul and right part b.zul and have tabs. I have to fire CTRL key event something like this if focus on a.zul then fire event on A.Java class and When focus on b.zul then fire event in B.Java class. But as i am not able to get focus its hard to determine which window or zul is focused now? ANy one know any other solution of this problem?
Lots of elements (dom level elements) cannot receive focus, e.g., div, span, ul/li, table, tr, td, ..., etc
Also lots of widgets (ZK widgets) cannot receive (and do not handle) focus, e.g., window, div, label, grid, ..., etc
This is why there is no getFocus/isFocus methods by default since they are not that 'common' for a component, lots of components cannot receive focus, some of components work with 'default' focus (e.g., a, textbox) and some of components work with 'hand made' focus (e.g., listbox contains a dom element 'a' and play around it for focus).
You can try to listen to onFocus event or onClick event at server side to know which component is focused/clicked(selected), or override doFocus_(evt) method of widget and log the focused widget at client side for further processing.
But why do you need to fire onCtrlKey event manually? It will be fired from client to server automatically by default.
I am trying to prevent the default cursor style for dragging in Dart. In the onDragStart method, I set the cursor style to 'move', and then revert back to the default in onDragEnd:
onDragStart(e) {
prevCursor = placeholder.style.cursor;
placeholder.style.cursor = 'move';
}
onDragEnd(e) {
placeholder.style.cursor = prevCursor;
}
When dragging, the cursor still defaults to the 'not-allowed' style. I have tried many methods to prevent this, such as preventing the default to onSelectStart in the onDragStart method, which was recommended as a fix for chromium in javascript, but does not work in Dart:
document.onSelectStart.listen( (e) {
e.preventDefault();
return false;
});
I have also tried setting the default in CSS, which is not how I would like to accomplish this, but it still doesn't work:
a:drag {
cursor:move;
}
Any suggestions?
Hmm...just a guess but maybe try to see if maybe you need to also handle onDragEnter?
The drop target sets the cursor icon to "not allowed", if its handlers canceled drag enter event etc.
Writing the handlers for the drop-zone is the easiest solution.
To circumvent the issue,a mouse down event, mouse move event and so on may be captured and used to move the element like I did here:Moving elements by dragging in Dart
This guy explains the related issue in more detail: http://mereskin.github.io/dnd/
Sort of irrelevant, but with some browsers only use the default cursor icon is available while dragging an element and there is no way to change that default.
I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
No luck with return false. Please see the demo.
I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.
Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.
The pseudocode would look something like this:
call .accordion('destory') on the current accordion
create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
insert the new element to the existing accordion
bind a click event to the remove button in the new element to stop event propagation
initiate the accordion, i.e. .accordion({..})
SO posts on event capturing in jQuery:
event capturing with jQuery
Event Capturing vs Event Bubbling
Just use the given functions by the plugin:
$('#accordion').accordion({active:8, disabled:true});
jQuery('.remove').click(function(){
$('#accordion').accordion('disable');
})
I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion
Hope this is what you were looking for :-)