I have a kendo tooltip for a field, that can contain a very long values. The default position of the tooltip is on the left of the field, however, if there's not enough space for a tooltip on the left, it automatically switches to the right. The problem i have, that sometimes, there's not enough space for a tooltip on the right either. I want to somehow control the behaviour of the tooltip in that case, and position it the way i want. Is there a way?
I had a similar situation and found the code to dynamically place a tooltip. Perhaps this will help you.
var p = $(SomeWrapper).offset();
$(element).kendoTooltip({
top: p.top,
left: p.left,
frame: false,
callout: false,
show: function (e) {
e.sender.popup.element.css('margin-top', '-10px');
e.sender.popup.element.css('margin-left', p.left + 'px');
},
width: 500,
height: 300,
position: "bottom"
});
Related
I'm using FabricJS in my web application. As I draw shapes, I notice that the control widget for all the objects are rectangular. Can the shape of a control widget be modified to fit the actual shape of the object? Say, a circle with a circular control widget.
I went through the Controls Customization demo. But there is no option to modify the shape of a control widget.
I need to modify the shape of the control widgets for the following purpose:
In my application whenever an object is clicked, its fill colour is toggled between black and white. In this case(refer the image below), because the circle has a rectangular control widget, clicking the pointed pixel selects the circle instead of the rectangle. I also hide the control widget from appearing by using hasControls property. So, the user will not know anything about the control widget. So, is the shape of the control widget editable?
I don't think there is an easy way to do that with fabric.js without writing a whole bunch of extra code. Fabric.js always draws a rectangle bounding box and uses it for selection controls. However, since you're planning on hiding the controls anyway, it sounds like you might be better off using perPixelTargetFind.
When true, object detection happens on per-pixel basis rather than on
per-bounding-box
Here's a quick demo:
const canvas = new fabric.Canvas('c', {
preserveObjectStacking: true,
perPixelTargetFind: true
})
const circle = new fabric.Circle({
radius: 50,
left: 50,
top: 50,
stroke:'green',
fill: 'white',
hasControls: false,
hasBorders: false
})
const rect = new fabric.Rect({
width: 200,
height: 150,
left: 50,
top: 25,
stroke: 'green',
fill: 'black',
hasControls: false,
hasBorders: false
})
canvas.on('mouse:down', (e) => {
const obj = e.target
if (obj) {
obj.set({
fill: obj.fill === 'white' ? 'black' : 'white'
})
canvas.requestRenderAll()
}
})
canvas.add(circle, rect)
circle.bringToFront()
canvas.requestRenderAll()
body {
background: ivory;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
I am new to C3 (and D3) having spent all my time using Zingcharts.
I want to move the chart title to the left edge.
I have tried the css and nothing seems to move. I can change the size and color but not the alignment or the position.
.c3-title {
font-size: 26px;
fill: green;
text-align: left;
}
and the C3 for adding the title.
title: {
text: 'My Title',
},
thank you.
Either
Use the position attribute when setting the title
title: { text:"TITLE", position: "upper-left"},
For more fine-grained control, you need to change the x attribute on the .c3-title text element for the chart
http://jsfiddle.net/cbd3fs41/
Best place is to change it in the onrendered callback in the chart configuration
onrendered : function () {
d3.select(this.config.bindto).select(".c3-title").attr("x", 50);
}
I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot
There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:
In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val(),
color: "rgba(255,102,0,.999)"
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.
var tooltip = $('#gauge').kendoTooltip({
filter: '[fill="rgba(255,102,0,.999)"]',
position: "center",
content: $("#gauge").data("kendoRadialGauge").value(),
show: function(e) {
e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
e.sender.refresh();
}
}).data("kendoTooltip");
Here is a dojo DEMO
I've run into this problem a lot with D3. A lot of the time I like to overlay HTML objects over my SVG.
My current strategy is creating an empty DIV next to the SVG element called .html-overlay. I position it according to the internal padding I set in the SVG for my main graphic (ex: 20px). Then I use the following function (with jQuery) to figure out where the HTML element should go:
//element is the object returned by D3 .append()
var getOffset: function(element) {
var $element = $(element[0][0]);
return {
left: $element.offset().left - $('.html-overlay').offset().left,
top: $element.offset().top - $('.html-overlay').offset().top
};
}
I wonder, there MUST be some internal (non-jQuery dependant) way to quickly get an element's offset. It's very useful (especially after an elements goes through multiple translations, rotations, scales, etc.)
It would also be great to have functions for figuring out the offset of the "center" of an element, the topmost point of element, bottommost, leftmost, rightmost, etc.
NOTE:
The getBoundingClientRect() doesn't give the correct numbers for some reason:
var $element = $(element[0][0]);
console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object
ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150
did you try
var xywh =element[0][0].getBoundingClientRect();
seems to have everything in it?
(original soution is in this post)
The problem is with getBoundingClientRect, which doesn't account for scroll position or the element's container position relative to the document. It will only report back that item's exact position relative to the document top and left coordinates.
I've created a d3 method which will report back the position of the element. It works by looping through parent elements until it finds the container SVG, then considers that item's position in the calculations. It returns what you would normally receive from getBoundingClientRect.
Here's the method:
d3.selection.prototype.position = function() {
var el = this.node();
var elPos = el.getBoundingClientRect();
var vpPos = getVpPos(el);
function getVpPos(el) {
if(el.parentElement.tagName === 'svg') {
return el.parentElement.getBoundingClientRect();
}
return getVpPos(el.parentElement);
}
return {
top: elPos.top - vpPos.top,
left: elPos.left - vpPos.left,
width: elPos.width,
bottom: elPos.bottom - vpPos.top,
height: elPos.height,
right: elPos.right - vpPos.left
};
};
And you can use this like so:
d3.select(element).position()
Note that I haven't actually added the code here to consider the scroll position.
Extending James Lai's answer to support modern versions of IE:
function getVpPos(el) {
if(el.parentNode.nodeName === 'svg') {
return el.parentNode.getBoundingClientRect();
}
return getVpPos(el.parentNode);
}
Note: parentElement is changed to parentNode
and tagName is changed to nodeName.
I'm running jqPlot and for some reason the color-coded squares that should show up inside the pie renderer's legend are not appearing. I'm wondering if it has anything to do with the fact that I'm using twitter bootstrap? I'm not using any other css libraries.
var plot1 = jQuery.jqplot('chartdiv', [graphData],
{
grid: {
shadow: false,
background: '#FFFFFF',
},
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
padding: 20,
startAngle: 270
}
},
legend: {
show: true,
location: 'e',
fontSize: 11,
marginTop: 10,
}
});
Are you sure you are loading the CSS of the jqPlot correctly (i.e. the url/href is pointing into the right location)?
This is your code with jquery.jqplot.css loaded.
This is your code without the css.
This one is with both the jquery.jqplot.css and the bootstrap (downloaded without jQuery plugins and not linking the img folder that comes with the download). Here all appear correctly, thus you must double check the href of the jquery.jqplot.css.