I am using KendoUI's radial gauge, and I want to add a label right between the 0 tick and the 300 tick. The initalization takes in an object that can have a label attribute but that configures the actual tick label whereas I want to add a new word centered in the middle such as "Pounds", "Miles", etc.
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge
$("#gauge").kendoRadialGauge({
pointer: {
value: 37.4
},
scale: {
startAngle: -30,
endAngle: 210,
minorUnit: 5,
majorUnit: 25,
min: 0,
max: 100,
}
});
Here's a fiddle to try it with: http://jsfiddle.net/sThK3/104/
UPDATE 1/25/2017:
It is certainly possible, but even after reading their code I don't understand where the labels are coming from: http://demos.telerik.com/kendo-ui/radial-gauge/car-dashboard
Unfortunately it appears like your objective may not be feasible in the way you were hoping for.
After looking more closely at telerik's radial gauge example you linked I found an image resource used for this: http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.png
This image contains the labels you're referring to of {k/mh, x1000 RPM} and the images for the gas/temp on the right.
Floating a label over the gauge may be an alternative? Or building your own background-image that will contain the label you wanted. :(
That would be referred to in your CSS like follows:
#gauge-container {
margin: 0 auto;
overflow: hidden;
width: 614px;
height: 324px;
background: transparent url("../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
}
replacing ../content/dataviz/dashboards/car-dashboard.png with your image that has the right label in it for you
I'm going to see if I can figure out how to float a label on this using your jsfiddle example.
EDIT: I got the goods for you now. Looks like by using the appropriate css you can float a label in the middle of your radial.
I accomplished this with the following:
JS:
$("#gauge").append("<label>Test</label>");
CSS:
label {
margin-left: 50%;
margin-right: 50%;
float: center;
}
Related
I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS values for Transform translate will work. Reason to use translate is the performance compared to position. I commented out the position left with Velocity to give you an idea what I'm trying to achieve.
var button = document.getElementById('button');
var adiv = document.getElementById('panel');
button.addEventListener('click', function(){
//Velocity(adiv, { left: '100' }, [ 500, 20 ]);
Velocity(adiv, {translateX: 200}, [ 500, 20 ]);
})
#panel {
display: block;
position: absolute;
background: #ffffbd;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
button {
top: 90%;
position: relative;
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div id="topbar"></div>
<div id="panel">
</div>
<button id="button">start</button>
</body>
In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately).
Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);
If there's no forcefeeding it'll animate from a value of 0.
Velocity seems to be picking up steam with version 3 of VUE coming up.
I highly suggest the Velocity 2.0 docs to be a little more updated with information such as:
In Velocity V2 there are no longer any transform shortcuts such as
translateX - just use the css transform property properly and it'll
work (there are issues in V1 with trying to do that unfortunately).
Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);
Or reach out to the VUE team as they are still using the Velocity 1.x examples.
Easy example with jQuery:
$('.box').on('click', function() {
$(this).velocity({
transform: ["translateX(100px)", "translateX(0px)"]
}, {duration: 1000});
});
The extjs Ext.form.ComboBox item setting height is not working using the
maxHeight: 100
minHeight: 100
maxBoxHeight: 100
minBoxHeight: 100
Even the setting of height of the div of the list is not working.
By default the height of the contained div is set to 0px. Any idea how to manipulate the height.
The html structure would be of the form as its a list of divs within a div.
The setting you are searching for is listConfig. Here you can set configuration properties that will be passed to the Ext.view.BoundList's constructor.
Ext.create('Ext.form.ComboBox', {
//[...]
listConfig: {
minWidth: 300,
maxHeight: 40
}
});
Here is a full example:
https://fiddle.sencha.com/#view/editor&fiddle/21bc
I done this before and it worked for me.
You can give cls config to your comboBox.
cls: 'textTransparent'
and you can give height in cls.
.textTransparent {
height: 25px !important; // this will give the height
font-size: 12px;
font-weight: bold;
color: white;
margin: 0 !important;
}
I am creating a UI control. It is a bar which shows colored areas in relative proportion to each other based on the input. A few of the requirements are that there be a 1px gutter between the colors and that every color must be shown at a minimum of 1px no matter how small the relative width.
The bar looks like this:
The gutters are being placed using a technique described by the pocketgrid documentation:
.threshold-container {
height: 8px;
$threshold-horiz-gutter: 1px;
&.block-group {
margin-left: -$threshold-horiz-gutter;
}
.threshold {
height: 100%;
min-width: 2px;
&.block {
padding-left: $threshold-horiz-gutter;
}
.colored-area {
height: 100%;
width: 100%;
}
}
}
There is a codepen here which provides a working example: http://codepen.io/ghoti143/pen/eZNXVW
The problem I face is that when the relative proportion of any one color is sufficiently small, the last color area wraps to the next line and looks like this:
To replicate this issue, visit the codepen project and enter this as the Threshold Array value:
[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]
In this case, the width style of the LightGreen area is 0.33333%. This equates to 0.495px at a bar width of 150px. However, because of the requirement to always show at least 1px of width for each color, the LightGreen area is consuming 2px of width (1px content + 1px padding).
Thanks for any insights you may have!
You can use the css calc function to subtract out the 1px margins from the width calculations for each section. [For example]http://codepen.io/anon/pen/ZWGNVY
coloredAreas.push({
color: thresholds[i].color,
width: 'calc(' + width + '% - 1px)'
});
I'm using flot as a plotting javascript utility.
Here is the sample I'm using which allows toggle...
https://github.com/flot/flot/blob/master/examples/series-toggle/index.html
What I want to achieve is to move the legend to the right side of the plot as having several curves causes the legend to grow big and block the view.
I tried the "aboveData" option as the api suggested:
$.plot("#placeholder", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
},grid: {show:true, aboveData:false},
});
It did not do anything.
Then I tried changing the css to add a "left" property to the table:
.legend table {
border-spacing: 5px;
left:800px;
}
which does move the legend table to right but there is an opaque white div container left behind.
Any idea how to remove it?
You method kinda works if you use the parent legend div instead of the table:
.legend {
position: absolute;
left:800px;
}
This is probably not the best way to achieve your goals though. flot provides the ability to relocate the legend to a container (div) of your choice. So to put the legend right of the plot, I'd do:
<div id="flotGraph" style="width: 400px; height: 400px; float: left"></div>
<div id="legendContainer" style="float: left"></div>
And then use the legend container property:
$.plot("#placeholder", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
},
legend: {
container: $('#legendContainer')
}
});
Here's an example.
I have a PNG image of a character, and I want something like that:
http://www.swfcabin.com/open/1364482220.
If someone clicks on a part of the character's body, it'll be "selected".
The question is - how can I do that. I don't want to use more images (because I have multiple characters), I want to use CSS only.
I tried this: http://jsfiddle.net/eRVpL/, but the green background appear above the white background, and I want it to be only above the character.
The code:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
<span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }
.character > span {
display: block;
width: 200px;
height: 30%;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
}
img {
max-width: 200px;
}
</style>
You can make this work with CSS masks, although they are currently only supported in WebKit browsers: http://caniuse.com/#feat=css-masks
http://jsfiddle.net/eRVpL/3/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask"></div>
</div>
CSS:
.green-mask {
height: 200px;
width: 508px;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked div:
http://jsfiddle.net/eRVpL/11/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask">
<div class="filler"></div>
</div>
</div>
CSS:
.filler {
background-color: rgba(160, 255, 97, 0.3);
height: 200px;
margin-top: 200px;
width: 100%;
}
.green-mask {
position: absolute;
width: 508px;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.
Currently there is no CSS-only means of accomplishing this. There is a specification for compositing and blending with CSS that's in the works, but it currently isn't being supported enough to be used in a product just yet. You can read-up on the spec here: http://www.w3.org/TR/compositing/
With this specification, we could set the blend-mode of your element to "screen", "overlay", or "lighten" which would make your character be green but the background would remain white. Unfortunately, this isn't possible just yet.
The best way would be, as jcubic said in one of your comments, "You need to use a mask, image that will be exactly the same but the character transparent".
Good luck!
Try using z-index for getting what you want. You'll be able to make the object appear to be hidden on a certain page until you bring it up with a mouse click or hover. You can also make a green image that's basically a silhouette and cut it up into three different portions, give them a little bit of exact positioning (each with their own division) and have a little z-index, then you've got yourself that. You might also want to cut up the actual character into three parts to make it easier.