I am a beginner in learning Jquery.
I tried a simple sign up form in jquery.
here,if the username and password is not entered in the text box then a label is displayed with span saying"Please fill the username".
How to change the span font color?
Here is my code:
if(user=="") {
$('#dis').slideDown().html("<span>Please type Username</span>");
return false;
}
Thank you...
Just apply color in your span.
if(user=="") {
$('#dis').slideDown().html("<span style='color:green'>Please type Username</span>");
return false;
}
Or you can apply some class, then add the style into that.
if(user=="") {
$('#dis').slideDown().html("<span class='colorspan'>Please type Username</span>");
return false;
}
.colorspan
{
color:green;
}
Related
I want to change the background color of a row if the value in the table cell goes above a certain value.
I have tried implementing the toggle class as well as adding and removing classes with no luck. When I manually implemented the background color it worked.
I know I am trying to toggle a class vs a style, but is there any way I can toggle a style to change the background color?
var mq2 = 5;
if (mq2 >= 5) {
document.getElementById("row1").classlist.toggle("change2");
} else {
document.getElementById("row1").classlist.toggle("change1");
}
.change1 {
background-color: #FF6347;
}
.change2 {
background-color: #90EE90;
}
<tr id="row1">
Your code should work. You could improve it by creating a variable referencing the element
const row = document.getElementById("row1");
if(someCondition) {
row.classList.toggle("change2");
} else {
row.classList.toggle("change1");
}
The approach you are taking is fine, just make sure you capitalize classList correctly.
document.getElementById('row1').classList.toggle('change1');
On page reloads I have floating labels overlapping the input text if the form has been filled out before. To avoid this problem I want to alter the input text's style if there is data in the form.
Here is my code:
https://codepen.io/holly-williford/pen/pONYYM
document.getElementsByClassName("floating").addEventListener("load", hideLabel);
function hideLabel() {
if(!$('input').val() ) {
$('floating').addClass('warning');
} else {
}
}
<label class="floating">Test</label>
<input></input>
warning {
color: red;
}
There are many things from the codepen example that need changes.
HTML
<label class="floating">Test</label>
<input> <!-- You should have a proper html tag -->
CSS
.warning { //Notice the '.'
color: red;
}
JS
window.onload = hideLabel;
function hideLabel() {
if(!$('input').val() ) {
$('.floating').addClass('warning'); // Notice the '.'
} else {
}
}
These modifications should help you get started.
But, you have mentioned jQuery and you don't seem to make the most of it.
I am writing a program in which when a user click on check box , the font of the input (which i am writing) changes. Like firstly if the check box is unchecked the font is 'arial' and when the check box is checked the input font should become 'verdana'.
I am able to do this but the function changes all the previous text written into verdana.
Code Sample:
<input type= "checkbox" onchange = "tests();" name="remember" id = "remember"> **(Checkbox)**
function tests(){
if (remember.checked == 1){
$(.form-control).css('font-family','verdana');
}else{
$('.form-control').css('font-family','arial');
}
}
i need that whenever i check this , the upcoming data should be in verdana and the previous should remain same in input box.
Instead of changing the font of whole form class $(.form-control) do it for specific class of checkbox
Update:
add this css
input[type=checkbox]:checked + label {
font-family:'verdana'
}
input[type=checkbox] + label {
font-family:'arial'
}
In your code you seem to be using JQuery, so you can do this:
$("#remember").change(function() {
if ($(this).is(":checked")) {
$(".myText").css("font-family", "Verdana");
} else {
$(".myText").css("font-family", "Arial");
}
});
Here is the JSFiddle demo
I have "contenteditable" div element. I want to set a watermark for it so that when user tries to write something in the div the watermark should go disappear.
I tried some watermark jQuery plugins, all work for input, textarea. What is the way to implement this feature for contenteditable div?
If you by "watermark" mean like a placeholder effect, the concept should be fairly simple:
var mark = 'Watermark',
edited = false;
$('[contenteditable]').focus(function() {
if(!edited) {
$(this).empty();
}
}).blur(function() {
if(!$(this).html()) {
$(this).html(mark);
}
}).keyup(function() {
edited = true;
}).text(mark);
Demo: http://jsfiddle.net/jjxvR/1/
Here's my answer to another question:
It uses a combination of jQuery and CSS3. Works exactly like the html5 placeholder attribute!.
Hides itself right away when you input the first letter
Shows itself again when you delete what you input into it
HTML:
<div class="placeholder" contenteditable="true"></div>
CSS3:
.placeholder:after {
content: "Your placeholder"; /* this is where you assign the place holder */
position: absolute;
top: 10px;
color: #a9a9a9;
}
jQuery:
$('.placeholder').on('input', function(){
if ($(this).text().length > 0) {
$(this).removeClass('placeholder');
} else {
$(this).addClass('placeholder');
}
});
DEMO: http://jsfiddle.net/Tomer123/D78X7/
I solved it this way:
div[contenteditable]:empty:before {
content: '-';
}
div[contenteditable]:focus:before {
color: transparent;
}
I have a little problem adding a class to a span element and so coloring it in order to perform simple validation.
Here is my js:
function validateKey(){
var length = $('#appkey').val().length;
if(length != 8){
$('#appkey').addClass('error');
$('#appKeyInfo').addClass('error');
return false;
}else{
$('#appkey').removeClass('error');
$('#appKeyInfo').removeClass('error');
return true;
}
}
And html:
<label>KEY</label></br>
<input type="text" id="appkey" value=""/></br>
<span id="appKeyInfo">Dein App-Key aus 8 Ziffern</span>
And the jsfiddle: example
Any ideas?
UPDATE: coloring of appKeyInfo fails, coloring appkey works. When I remove color:red and type font-weight:bold instead the text is bold on error. when I remove color definition of appKeyInfo the text can be colored red on error, strange thing, but I need a font color for the appKeyInfo
The declaration for span#appKeyInfo takes precedence since it is an id you are styling.
Try using color:red !important to force the override
Edit
Just a note, you can use multiple selectors in your jQuery. Like this:
$('#appkey', '#appKeyInfo').removeClass('error');
your comparison operator is wrong, use less than operator :
function validateKey(){
var length = $('#appkey').val().length;
if(length < 8){
$('#appkey').addClass('error');
$('#appKeyInfo').addClass('error');
return false;
}else{
$('#appkey').removeClass('error');
$('#appKeyInfo').removeClass('error');
return true;
}
}