I have a React component with an onClick handler.
The component is made of several subcomponents, including one that renders a Highcharts chart.
If I click anywhere on my component OTHER than on the Hichcharts view, the onClick is triggered as expected. If I click on the chart, the onClick is not triggered.
How can I fix this?
The cleanest solution for me was to render a transparent div overtop of the highchart using absolute positioning.
The transparent div gets the events first and is handled purely by React. This solves all problems.
Related
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
I'm using jQuery UI. When I drag element in the iframe and I move mouse out of the iframe, the element is still in the draggable state. So when I move mouse back to the iframe, I can still drag it, like I would had left mouse button down.
How to avoid it? So that if I start to drag element, it stops when I go out of the iframe in the last draggable position?
You need to trigger a mouseup() when your pointer leaves the iframe so that the element being dragged is no released.
$('body').one("mouseleave", function(){
$('body').mouseup();
});
There were more questions asked pertaining to my solution, so please refer my question posted here for more details
I have two 100% overlapping panels with different contents on a form.
The first (static display of information) should be visible by default, but the other (user interaction) should replace it if the user moves the mouse near the two - and if the mouse moves away, it should switch back.
Something like this:
if (*the mouse is near*) then
begin
Panel1.Hide;
Panel2.Show;
end
else
begin
Panel2.Hide;
Panel1.Show;
end;
My problem is: where to capture mouse movement?
Each component has its own OnMouseMove handler - of course I could forward each of them to the forms handler, but I'd rather have something a bit more elegant (and easier to maintain).
The perfect solution would be something like Form1.MousePreview := true;.
Another solution would be assigning a generic handler that translates coordinates and calls the forms handler; The assigning could be done in FormCreate.
But that's not as easy as it seems, because one TImage already has its own mouse event handlers.
I have tried OnMouseEnter and OnMouseLeave of the two panels but it didn't work; #1 disappeared, but #2 did not appear. I guess that's because if the mouse leaves Panel2, it should disappear - but it also leaves it if it enters a button on it.
That's why I'd like to use a coordinate based approach to make the check more reliable.
Maybe the two panel method is completely wrong?
Update: Yes, it is, as Remy said.
I am now using a TJVPageList because a TPageControl has visual tabs.
The OnMouseEnter handler of the PageList sets one page, the OnMouseLeave sets the other; But once the mouse moves over the PageList, both pages start flickering.
I have tried adding the event handlers to each page, too, but that made no difference.
Should I check all OnMouseEnter / Leave events to filter out the PageList, the two pages and all components sitting on the pages?
Another update: I am using a TPageControl now, but the behaviour is similar.
It doesn't flicker, but if I move the mouse ontop the TPageControl, no TTabSheet is displayed at all.
Only if I press down the left mousebutton, the UI sheet is displayed. The other sheet is displayed normally if I move away the mouse. (The TJVPageList displays the UI page if I press the left mousebutton, too.)
I have used the mouse event handlers (enter/leave) of the TPageControl and both TTabSheets.
Update 3:
Done it.
The static Panel / TabSheet / JvStandardPage (#1) must not trigger the OnMouseLeave handler.
What you describe might be better served using a single TPageControl instead of two TPanel controls. Use the TPageControl's own OnMouseEnter/Leave events (or intercept the CM_MOUSEENTER/LEAVE messages) to switch the TPageControl.ActivePage as needed.
I am using jQuery Mobile with jQuery Mobile Router, to dynamically change content of listviews.
In the change handler I'm dynamically adding content to an inset listview, then calling listview('refresh') to re-apply all the styling to the new elements. It mostly works, however whilst it applies the ui-corner-all to the UL the ui-corner-top and ui-corner-bottom classes are not applied to the correct LIs so they don't get rounded corners applied.
I have prepared a live example that demonstrates the issue.
The first page is static, the second page is generated in the rounter handler which is trigger by the jqm beforepageshow event
Thanks for your help.
You just needed to force the refresh:
http://jsfiddle.net/j5q75/4/
JS
listview.listview('refresh',true);
I just want to use changePage but to have a modal window instead of fullscreen page.
For the moment, I create my own modal box, but jQM doesn't style it probably because it's not a data-role=page.
Is there a solution without adding a plugin ?
Thanks.
Any reason to insist on changePage instead of just using a link? There is a similar SO question out there (sorry no link). You can accomplish this by using the changePage method and setting the role to dialog. If you want the calling page to still be visible in the background then you will need to do three things when the pageLoad event fires. 1) show the previous page (calling page), which automatically gets hidden on the changePage event. 2) set opacity or something on all other divs to give it a modal effect. 3) set dialog overlay to be transparent so you can see the previous pages.
The easiest way to accomplish the third is to use the overlay theme aspect (as jqm 1.0) and set it to be transparent in your style sheet.
Maybe you want to try to change the target page data-role as dialog and invoke method changePage with options {role: 'dialog'}.
Check it out on jsfiddle.