I was wondering if it already exists a way to have an input of type "range" with two different setteable values. The input I would like to achieve is something like this. The idea would be to set a range for a price. Meaning I would need to retrieve the "minimum" and the "maximum" from that input. Obviously, for the sake of learning, we can disregard the CSS style.
Is there a way to accomplish this with HTML5 or JavaScript? I've heard that there are some jQuery plugins that accomplish this, but I was wondering if there's a more "native" way of doing it. As an addition, I'm working with the mobile-oriented framework Ionic. If anybody knows about a plugin for Ionic that can achieve this, it would be much appreciated.
You can use noUiSlider. It includes all Javascript, CSS and HTML necessary.
Having a div like this in your HTML:
<div id="slider"></div>
And using this:
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
You can see an easy example of it working.
Related
Can someone explain to me how to get to these buttons in the DataGrid?
I want to change the color which atm. looks like this although they are not disabled.
How am I supposed to select the classes correctly to get to the buttons? I actually fixed this by just styling with the sx prop
sx={{
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
color: '#074682',
},
},
}}
But I would like to do this in my theme (components) for light mode here
I read the css documentation of DataGrid on Mui and I'm confused about how to get deeper into toolbarContainer.
Any help is appreciated. I really want to understand this and not just try out stuff.
I can see:
MuiDataGrid-root
MuiDataGrid-toolbarContainer
THEN
MuiButton-text
Would I then just select them in that order?
EDIT:
This also works:
But why can't I just select the MuiButton, then the text and then add the color like this:
I'm using HTML examples on my website (using Crayon) and want to show output as well.
But I want the output to show as pure as it would have without any of my website's own stylesheets.
I can of course do this with an iframe, but that seems tedious. Is there perhaps another trick or library that anyone is aware of?
Thanks
Ended up doing this. Works well...
$('.crayon-title').click(function() {
var content = $(this).parent().siblings('.crayon-plain-wrap').children('textarea').text();
var x=window.open();
x.document.open();
x.document.write(content);
x.document.close();
})
I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?
Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.
This is now natively supported by the Kendo grid. Here's an example.
You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference
However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:
function onDataBound(arg) {
var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
$("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'> <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th> <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
}
}
For more understanding and a working example please see below Sample:
MultiRow-Column Header Sample
Please let me know if you if you have any queries.
This is my first question on here so please go easy :)
I am trying to implement some line graphs with rickshaw graphs, d3 and jquery UI.
I have some vertical tabs and have successfully gotten the charts to load from external html files.
There was a bit of documentation on Rickshaw but I couldn't find what I was specifically after so I will ask this kind community a few questions if that is ok?
Firstly when loading Tabs in jquery UI from external html files where should I put all of the javascript and css into the page that is embedded (see below historic.html) or into the parent page? I have tried both and they seem to work I was just wanting to know best practice.
<ul>
<li><div id="live-icon"></div>LIVE GRAPHS</li>
<li><div id="historic-icon"></div>HISTORIC DATA</li>
Secondly, I the x-axis on the graph is in milliseconds. I would like to append "ms" to the end of each of the x-axis "ticks". so the x-axis would read 50ms, 100ms, 150ms etc... Can this be done?
And lastly in Rickshaw they have that fan-dangled example (http://code.shutterstock.com/rickshaw/examples/extensions.html) that has all of the bells and whistles. It has two properties that I cannot find any information on.
perserve: true ? and another example has tickFormat and tickTreatment? Could someone please explain what these do.
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,
Thankyou very much for your help.
Probably no longer relevant for the OP, but since it's still unanswered, I can answer the Rickshaw questions:
To append ms to the end of your ticks, you need to use the tickFormat option. In their tutorial, they set up the axis as follows:
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
Here, they're setting up the tickFormat to be a default they've built in, but in reality, it can take anything that conforms to what d3's axis' tickFormat takes. tickFormat should be a function that accepts a number and outputs a string. You probably want something along the lines of
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: function (d) { return d + ' ms'; },
element: document.getElementById('y_axis'),
} );
This will make the ticks simple be the number followed by ms.
This also happens to answer one part of the three part question that follows. The other two parts concern tickTreatment and preserve.
The short answer is that tickTreatment gets added as a class to the ticks. The reason that this is useful is for CSS styling, which Rickshaw takes advantage of. They have some presets you can use for this. The one they're using in that example is called glow, which adds a white glow around the text to make it readable on top of the graph.
preserve is an option that affects whether or not the data you provide is copied before it's used. The relevant section from Rickshaw's source is here:
var preserve = this.preserve;
if (!preserve) {
this.series.forEach( function(series) {
if (series.scale) {
// data must be preserved when a scale is used
preserve = true;
}
} );
}
data = preserve ? Rickshaw.clone(data) : data;
Basically, if you set preserve to true (it defaults to false), it'll make a copy of the data first.
Can I replace the maxlength attribute with something in CSS?
<input type='text' id="phone_extension" maxlength="4" />
No.
maxlength is for behavior.
CSS is for styling.
That is why.
No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.
You can use jQuery like:
$("input").attr("maxlength", 4)
Here is a demo: http://jsfiddle.net/TmsXG/13/
I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.
Perhaps you should think about using JQuery to apply common functionality to your form components?
Not with CSS, no.
Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.
As others have answered, there is no current way to add maxlength directly to a CSS class.
However, this creative solution can achieve what you are looking for.
I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)
run the snippet to see it in action, works well.
jquery, css, html:
$(function () {
$(".maxLenAddress1").keypress(function (event) {
if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
return false;
} else {
return true;
}
});
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="maxLenAddress1" />
The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.
Use $("input").attr("maxlength", 4)
if you're using jQuery version < 1.6
and $("input").prop("maxLength", 4)
if you are using jQuery version 1.6+.