I am currently trying this logic:
$('input').on('click focusin', function() {
$('.required').hide();
});
But it doesn't seem to be working at all..
This is what the mark-up looks like:
<input type="text" name="Library" id="Library" placeholder="Email Address (again for verification)" data-name="E-mail Address Verification" class="required"/>
the CSS, basically I just want to hide this background image, rather background display none in jQuery / css chaining. or display none to the entire required field... but neither ideologies seem to work.
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}
There is a psuedo class in CSS labelled :focus (as well as a :required and :valid) that allows you to change values for input elements that are in focus.
I have also amended your JavaScript, the issue is that the event you are looking for is simply called focus - you don't even need the click event for this! A focus is always 'into' the element anyhow.
Heres the code:
$('input').on('focus', function() {
$(this).css('border','1px solid red');
});
input:required {
background: url("http://placehold.it/200x200") no-repeat 50% 50%;
}
input:required:focus {
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" name="Library" id="Library" placeholder="Name" required />
You don't need javascript/jquery for this, you could do it with pure css by using the :focus pseudo-class:
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}
.field_holder .required:focus {
background-image: none;
}
Related
Is there a method of using conditionals to apply a style to my input when it is hovered and not active?
use case:
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
I was thinking of the various attributes of an input that are available within Angular such as dirty, touched etc..., but I am not sure of how to use them to this effect?
Any pointers would be great.
Here is a stackblitz with the example html
// This can be used by [ngClass]
.grey {
background: lightgrey;
}
input:hover {
background: lightgrey
}
<form [formGroup]="myForm" (submit)=submit()>
<input formControlName="myInput" type="text">
</form>
Use :not property, this working snippet might helpful to you.
.test:hover:not(:focus)
{
background: #D3D3D3;
}
<input type="text" class="test" />
You can use the :not() pseudo-class
pre {
background: white;
}
pre:hover:not(:active) {
background: lightgrey;
}
<pre>
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
</pre>
Use focus and hover pseudo code.
input:hover {
background-color: lightgray;
}
input:focus:hover {
background: white;
}
<input type="text">
This question already has answers here:
How do I add a "search" button in a text input field?
(7 answers)
Closed 5 years ago.
Here is the HTML form:
<form method="post" action="search.php">
<input type="text" id="inputSearch"/>
</form>
And some CSS:
#inputSearch {
padding:18px 15px 18px 52px;
font-size:1rem;
color:#1f5350;
border:none;
/*defining background image as a search symbol*/
background: #7accc8 url(search.png) 8px 14px no-repeat;
background-size:25px 26px;
}
The search icon is just a static image. Using JavaScript, how can I grab the CSS background-image and use it to create a clickable submit button without adding further HTML code?
You can wrap your search icon in <a></a> tags, that way your image will be clickable and can take the user to the page you want once he clicks on it: Here's an example:
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<img src="search_icon.jpg" alt="search">
</form>
</div>
What you're trying to achieve can't actually be accomplished with raw CSS; you need to use JavaScript and attach a click event handler to the element.
Unfortunately, considering you're making use of background-image, your image is essentially 'part of' the whole <input> element itself, and as far as I'm aware, you can't separate out the click functionality (without making use of a separate element for the image).
Having said that, you can make it so that the form submits when any part of the <input> is clicked on with the following. This can be improved by double-checking that there is actually content entered into the input before allowing the form submission to fire:
var form = document.getElementById('myform');
var input = document.getElementById('itemcd');
input.onclick = function() {
if (this.value.length > 0) {
form.submit();
}
}
#myform {
width: 260px;
margin: 0 auto;
}
input[type="search"] {
padding: 18px 15px 18px 52px;
font-size: 1rem;
color: #1f5350;
/*removing boder from search box*/
border: none;
/*defining background image as a search symbol*/
background-image: url(http://placehold.it/100);
background-repeat: no-repeat;
/*background-size*/
-webkit-background-size: 25px 26px;
-moz-background-size: 25px 26px;
-o-background-size: 25px 26px;
background-size: 25px 26px;
/*positioning background image*/
background-position: 8px 14px;
/*changing background color form white*/
background-color: #7accc8;
outline: 0;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder {
color: #b1e0de;
}
input[type="search"]:-moz-placeholder {
/* Firefox 18- */
color: #b1e0de;
}
input[type="search"]::-moz-placeholder {
/* Firefox 19+ */
color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder {
/* interner explorer*/
color: #b1e0de;
}
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
</form>
</div>
Hope this helps! :)
How to add a loading spinner in the textbox as I start typing in it and once the max-length is achieved a green tick mark will be displayed in the place of loading spinner.
I am doing this in my ionic app.
I have partially tried it, but don't know how to complete it. May be jquery is needed but I don't have much knowledge about that.
Here is my code:
<input id='inputsource' maxlength="10" />
css:
.loadinggif {
background:url('img/ajax-loader.gif') no-repeat right center;
}
.greentick {
background:url('img/greentick.png') no-repeat right center;
}
Maybe you could try this (sinnce I don't have access to your images, I just used border color to indicate state):
$('#inputsource').on('keydown', function() {
$(this).addClass('loadinggif');
})
.on('blur', function() {
$(this).removeClass('loadinggif');
})
.on('keyup', function() {
var $this = $(this);
if ($this.val().length >= 10) {
$this
.removeClass('loadinggif')
.addClass('greentick');
} else {
$this.removeClass('greentick');
}
});
.loadinggif {
background: url('img/ajax-loader.gif') no-repeat right center;
border: 1px solid tomato;
outline: none;
}
.greentick {
background: url('img/greentick.png') no-repeat right center;
border: 1px solid yellowgreen;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputsource' maxlength="10" />
You can't add an image to the actual input so your html might appear as
<input id='inputSource'><div id='inputSourceIndicator'></div>
You will also need to add a function to call with each keypress
<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></div>
Your JS function would be
function myFunc( value ) {
// do check of whatever
// if check is false
// change the class of the indicator
document.getElementById('inputSourceIndicator').className = "loadinggif";
// otherwise show the other class
document.getElementById('inputSourceIndicator').className = "greentick";
Your css would also need to include
#inputSourceIndicator {
width: 16px;
height: 16px;
display: inline-block;
}
Or something along those lines :-)
I have a great bit of code that sets the label to 0.5 opacity when the input field is on focus. Now, I'd like to set this to 0 (100% invisibility) if possible.
Can someone help out with this?
Here's my fiddle: http://jsfiddle.net/d8Apy/5/
My HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
My CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
I am using this jQuery plugin: http://fuelyourcoding.com/in-field-labels/
Many thanks for any pointers :-)
There is a line of code in the in-field-labels code that says...
$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};
Change this to...
$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};
fadeOpacity:0.5 to fadeOpacity:0.0
When you apply the plugin to your lables you can set the opacity by passing in an options object like so:
$("label").inFieldLabels({ fadeOpacity:0.0 });
Javascript
$(document).ready(function() {
$("#name").focus(function(){
$('#lblname').css({'opacity':'0'});
});
});
EDIT for fade effect
$(document).ready(function() {
$("#name").focus(function(){
$("#lblname").animate({ 'opacity':'0'},350);
});
});
HTML
<div class="fieldgroup">
<label for="name" id="lblname">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
There is an html property called placeholder that does that. I'm not sure however that you can apply a fade effect to it. edit: It might be possible with css transitions and this: Change an HTML5 input's placeholder color with CSS, but it's rather horrible.
<input type="text" name="fname" placeholder="First name">
input[name:fname]:active {
color: green
}
While not implemented by every plugin developer, good practice advocates a plugin accepting an options object. While not terribly clear, you are able to override the fadeOpacity and fadeDuration options.
To solve your issue, simply pass in an options object that specifies the fadeOpacity like so:
$(document).ready(function(){
$('label').inFieldLabels({fadeOpacity: 0.0});
});
I have a basic function that when no answer is clicked it shows an error message in
the div id "error". this works fine but when i have a background colour and image is shows the style on the div. i'm using jquery and moo tools,
Is there a way to hide this style until the answer is set.
<style type="text/css>
#error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
</style>
<div id="error"></div>
<script type="text/javascript>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>')
}
function clearErrorBox() {
$('error').set('html','');
}
</script>
Hide the div initially and show in showAnswerAlert or where ever you need
<div id="error" style="display:none"></div>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>');
$('error').show();
}
or hide error div on document ready
$(function(){
$('error').hide();
});
the reason why hide() and show() dont work is because those ase jQuery functions, if you're using mootools, and would like to use "hide()" and "show()" you need to write functions like so:
window.addEvent('domready', function() {
Element.implement({
//implement show
show: function() {
this.setStyle('display','');
},
hide: function() {
this.setStyle('display','none');
}
});
});
or you can do this to show:
$('error').setStyle('display','block');
and this to hide:
$('error').setStyle('display','none');
Sounds like this is a validation on a select item.
Validation can be done in many ways buti suggest you look t HTML5 valiations, this might be all you need:
http://diveintohtml5.info/forms.html