The landing page of our LMS:
https://rainforrentlms.litmos.com/account/Login
We want to use the custom CSS option or the custom Javascript option in our LMS's theme setup screen to adjust the placeholder text from Username to Employee Number.
When I inspect the element this is what I extract:
<input class="first-focus form-control input-lg" id="Username" name="Username" placeholder="Username" required="true" type="text" value="">
After reading many posts here on StackOverflow I surmised that I should use Javascript as we've used that successfully to tweak other things in the past.
Here is an existing snippet that is already in our LMS's custom Javascript box:
<script type="text/javascript">
$(document).ready(function() {
checkContainer();
});
function checkContainer () {
if($('#SendEmail').is(':visible')){ //if the container is visible on the page
$("#SendEmail").attr('checked', false); //Un-checks the checkbox using CSS ID
} else {
setTimeout(checkContainer, 50); //wait 50 ms, then try again
}
}
</script>
The code I guessed would work and need to be inserted:
$('Username').attr('placeholder','Employee Number');
I'm not sure if that's correct, I've tried adding that at the top just inside the header and I've tried inserting it all by itself after removing the other code temporarily, neither seems to be working.
=========EDIT #1===========
So here is the code I tried using your suggestion for putting it in the document ready section, also didn't have any effect.
<script type="text/javascript">
$(document).ready(function() {
$('#Username').attr('placeholder','Employee Number');
checkContainer();
});
function checkContainer () {
if($('#SendEmail').is(':visible')){ //if the container is visible on the page
$("#SendEmail").attr('checked', false); //Un-checks the checkbox using CSS ID
} else {
setTimeout(checkContainer, 50); //wait 50 ms, then try again
}
}
$('#Username').attr('placeholder','Employee Number');
</script>
<script type="text/javascript">
$('#Username').attr('placeholder','Employee Number');
</script>
You're missing the # before Username, so it should be:
$('#Username').attr('placeholder','Employee Number');
The # tells jQuery to look for an element with id="Username", as opposed to a <Username> element.
Related
I would like to live format an input box with Numeral.js.
I tried something like this.
$('#exchangeInputFirst').keyup(function () {
//eur formatting
numeral.language('sk');
$('#exchangeInputFirst').val(numeral($('#exchangeInputFirst').val()).format('0,0.00$');
//to HUF format $('#exchangeInputSecond').val($('#exchangeInputFirst').val()*$('#first').html());
numeral.language('hu');
var string = numeral($('#exchangeInputSecond').val()).format('0,0.00$');
$('#exchangeInputSecond').val(string);
});
The second function is working perfectly (to HUF format), but the first not.
I think you are missing the numeral language file:
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>
I cannot reproduce your situation unless I do not include the languages js file. Try your example and hit a key on the first input box:
var a = false;
$('#exchangeInputFirst, #exchangeInputSecond').click(function () {
$(this).caret(0);
});
$('#exchangeInputFirst, #exchangeInputSecond').keyup(function(){
if(a == false){
$(this).val('');
a = true
} else {
numeral.language($(this).data('language'));
$(this).val(numeral($(this).val()).format('0,0.00$'));
$(this).caret(0);
}
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>
<script src="http://zikro.gr/dbg/html/jquery.caret/dist/jquery.caret-1.5.2.min.js"></script>
<input type="text" data-language="sk" id="exchangeInputFirst">
<input type="text" data-language="hu" id="exchangeInputSecond">
UPDATE
You also have a problem with the cursor position. You can solve this by using this jQuery plugin acdvorak/jquery.caret to set the caret position to the beggining of the input each time characters are typed like this:
$(this).val(numeral($(this).val()).format('0,0.00$'));
$(this).caret(0);
Also, I have included the language in input's data like data-language="sk" and now you can read it directly in the keyup event like this:
numeral.language($(this).data('language'));
See my updated snippet. It should now works as you want.
I have this code. It obviously calls function when selected element is focused. The function then checks if selected element has length less than 3, and if it does it changes background color of the element.
$('#register-form input[type="text"]').focus(function(){
if ($(this).length < 3) {
$(this).css('background','#f00');
}
});
Now the problem is that when there are more than 4 characters within input, color still remains. The problem is that it calls function when element is focused. After that, it doesn't check the if statement anymore, as obviosuly function is never called again.
The solution I seek; I want it to check if the IF statement is still legit once the input element value is changed. Or any other smooth way to check IF statements and calls functions in a live time.
The answer to this question is simple and well known. However, as you answer please provide some information related to this question; What are the best ways to check various changes in statements lively? What are the best ways to make website 'alive' and respond to any actions immediately?
Give the error a class and use onkeyup (and change if you wish - which triggers on blur too)
Also test the .val().length instead:
<style>
.error { background-color:red }
</style>
$('#register-form input[type="text"]').on("keyup,change",function(){
$(this).toggleClass("error", $(this).val().length < 3);
}).keyup(); // trigger on load
$(function() {
$('#register_form input[type="text"]').on("keyup", function() {
$(this).toggleClass("error", $(this).val().length < 3);
console.log("error")
}).keyup(); // initialise in case of reload
});
.error {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="register_form">
<input type="text" />
<input type="text" />
<input type="text" />
</form>
Try this:
$('#register-form input[type="text"]').on("focus input", function(){
$(this).css('background', $(this).val().length < 3 ? '#f00' : '#fff');
});
EDIT
Personally, I use AngularJS alot for web applications that have alot of these. E.g. you can do this:
<input type="text" ng-model="myValue" ng-style="{'background-color', myValue.length < 3 ? '#f00' : '#fff'}"/>
I have a form which uses dynamic styling. Consider this html
<div class="field-name field-form-item">
<label class="placeholder" for="name">Name</label>
<input class="form-input" id="name" type="text" name="name" maxlength="50" size="30">
</div>
The label is ABOVE the input, with CSS. When you click the label :
$('.placeholder').on('click focus', function() {
$(this).addClass('ph-activated');
$(this).siblings('input').focus();
})
Then the label is animated and let the user type in the input.
If the user dont wan't to write anything, the animation goes back, and hide input field :
$('input').on(' blur', function(){
if ($(this).val().length === 0) {
$(this).siblings('label').removeClass('ph-activated');
}
});
That's alright.
But when a user fill the input, THEN refresh the page and its browser didn't reset input fields(ie firefox) : the label is above the input, even if the latter is not empty.
I tried this :
$(document).ready(function() {
if ($('input').val().length) {
$(this).siblings('label').addClass('ph-activated');
}
})
But it doesn't seem to trigger, I tried several ways to write this function. Up to now I never managed to give the class ph-activated to a label with a filled input on page refresh.
Sorry I can't fiddle this. I just have far too much html/css/js/php to copy paste
Well you are targeting wrong element in $(document).ready because you are referring label with this thinking that $(this) is input whereas it is document. So try applying below code and I hope there will be multiple input elements in page, so I've used $.each and looping through all the inputs
$(document).ready(function() {
$('input').each(function(){ //loop through each inputs
if ($(this).val().length) {
$(this).siblings('label').addClass('ph-activated');
}
});
})
DEMO - Inspect the label and you will find ph-activated class added to label
Try this one:
$(document).ready(function() {
var length = $('input').filter(function( index ) {
return ($(this).val() !== '');
}).length;
if (length > 0) {
$(this).siblings('label').addClass('ph-activated');
}
})
Pretty self-explanatory, I have a textarea and it's set to required, but it only prompts user if you actually click in the text area, if you submit without clicking inside the text area it will not prompt the alert.
Fiddle
<p class="textHeader">
<strong>
Which type of elements would you be in favor of for a future
pattern for interactive media to follow?
</strong>
<textarea
name="styled-textarea"
id="styled"
onfocus="this.value=''; setbg('#e5fff3');"
oninvalid="invalidComment(this);"
onblur="setbg('white')"
placeholder="Max characters 140"
maxlength="140"
required
>
</textarea>
</p>
Easy answer. You are already providing contents for textarea, some white space with how your existing HTML is laid out. Therefore a value has been provided. Make sure your textarea closing tag is right next to the opening tag, without any spaces, so there is no white space content in-between. Like this:
<p class="textHeader">
<strong>
Which type of elements would you be in favor of for a future
pattern for interactive media to follow?
</strong>
<textarea
name="styled-textarea"
id="styled"
onfocus="this.value=''; setbg('#e5fff3');"
oninvalid="invalidComment(this);"
onblur="setbg('white')"
placeholder="Max characters 140"
maxlength="140"
required
></textarea>
You can use a js library like abide
http://www.siegeengine.org/documentation/abide-html5-validation.html
Or if you prefere
<script type="text/javascript">
// without jQuery style
var bindEvents = function(event){
if( document.getElementById('styled').value.trim() === '' ){
event.preventDefault();
alert("Write something please");
}
};
window.onload = function(){
document.forms[0].addEventListener('submit', bindEvents, true);
};
// jQuery style
var bindEvents = function(){
$('form').on('submit', function(e){
if( $(this).val().trim() === '' ){
e.preventDefault();
alert("Write something please");
}
});
};
$(document).ready( bindEvents );
// i would not recommend this but it will work also
var initForm = function(){
document.getElementById('styled').focus();
document.getElementById('styled').blur();
}
window.onload = initForm;
</script>
I'm trying this:
</script>
<form action="ej3a.html" onsubmit="Pantalla(this.elements[0].value)">
Select word size <input type="text" name="Tletra" id="letra"><br>
<script>
Then, I send the information summited to a js method
function Pantalla(x){
if(x=="Grande")
{
document.getElementById("todo").style.fontSize="120%";
}
if(x=="Normal")
{
document.getElementById("todo").style.fontSize="medium";
}
if(x=="Pequeño")
{
document.getElementById("todo").style.fontSize="80%";
}
}
but, when I summit "Grande" it just increases for a second and later returns to normal size
Note: Forget onmouseover, the change i try to make is on a fielset, which has all text of the web page
<fieldset onmouseover="estiloof()" id="todo">
Try
return = false;
at the end of the function to prevent form submission and page reload.