I have a jquery-ui button and I know how to change the styling between states with css, but I would like to know how to change the label text too. For example, an ON/OFF button like below -- when [checked="checked"] then the label text would = "ON" (and OFF when not checked).
<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>
Any help would be tremendous. Thanks.
here is the solution :
$('#device_4_state').change(function(){
if ($("#device_4_state").is(':checked'))
{
$("label[for='device_4_state']").text("ON");
}
else
{
$("label[for='device_4_state']").text("OFF");
}
});
If you wish to use pure CSS to set the label text, you can use CSS pseudo elements to automatically generate the content of the label based on the state of the jquery-ui button. To use this approach, leave the label empty (<label for="device_4_state"></label>) and include CSS like this:
.on-off + label > span:before {
content: "OFF";
}
.on-off + label.ui-state-active > span:before {
content: "ON";
}
As in this jsfiddle: http://jsfiddle.net/GjPXZ/1/
Related
I am having trouble with a placeholder. I would like to change the color of the asterisk inside of the placeholder to red and leave the rest the dim black.
I am using bootstrap .form-control for markup.
I would like to know if there is a plugin/easy method of doing this.
JS or CSS.
I don't know of any easy way to have 2 colors in a place holder.
You can try adding an asterisk after your placeholder using -webkit-input-placeholder::after, and change its color, but this solution does not work in all browsers: See here
You can try something like this and add your placeholder as a label...
input[required] + label {
position: relative;
left: -170px; /* move the label left and place it inside the input */
color: #757575; /* placeholder color here */
}
input[required] + label:after {
content:'*';
color: red;
}
<input type="text" id="myInput" name="myInput" required="required" />
<label for="myInput">IME IN PRIIMEK</label>
I'm building a 'natural language' search form using a series of inline select inputs, using jQuery Select2 for styling. The widths of the Select2 inputs appear to be set to the width of the selected option on initialisation, which is great. I just can't work out how to get the width to update when the selected option is changed. Any ideas?
Many thanks!
Try to add this to yor CSS file:
.select2-container {
width: 100% !important;
}
It solved my resize problems with select2
(Edited: I do not use placeholders)
You can use window resize function.
Example:
// Fix select2 width
$(window).on('resize', function() {
$('.form-group').each(function() {
var formGroup = $(this),
formgroupWidth = formGroup.outerWidth();
formGroup.find('.select2-container').css('width', formgroupWidth);
});
});
I know this is an old post However, I had an issue when I used NMC's code.
As I can't comment on his answer, after using his code I had some annoying scrollbars appearing after using the select2 dropdowns, to fix this I used width auto instead.
.select2-container {
width: auto !important;
}
Just had to do something like this for a site
$(e).on("select2:closing", function(e) {
if (e.hasOwnProperty('params') &&
e.params.hasOwnProperty('args') &&
e.params.args.hasOwnProperty('originalEvent') &&
e.params.args.originalEvent.hasOwnProperty('target')) {
var newWidth = $(e.params.args.originalEvent.target).width();
var id = $(e.params.args.originalEvent.target).attr('id');
var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
$(container).parents('span.select2').width(newWidth + 21);
}
});
This is probably not fool-proof and is tied to the current API. But it gets the width of the element in the dropdown before the dropdown closes and then applies that to the container.
One thing of note, you may need to float the dropdown items to get their real size.
.select2-results__option {
float: left;
clear: both;
}
$('.select2-search__field').attr('style','width:auto');
$('.select2-search__field[placeholder=""]').attr('style','width:10px');
For dynamically resize a select2 you can use width: 'style' option as below:
$('#field_'+field.name).select2({
placeholder: "select a option...",
maximumSelectionLength: 1000 ,
allowClear: true,
...
width: 'style',
data: data
});
And next you have to use style="width:100%;" as attribute for your select tag.
<select class="input-element-item fontsize13" id="select2" style="width:100%;" >
<option></option>
</select>
For other than problems of responsive width, read the documentation of Select2. Everything is explained.
https://select2.org/appearance#container-width
<select class="js-example-responsive" style="width: 50%"></select>
$(".js-example-responsive").select2({
width: 'resolve' // need to override the changed default
});
I cant fix colorpicker.js in phonegap, it is not working! Some help, please?
thanks
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
//$('body').css('background', '#' + hex);
$("#hex_color").val('#'+hex);
}
});
var html ='<div id="texto">';
html +='<input id="newtext" type="text" value="Hello!">';
//html +='<input id="change" type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />';
html += '<input type="text" id="hex_color">';
html += '<div id="colorSelector"><div style="background-color: #0000ff"></div></div>';
html +='<button id="addbutton">Add this text</button>';
html +='</div>';
Try Spectrum Colorpicker. This is very nice color picker plugin.
Download the zip file and include the spectrum.js file and spectrum.css file to your page. Then you have to create a text box as follows
<input type='color' id='custom' />
Inside your script file
$("#custom").spectrum({
color: "#f00"
});
Hope it helped you
There one paid color picker JQuery Mobile Color Picker, only use it if you don't find the solution!
Solved with the
Angular-JS directive ngjs-color-picker
A small directive which essentially is a color picker but with a few extra functions - for Angular-JS. Suitable for developing custom color pallet in phonegap / Cordova apps.
1) I would change the input placeholder color in some condition using javascript (not CSS if it will change the placeholder color forever)
2) And I want that the placeholder change to another placeholder onmouseover the input box.
I got this function:
if(email.value==''){
email.style.borderColor = "#FF0000";
email.setAttribute('placeholder',"Plea… fill this required field");
//code for changing the placeholder color
//code for changing the placeholder onmouseover
}
1) The placeholder color for me usually is "#C9C9C9" I want to change it to another color by this code.
2) I want the placeholder text to change to any other text onmouseover.
I will be thankful for the one who will give me the code.
Thanks
Look with this post's answer to do it in CSS : Change an HTML5 input's placeholder color with CSS
Then, you can include the CSS rule with javascript.
And you just have to use pseudo-class :hover for the mouseover.
Just like that :
CSS
input.formInvalid::-webkit-input-placeholder {
color: red;
}
Javascript
document.getElementById("yourElementId").className += " formInvalid"; //add the class .formInvalid to your element
I have a little problem, and I can't figure out where does it come from.
I'm using jQuery UI (and of course jQuery)
I have the following HTML:
<input type="checkbox" id="test" value="test"/>
<label for="test">Show Test</label>
<div id="checkedDiv"></div>
and the following JS:
function clickChange() {
var currentText = this.nextSibling.innerHTML;
this.nextSibling.innerHTML =
(this.checked) ? currentText.replace("Show","Hide") :
currentText.replace("Hide", "Show");
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
var test=document.getElementById("test")
test.onclick=clickChange;
$("#test").button();
The problem is that on the first click, the innerHTML doesn't change. After that it works.
And to be a little more disappointed, the nextSibling seems to change (at least from what is seen in the #checkedDiv), but doesn't appear on the DOM Tree on firefox/firebug.
Am I missing something ?
Thanks
(if you want to try it yourself, it's here: http://jsfiddle.net/nvNKW/3/ )
EDIT:
The (or at least one) solution is to use label as suggested by Aziz Shaikh:
function clickChange() {
var currentText = $(this).button( "option","label");
$(this).button( "option","label",(this.checked)? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show"));
}
And there is no need to change the html or the button initialisation.
Try setting the label using $("#test").button({ label: newText }); instead of this.nextSibling.innerHTML
Edit: So your fixed JS function would be:
function clickChange() {
var currentText = this.nextSibling.firstChild.innerHTML;
var newText = (this.checked) ? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show");
$("#test").button("option", "label", newText);
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
It's because nextSibling() also returns text nodes. You are changing the blank empty space after the input, not the next tag.
jQuery makes it easy, do
$(this).next('label').html()