what if i want to display the input box ABOVE the slider at the centre??
In the image provided, we can see that the input box is overlapping the slider & also the input box's top right & bottom right corner doesn't have border radius.
Is it possible to do these customization?
Demo: http://jsfiddle.net/EWQ6n/572/
i did this by doing
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
top : '2%',
left : '30%'
}));
The top (top : '2%') dosent like percentages so use pixels. Also the height and width had a problem that's why the border was not there. My screen is wide and the box is centered so adjust the (left : '46%') percentage to get it centered if its not.
I did a Demo for you.
http://jsfiddle.net/k7XAj/4/
Code
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '40px',
width : '70px',
overflow : 'hidden',
top : '-30px',
left : '46%'
}));
Wraping input element and slider will get you better results in different browser sizes
demo: http://jsfiddle.net/EWQ6n/574/
$(".ui-slider-input").each(function(){
$(this).css({
position : 'absolute',
top : '2%',
left : '30%',
marginLeft: '-10px'
})
.add($(this).next()).wrapAll($('<div />').css({
position : 'relative',
paddingTop: '40px'
}))
});
Thanks for your Replies.
Actually I wanted to get rid of those up-down arrows from the text box. Finally found the solution.
I just hid the text box that comes along with the slider, & inserted a new text box whose value changes as we move the slider.
<input id="txtvalBox" type="text" value="" />
$("#points").change(function () {
document.getElementById("txtvalBox").value = document.getElementById("points").value;
});
//points is the id of the slider
See This
http:http://jsfiddle.net/Gk_999/mxzu5Ld3/
Related
In the position property, there are two options : "my" and "at".
I don't understand how to configure the position of the popup bubble through these options.
What do they mean?
In order to figure out these options clearly, I found an example on-line, but still cannot figure out.
For example, when the bubble is shown on the left of the input area, but the value of "my" is 'right center', why is that?
Why call tooltip() twice? One tooltip with arguements is called within on(), and another one without arguements is on outside the on() trigger?
Why is that?
Here is the example: http://jsfiddle.net/tj_vantoll/kyBwU/
$('input[type="radio"]').on('change', function() {
var className = $(this).val();
var position;
switch (className) {
case 'top':
position = { my: 'center bottom', at: 'center top-10' };
break;
case 'bottom':
position = { my: 'center top', at: 'center bottom+10' };
break;
case 'left':
position = { my: 'right center', at: 'left-10 center' };
break;
case 'right':
position = { my: 'left center', at: 'right+10 center' };
break;
}
position.collision = 'none';
$('input[type="text"]').tooltip('option', 'position', position);
$('input[type="text"]').tooltip('option', 'tooltipClass', className);
});
$('#options').buttonset();
$('input[type="text"]').tooltip();
$('input[value="right"]').trigger('change');
And I tried to create my own, somehow, the last input text field is always preselected.
It is my code: http://jsfiddle.net/matildayipan/sks358zo/18/
That's what we have documentation for.
The jQuery UI .position() method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.
my (default: "center") Type: String
Defines which position on the
element being positioned to align with the target element: "horizontal
vertical" alignment. A single value such as "right" will be normalized
to "right center", "top" will be normalized to "center top" (following
CSS convention). Acceptable horizontal values: "left", "center",
"right". Acceptable vertical values: "top", "center", "bottom".
Example: "left top" or "center center". Each dimension can also
contain offsets, in pixels or percent, e.g., "right+10 top-25%".
Percentage offsets are relative to the element being positioned.
at (default: "center") Type: String
Defines which position on the target
element to align the positioned element against: "horizontal vertical"
alignment. See the my option for full details on possible values.
Percentage offsets are relative to the target element.
I am building a pie chart where the labels for the data points can very greatly in length, the legend is configured to be vertical and positioned on the left side.
I have added a label element to the bottom of the chart that shows the total of all data points.
The problem I am facing is that the positioning of this label (via the style element) is based on how wide the legend is, which occasionally if the legend is wide enough will be pushed off the right side of the chart.
Does anyone know of a way that I can style this label so that is positioned based solely on the width of the entire chart.
Here is the styling applied to the label (I tried adding the position value but this didn't appear to do anything):
style: {
top: '325px',
position: 'absolute',
left: '-160px',
'font-size': '175%'
}
Here is an example of the chart that I'm working with, you can see that the value for the total has bee cut off.
EDIT:
As per Sebastian's comment I was able to effectively solve the issue by using the legend label formatter to limit the length of the series names. Here is the code:
labelFormatter: function () {
var formattedName = this.name;
if (formattedName.length > 17) {
formattedName = formattedName.substr(0, 14) + '...';
}
return formattedName;
}
Have you tried to use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter ?
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".
How to set scrollbar position to Left in highcharts/highstock ?
As shown in image when the chart loads,
The scrollbar is automatically aligned to right.
Is there a way to position it to Left ?
We can do this thing using setting min to 0
xAxis: {
min: 0, //setting min to 0
max: 5
},
here is Jsfiddle link .
You can use setExtremes http://api.highcharts.com/highstock#Axis.setExtremes() and define range for scrollbar.
I'm trying to nest an image in a div and make it draggable on the X axis within this div.
Here's a jsFiddle to illustrate my point
I'd like the blue box to stop dragging once the user reaches its left/right edges, he shouldn't be able to see any of the red wrapper anymore.
Imagine the blue box is a very wide image, I want to be able to drag it from its left side to its right side without exceeding its width. It means you can't drag it to the right when you reached its left edge, and you can't drag it to the left when you reached its right side.
In a nutshell, when you reach the edges of the image, you can't drag it any more.
How can I set that kind of behavior ?
I tried playing with containment but I couldn't achieve what I wanted.
Thanks for your help.
HTML :
<div id="wrapper">
<p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>
</div>
CSS :
#wrapper {
width: 800px;
height: 400px;
background-color : red;
overflow: hidden;
cursor: w-resize;
}
#timeline {
width: 2000px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
JS :
$("#timeline").draggable({
axis: "x"
});
You were correct to use the containment option but you'll want to pass in array of coordinates to constrain the draggable.
Per the jQuery UI docs the containment option can take an Array in format [x1, y1, x2, y2]. In your case the y values are irrelevant because you are already constraining the draggable to the x axis, so you can simply pass in 0.
For the x values 0 will work for x1 since the image is already starting on the right edge. For x2 you'll need to use:
(width of parent - width of image)
So
(800 - 2000) = -1200
Therefore you can pass the following in for the containment option:
containment: [-1200, 0, 0, 0]
Live Example - http://jsfiddle.net/LMXLj/