I created some shapes in Raphael Js and tried to bind the click event to those shapes.But,the click is getting detected only at the border/path line of that shape.below is a section of code
square = paper.rect(200, 200, 50, 50);
// square.click(function() {
// console.log('clicked');
// })
$(square.node).click(function (evt) {
console.log('clicked');
});
Am not able to discern the cause.Please help
If you want to be able to click on the 'space' in an element, you need to give it a fill.
el.attr({ fill: 'red', opacity: 0.1 });
Note, if you want the background to show through still even with a fill, you could set it with opacity 0.0001 or similar and you would be able to click it still.
You'll need a more complete sample that shows the rest of the HTML on the page: when this happens it is typically an overlap issue. There is a DOM element that is sharing space with the Raphael canvas and might be intercepting the click events.
Related
I'm updating ApexCharts using updateSeries while the chart is hidden using display: none. When the series is being updated I think it is checking the width of the element that it is wrapped in. When hidden, the width is considered 0 and therefore the width of the chart is set to 0. I want to force redraw the chart when it is visible but I found nothing in the docs.
PS: The chart restores to its original size when I resize the window.
I don't know weather it will be help you or not I have same issue using with apex chart some lables and title was missing but when you resize the window it will automatically redraw the chart because apexchart have this property by default
chart: {
redrawOnWindowResize: true
}
I have try this this put chart render method inside timeout function and it works for me
setTimeout(() => {
chart.render();
},2000)
In my case, it seems like chart rending before getting style of parent component
Try this.
window.dispatchEvent(new Event('resize'));
I have a chart.js line chart displaying properly. When you hover over the y-axis gridlines, the tooltips display as they should.
I'm trying to convert this to function on a touchscreen, so there is no hover. Is there a way to add a simple parameter to make the tooltip show on both hover and onclick?
Note, I know I could add a custom tooltip and add all of that functionality - I'm trying to see if there's just a parameter I can add as I don't need a custom tooltip.
For Chart.js v2, you can specify those events at the root level of chart options.
options: {
events: ['click']
}
Just add "click" to your tooltipEvents list when specifying the options for the chart
...
tooltipEvents: ["mousemove", "touchstart", "touchmove", "click"],
});
In the fiddle below, I've removed all other events from the list except for click to give you an idea of how it will be like on a mobile
Fiddle - http://jsfiddle.net/8uobybv3/
For ChartJS version 2.8.0, you will need to add both the click and mouseout events to make the tooltip behave the desired way.
The click event would make the tooltip to appear when point is clicked and the mouseout event would hide the tooltip when the mouse pointer is moved outside of the chart canvas area which is the desired behavior.
Note: Without adding the mouseout event the tooltip would not hide even when the mouse is moved or clicked outside the chart canvas area.
Code:
options: {
events: ["click", "mouseout"],
....
...
I have created a Raphael rect like below:
var rect1 = paper.rect(100,100,100,100)
Now, I want that as I click on the rect a cursor appears and user is allowed to type/key in some text
I am very very new to JS and Raphael.
That's not a natural use of Raphael. Think of it primarily as a drawing library. If you look through the SVG specifications or any of the demos on the RaphaelJS page, you'll get the idea.
But Raphael integrates naturally with native Javascript or jQuery. I would place a borderless textarea on top of your rectangle and activate (and focus) it when the user clicks on the space, like so:
var paper = Raphael("canvas", 300, 300),
rect1 = paper.rect(100,100,100,100).attr({fill: "#FFF"});
rect1.click(function(e) {
$('#text').show();
$('#text').focus();
});
http://jsfiddle.net/NtKKZ/
(Note that you need to fill the rectangle with white in order for the click event to fire.)
I would like to know the structure (properties and methods) of a VML mouse event object.
I'm using Raphael, and I want to know the mouse coordinates when an element is hovered. On Firefox and Chrome, event.pageX and event.pageY are working, but not in IE8.
var paper = Raphael(document.getElementById('map', 300, 300));
paper.circle(50, 50, 40).attr({fill: 'black'}).mouseover(function(event){
alert(event.pageX);
});
Here is the JSFiddle.
In fact, it is not specific to VML : all mouse events have the same structure in IE.
I used clientX and clientY, with a rectification due to the fact that clientX is the offset relative to the viewport, whereas pageX is relative to the page.
I am using an animation control in my MFC dialog box to display an animation. I want to change the background color of this control to match the background color of my dialog box, which is white. I have tried using the OnCtlColor() method, but apparently the animation control does not invoke OnCtlColor().
Any help on how I can change animation control's background to white? Thanks
I am not sure if this would help or not but surely give this a try.
you have the option of displaying the original background color of the video or seeing through. When creating a video, its author can do it with transparency to allow seeing the color of the host. In this case, to display the color of the host while the video is playing, set the Transparent property to True. If you are creating the control programmatically, add the ACS_TRANSPARENT style:
BOOL CControlsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
RECT Recto = { 5, 5, 360, 360 };
Player->Create(WS_CHILD | WS_VISIBLE |
ACS_TRANSPARENT | ACS_AUTOPLAY,
Recto, this, 0x1884);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
...
For more info, kindly visit the below link and hopefully you should get some idea from this.
Link: http://www.functionx.com/visualc/controls/animation.htm
Hope this helps.
Cheers.