I am using twitter bootstrap-switch plugin in to show a checkbox with two options. It works well for checkboxes with small label text like "yes/no". However, when it comes to bigger label text like "Normal/Abnormal", then part of text is not visible to the user.
I tried to use the data_size attribute:
#Html.CheckBoxFor(model => Model.keyitems[i].Status,
new { #checked = "checked",
#data_on_text = "Normal",
#data_off_text = "Abnormal",
#data_size = "switch-large" })
But it didn't work.
How can I make the plugin support longer text as well?
First of all, the data attributes use hyphens (-), not underscores (_).
Also "switch-large" is not a permissible value for the size option, which takes the following values:
null, 'mini', 'small', 'normal', 'large'
More importantly, a large control doesn't actually do that much to change the allowable size. You'll have to override the control width like this:
.bootstrap-switch-large{
width: 200px;
}
All the control widths are based off of percents of their parent, so everything else should still render fine.
<input type="checkbox" class="switch"
data-on-text="normal"
data-off-text="abnormal"
data-size="large" />
Demo in jsFiddle
Something else to potentially check is jQuery version. I inherited a site that was running an older version and my button sizes were all too small, cutting off the text. Once I used a current version everything started working as it should.
Accepted answer is great, i just want to add a reference to a plugin here. I have used it in similar cases. It is BootStrapSwitch. It supports callbacks which is a real perk.
Related
I'm working on a web app and users sometimes paste in things they've copy/pasted from other places and that input may come with the character (0xAD). I don't want to filter it out, I simply need the user to see that there is an invisible character there, so they have no surprises later.
Does anyone know a way to make the always be visible? To show a hyphen, rather than remain hidden? I suspect a custom web font might be needed, if so, does anyone know of a pre-existing one?
You would need to either use JavaScript or a custom typeface that has a visible glyph for the soft-hyphen character. Given the impracticalities of working with typefaces for the web (and burdening the user with an additional hundred-kilobyte download) I think the JavaScript approach is best, like so:
document.addEventListener("DOMContentLoaded", function(domReadyEvent) {
var textBoxes = document.querySelectorAll("input[type=text]");
for(var i=0;i<textBoxes.length;i++) {
textBoxes[i].addEventListener("paste", function(pasteEvent) {
var textBox = pasteEvent.target;
textBox.value = textBox.value.replace( "\xAD", "-" );
} );
}
} );
I create <div contenteditable="true"></div>
The behaviour I want is:
Enter key press = <p></p> around the text line
Shift-Enter keys press = <br/> after the text line
To get the behaviour I want in Firefox, I have tried creating the following "keypress" event:
function(ev) {
if (ev.keyCode == '13') {
document.execCommand('formatBlock', false, 'p');
document.execCommand('insertBrOnReturn',false,false);
}
return false;
}
but Firefox (as at 33.1.1) insists on inserting <br></br> on first enter (which then gets wrapped in my paragraph). I understand it to a degree when a line is empty however I do not understand why it is not removed as soon as a character is inserted into the new line.
For example, assume I type:
hello<enter>goodbye
into the editable field, I will end up with the following markup (using the above event handler)
<p>hello</p>
<p>goodbye<br></br></p>
The <br></br> does indeed disappear if I hit enter again but then I am left with the following markup
<p>hello</p>
<p>goodbye</p>
<p><br></br></p>
There are 2 problems with this:
Users will not necessarily hit the second enter, leaving "invisible" <br></br> after the goodbye
Alternatively users will hit the second enter and end up with an essentially redundant line containing <p><br></br></p>.
In fact the only way I can see to get
<p>hello</p>
<p>goodbye</p>
ie. what I want, is to to use the following sequence hello<enter>goodbye<enter><backspace> which seems patently ridiculous.
At this point I should say that I personally love Firefox as a browser and my strong preference is to keep using it, however for our business clean editing markup is critical, and in Chrome, using the above method (excluding insertBrOnReturn) produces the desired markup (the above keypress event function switches Chrome cleanly to use p rather than its standard div)
So I am in a difficult position, and I would welcome any input from other Firefox enthusiasts as to how the above can be achieved elegantly if indeed it is possible (please don't invest time providing complex hacks though as we are unlikely to use them - in my limited experience complexity is diametrically opposed to reliability)
thanks in advance for any help!
(PS - after working with this, I'm really not sure that the Chrome div implementation is any better - see comments below)
I ran into an irritating feature of using ckeditor.
When you upload an image, in between your text content or wherever, ckeditor automatically fills in the width and height input fields as a default, which causes an html tag with width and height set in the style attribute:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg" style="width: 2000px; height: 669px;">
But if you delete the values in the input fields and then submit, the width and height is not set:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg">
Now like any normal, bright healthy web developer from the 21st century, I have a responsive design that takes care of these things, so I want the tags to always be generated like the latter. How can I hide and disable the input fields for width/height altogether?
CK editor's documentation is horribly chaotic
I did something similar with Tables. I didn't want the end user putting in silly values as we were forcing responsive styling and width.
Maybe this code will help you:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'table') {
// Get the advanced tab reference
var infoTab2 = dialogDefinition.getContents('advanced');
//Set the default
// Remove the 'Advanced' tab completely
dialogDefinition.removeContents('advanced');
// Get the properties tab reference
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary bits from this tab
infoTab.remove('txtBorder');
infoTab.remove('cmbAlign');
infoTab.remove('txtWidth');
infoTab.remove('txtHeight');
infoTab.remove('txtCellSpace');
infoTab.remove('txtCellPad');
infoTab.remove('txtCaption');
infoTab.remove('txtSummary');
}
});
CKEditor 4.5 now has a image_prefillDimensions config, which can be set to false to disable this auto-filling feature. See: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
I'm writing an alarm web app. I have two number inputs, one for the hours, one for the minutes. Thus, when I use my keyboard arrows, they go from 0 to 23/59. Is there an HTML native way to make them go from 00 (01,02, et.) to 23/59 instead ?
I'm only worried about the UI aspects as my JS manages the missing 0 anyway.
EDIT - As requested :
What I have :
What I want :
Instead of going from 0,1,2 to 59, I'd like to automatically have a leading 0 when the number is smaller than 10 (00,01,02 to 59).
I use this to just prepend zeros as needed:
<script>
function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
input.value = '0' + input.value;
}
}
</script>
And I just call that on the input's various events how ever works best for me, for instance:
<input type="number"
value="00"
onchange="leadingZeros(this)"
onkeyup="leadingZeros(this)"
onclick="leadingZeros(this)" />
It's not an ideal solution, mainly because there's a slight visual change as the user changes the number and the zero is prepended, but it works for me :)
Edit: Forgot to mention, I appreciate the answer asked for a native solution without javascript, but I wanted to provide something for people landing here through a Google search.
I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.
The correct, modern solution to OP's problem would be to use a input with type=time and then they don't have to worry about leading zeros or any of this other stuffs.
Adding on to some of the other answers that suggest using an event listener. I've tested this with jquery in chrome and it seems to work well with the padding without the slight flashing side effect.
<input type="number" id="input-element-id" value="00">
<script>
$('#input-element-id').on('input', function() {
const value = $(this).prop('value')
$(this).prop('value', value.padStart(2, '0'))
})
</script>
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );