I am using jQuery-ui autocomplete, and I am tyring to handle the event that is fired each time the user moves up and down through the list of results by using the up and down keyboard arrow keys (not when using mouse).
Is that possible? if so, how?
I have solved it by handle focus event for this case and then I ignore default behaviour by returing false (sames as event.preventdefault()).
Related
I have tried a couple of ways:
Set value as regular input, doesn't work for me because the value is bound to a variable and it overrides.
Trigger the arrow up event like:
find('#my_spinner').send_keys :arrow_up
Tried to trigger the click event for 'ui-icon-triangle-1-n', no success.
Any hints?
I was able to simulate the click on spin buttons like this:
find('.ui-spinner-up').click
find('.ui-spinner-down').click
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
By default, the tooltip appears as soon as the cursor enters the chart. I would like to control when it first appears in one of two ways:
Wait for user to hover over (around) a data point on the chart.
This way the user can look at the entire chart without the
distraction of the tooltip.
mousedown - is there a way to disable the default mousedown function
and use it for displaying the tooltip instead? And because the
tooltip and crosshair seem to be joined, perhaps the same mousedown
event could fire the crosshair to appear?
number 2 would be best; any suggestions/solutions would be appreciated!
Number 2 is possible to achieve by:
disable default Highcharts tooltip
create point.click event handler
in above handler, create your own tooltip (it's simple div with some CSS)
make proper position for tooltip (accessed via this.point.plotX and this.point.plotY
So I have a normal jQueryUI Sortable List IE: http://jqueryui.com/sortable/#default
However I would like the drag(or sort) event only to be triggered when the user clicks on a specific object inside my list item. For the sake of the example lets say the arrows in the link I provide would trigger the drag event but clicking on the text wouldn't.
Suggestions?
You can use the handle option
http://api.jqueryui.com/sortable/#option-handle
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 :-)