I'm trying to enable Mouse Wheel Zoom only when the map is focused. I've made the container div focusable, added relevant click handlers to options for focusing manually (highcharts prevents the default action), and added onfocus and onblur handlers to container div. Inside these handlers I try to update map options to enable mouse wheel zoom.
The problem is, when I update anything inside 'mapNavigation' section, it does not work. I've tried manually update and then check options of a chart, and see this weird behavior.
I guess HighCharts apply a generic option filtering on update function and somehow missed supporting MapNavigation of HighMaps. Or am I doing something wrong, here is my update call:
this.chart.update({
'mapNavigation': {
'enableMouseWheelZoom': true
}
});
Note: this variable is correct, chart is really the chat I'm dealing with. Updating something else (e.g. credits) works.
Related
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.
I have a kind of "widget" - a data table with some rich functionality like sorting, row selection and else.
In some cases (widget placement/nesting in DOM) clicks on it's rows are not triggered in iOS 7 Safari.
Widget is using jQuery 1.6.4
I can't publish a whole widget code (and you really wan't this to happen ;)), but I can narrow down a reproduction scenario to the following case:
Simple html table with some rows, two cols in each
First column contains a "checkbox" - simple div which is normally hidden and becomes visible, then parent row getting hovered. Visibility is triggered with CSS only
Every row has a click event handler. No mater what it does. In my example it will trigger an alert()
Table's parent is a block element with a fixed height and overflow-y set to auto
Table is bigger than it's parent, so, some table content is hidden and can be seen with scrolling
Here is a jsFiddle: http://jsfiddle.net/822eG/4/
On any desktop browser items are successfully hovered, click is triggered. On iOS7 hover is working but click is NOT triggered.
NOTE: On iOS you must tap twice to trigger click. First click will trigger hover and you'll see a "checkbox", then second tap must trigger a click, but it doesn't...
Any of those conditions is REQUIRED to reproduce an issue. Remove a single one and it starts working...
If you remove a "checkbox" appearance - click will work (http://jsfiddle.net/822eG/5/).
If you remove a height fix - it will work (http://jsfiddle.net/822eG/6/).
If you remove a overflow scrolling - it will work (http://jsfiddle.net/822eG/8/).
Any workaround is needed but functionality should be kept untouched. So, I can't remove "checkbox", size fix, hovering, clicking or overflow scrolling. Also, changing HTML markup is hardly to happen.
NOTE I've got a solution - see my answer below. But I still need a better workaround to keep using CSS as mush as possible.
ADD: Filed a bug to Apple #16072132
Try this:
.wrapper {
-webkit-overflow-scrolling: touch;
}
To get iOS to ignore hover states, try this:
.wrapper
{cursor: pointer;}
You can use this on any element to get it to function as expected.
Suddenly, I've got a solution... Using JavaScript I can remove :hover selector but still keep functionality.
If I will trigger checkbox visibility not by CSS :hover but by class and set it via javascript, it will work.
http://jsfiddle.net/822eG/10/
My current working solution requires no any changes in a whole code base and works fine in our conditions
With MutationObserver, monitor node insertion into head
If new node is inserted, and this is a link, check document.styleSheets
For each sheet check it's rules
If rule selector (access by document.styleSheets[n].rules[i].selectorText) contains :hover check styles for this selector
If styles contains display different from none or visibility different from visible - this is a "show by hover" style
For each such style change it's selector - replace :hover by .hover and declare a body delegate for mouseenter and mouseleave events which will toggle .hover class on triggered element
Full source code here: https://gist.github.com/Olegas/9143277
..try using this:
$('.row').on('touchstart click', function(){
alert('clicked');
});
iOS5+ shows next/prev buttons above the keyboard:
Because they change the focused element on the page, they can cause issues with my single page app's layout. The 'tab' key on normal keyboards can cause similar issues, but I can slightly change its functionality to only cycle around the inputs I want with a custom keydown event.
Is there any way to do something similar for those buttons?
I'm not really sure what your problem is.
My guess is that when you change focus with "Previous" and "next" button, something goes wrong with your design. And I'm also guessing that you click these when you are in an input (although it's pretty obvious).
When you change from an input to another (With tab key, using "previous/next"-buttons or by mouse), a blur event is triggered.
Now, you don't say what library, if any, you are using. But the fix is similar all around I would say.
if you use jQuery, do something similar to this:
//Selects all input elements, and binds a anonymous function to them. This function
//is run when the blur event is triggered, meaning when we change focus to something else
$("input").on("blur", function () { //Or live, depending on jQuery version
//Your code here, that I assume you already have
});
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 :-)