I am in pursuit of implementing images as checkboxes. For now I am trying out a sample.
The code below contains a simple image with a submit button next to it. On clicking the submit button I want the image to develop a border around it and on clicking the submit button, I want the checkbox value to be passed.
<html>
<script>
$(document).ready(function() {
$('#blr').click(
function(){
$('#blr').css('border', 'solid 2px red');
$('#imgCheck').attr('checked', 'checked');
},
function(){
$('#blr').css('border', 'none');
$('#imgCheck').removeAttr('checked');
}
);
});
</script>
<form id="form1">
<img src="icons/blr.jpg" title="blr" id="blr" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
<input type="submit" value="Submit" />
</form>
</html>
I am relatively new to Jquery and I am not able to figure out where am I going wrong. Any help will be greatly appreciated.
Thanks in advance :)
Here is the solution of your question. I hope this will help you.
CSS
.checked {border:solid 2px red}
HTML Code
<form id="form1">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" />
<input type="submit" value="Submit" />
</form>
jQuery Code
$(document).ready(function() {
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
});
Working Example : Demo
Actually using image as checkbox can be done with HTML & CSS ONLY!
The trick is to style a <label> element (make it an image) and add it a for="checkboxid" parameter - then just make a <checkbox> with a proper id="checkboxid" and hide it. When you click on label => the checkbox gets (un)checked. Also the usage of :checked and + selector is good if you want to change label image on checked / unchecked.
HTML
<input id="checkboxid" type="checkbox" class="css-checkbox">
<label for="checkboxid" class="css-label"></label>
CSS
input[type=checkbox].css-checkbox{ display: none; }
.css-label{
display: inline-block;
padding-left:20px;
height:15px;
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
background-repeat: no-repeat;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
Fiddle - edited/simplified: http://jsfiddle.net/bdTX2/
Example took from: http://www.csscheckbox.com/
Click doesn't work like that, you can't toggle two functions. You must use an if statement like this
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
if (!chk.checked) {
$(this).css('border', 'solid 2px red');
$('#imgCheck').prop('checked', true);
} else {
$(this).css('border', 'none');
$('#imgCheck').prop('checked', false);
}
});
DEMO
You could shorten the code even more like this
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
$(this).css('border', !chk.checked?'solid 2px red':'none');
$('#imgCheck').prop('checked', !chk.checked);
});
DEMO
The click Function doesn't work like what your thinking.... the way you are looking for is for Toggle Try this ..I think This Will help ..Cheers
$('#blr').toggle(function () {
$("#blr").css('border', 'solid 2px red');
$('#imgCheck').prop('checked', false);
}, function () {
$('#blr').css('border', 'none');
$('#imgCheck').prop('checked', true);
});
$('#blr').on('click', function(e) {
var $this = $(this),
$imgCheck = $(this).next().attr('checked'),
border_styles = ['solid 2px red', 'none']
is_checked = $imgCheck.attr('checked');
$this.css('border', border_styles[is_checked]);
$imgCheck.attr('checked', !is_checked);
})
Another Solution for CSS-Only
Use -webkit-apperance: none to 'hide' the original checkbox, and then style it as you want.
To style, when checkbox is checked, simple use this pseudo code: input[type="checkbox"]:checked
HTML
<input type="checkbox">
CSS
input[type="checkbox"] {
-webkit-appearance: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
outline: none;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: url(http://2012.igem.org/wiki/images/7/79/Small-checkmark.png) center no-repeat;
}
Demo Fiddle
Related
I can get the follow code to work like I want it to with one exception.
When I select the checkbox the background color of the div changes from #fff to #ffe600 as it should. The problem I'm running into is when the form is submitted and page is refreshed the background color reverts back to #fff. I would like for the back ground color to stay #ffe600 when the page is refreshed after the form has been submitted. The checkbox remains checked after page refresh but the div background color reverts back to #fff. Does anyone know if it's possible to maintain the div background color #ffe600 when the page is refreshed. This has really gotten be stumped.
function myFunction(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#ffe600';
} else {
x.style.backgroundColor = '#fff';
}
}
#product1 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
<label class="chk">
<input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>
Thanks!
One option is to check on load with jquery and then highlight the currently checked boxes.
$('input[type=checkbox]').each(function(){
if($(this).is(':checked'))
$(this).parent().parent().css('backgroundColor','#ffe600');
else
$(this).parent().parent().css('backgroundColor','#fff');
});
function myFunction(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#ffe600';
} else {
x.style.backgroundColor = '#fff';
}
}
#product1 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
#product2 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
<label class="chk">
<input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>
<div id="product2">
<label class="chk">
<input checked type="checkbox" onChange="myFunction(product2, this)" name="select_product2" value="V" />Label goes here 2.</label>
</div>
Is there a need to actually refresh the page? It looks like you're using AJAX.
Do you use a function to handle the submit of the form? Cause then you could do the following to prevent the page from reloading
<form onsubmit="submitFunction(event)">
// form elements
</form>
And the JavaScript part like the following
function submitFunction(event) {
event.preventDefault();
// form data processing
}
The event.preventDefault() will keep the page from reloading which should keep the background color of your element.
You can use localstorage or Cookie to store the state of checkbox and later when page loads you can get the state from them or else you can do the same check as in myFunction when page loads as below :
window.onload = function(){
var checkBoxEle = document.querySelector("div#product1 input[type='checkbox']");
var productEle = document.getElementById("product1");
if (checkBoxEle.checked) {
productEle.style.backgroundColor = '#ffe600';
} else {
productEle.style.backgroundColor = '#fff';
}
You can make a function using jquery that can be used for checkbox validation and formatting when the document is loaded and when the checkbox is clicked.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var setColor = function(){
if($("#select_product").is(":checked")) $("#product1").css("background-color", "#ffe600");
else $("#product1").css("background-color", "#fff");
}
$(document).ready(function(){
setColor();
$("#select_product").click(setColor);
});
</script>
<div id="product1">
<label class="chk">
<input type="checkbox" id="select_product" value="Y">Label goes here.</label>
</div>
</body>
</html>
I am just working on my new webspace and I have a small problem.
I know have to input tags with an onclick function
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
</script>
When I click on the first input the border appears as I want but when I click on the other input the border of the first input tag is still there.
So how can I let the function only work when it's only clicked on the input tag itself and not when another input is clicked as well
Thanking you in anticipation
Just use CSS's :focus pseudo class:
input:focus {
border-bottom:3px solid red;
}
<input type="text">
<input type="text">
MDN Docs
You can easily use CSS Focus selector. input:focus
input:focus {
background-color: yellow;
border-bottom:3px solid white;
}
<div><input type="text"></div>
<br/>
<div><input type="text"></div>
Before you add style to this specific element you can remove style of all inputs or something like this:
function mark( el ) {
var input = document.getElementsByTagName("input");
for(var i =0;input.length>i;i++){
input[i].removeAttribute("style");
}
el.style.borderBottom= "3px solid white";
}
Here is what I would do. First, create a mark and an unmark functions. Then trigger the mark function at "onmousedown" and unmark at "onmouseup" event. Therefore, this border will only be shown when you have the mouse button pressed.
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
function unmark( el ) {
el.style.borderBottom= "none";
}
</script>
I'm trying to change the text and color of a button when the user clicks it.
I am trying to change the text from "Search" to "Close".
I have attempted to code it, and have posted what I tried in jsfiddle.
now another problem is I can't figure out why jsfiddle isn't running the code, haha, but maybe someone can figure it out regardless of the jsfiddle glitches.
Without further ado, my code...
HTML:
<form>
<p>
<button class="btn submit" type="submit" onClick="changeHeight();">Search</button>
<button class="btn cancel" onClick="changeHeight2();">Reset</button>
<div id="SearchDiv">Here I am</div>
</p>
</form>
CSS
p{
text-align:center;
background-color: rgb(222,222,222);
}
.btn{
margin-top:10px;
margin-bottom:10px;
font-size: 22px;
color:rgb(255,255,255);
width: 150px;
height: 60px;
outline: none;
border-radius:5px;
border:0;
}
.submit{
background-color: rgb(44,228,191);
}
.submit:hover{
background-color: rgb(24, 188, 156)!important;
}
.submit:active{
background-color: rgb(15,121,100)!important;
}
.cancel{
background-color: rgb(244,123,130);
}
.cancel:hover{
background-color: rgb(237,28,36)!important;
}
.cancel:active{
background-color: rgb(154,12,19)!important;
}
#SearchDiv {
background-color:purple;
height:50px;
display:none;
}
JS
function changeHeight() {
$('#SearchDiv').fadeIn(500);
}
function changeHeight2() {
$('#SearchDiv').fadeOut(200);
}
http://jsfiddle.net/fdkzp9dm/8/
You have a couple of things you need to change:
You need to change the fiddle from onload to No wrap in <body> as #Shaunak correctly commented.
You need to pass the element if you're not selecting it in the function. So you either do onClick="changeHeight($(this))" or inside the JS function you do $(el).
You need to check for el.text() == "Search" and to set using el.text("Close"), since you're checking the text inside and not a value attribute if you're doing el.value (that returns undefined for your example).
The last glitch is because the button is of type submit, and whenever clicking it the request failed and it overwritten the HTML.
So, basically:
function changeHeight(el) {
$('#SearchDiv').fadeToggle(500);
if (el.text()=="Search") {
el.text("Close");
}
else {
el.text("Search");
}
}
Fiddle
Using thecss and the text jquery's attributes will do the work:
$(document).ready(function() {
$('#button_id').click(function(){
$(this).text('another text')
$(this).css('height', '100px')
})
})
Here's a demo
Change your button like:
<button class="btn submit" type="submit" onClick="changeHeight($(this), $('#SearchDiv'));">Search</button>
Change your javascript function like so:
function changeHeight(btn, div)
{
if (div.is(":visible") )
{
btn.val("Search").css("color", "#ffffff"); // Color: White
div.fadeOut(500);
}
else
{
btn.val("Close").css("color", "#000000"); // Color: Black
div.fadeIn(500);
}
}
I tried to make script which changes color of border-bottom of div after having focus on
<input type="text">
and then changing back to default color after clicking somewhere else.
This is what i tried:
Css:
.div1 {border-bottom:1px solid #ccc;}
Javacript:
function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };
Html:
<input type="text" onFocus="inputFocus();">
The first part (changing color on focus) works fine, however after clicking somewhere else (not having focus on input) it doesnt change back to normal style as set in css file.
any idea what im doing wrong?
I'd suggest:
$('input').focus(
function(){
$(this).css('border-bottom','1px solid #000');
}).blur(
function(){
$(this).css('border-bottom','1px solid #ccc');
});
JS Fiddle demo.
Though if you're amenable to CSS:
input:focus,
input:active {
border-bottom: 1px solid #000;
}
JS Fiddle demo.
$('input').focus(function(){
$(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
$(this).css('border-bottom-color','#ccc');
});
You shold add a function to onBlur event to rollback your change
You have to use onBlur event.
JavaScript:
function inputBlur() {
$(".div1").css("border-bottom","1px solid #ccc");
}
HTML:
<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">
However, the better option will be using class toggling.
HTML:
<input type="text" class="myinput">
CSS:
.myinput {
border-bottom:1px solid #ccc;
}
.myinput.active {
border-bottom:1px solid #ffba00;
}
JavaScript:
$(function() {
$(".myinput").on("focus", function() {
$(this).addClass("active");
}).on("blur", function() {
$(this).removeClass("active");
});
});
instead of calling a function in html you can try this:
.border {border-bottom:1px solid #ccc;}
$("input[type='text']").focus(function(){
$(this).addClass("border")
})
$("input[type='text']").blur(function(){
$(this).removeClass("border");
})
this happens because the changed css is not reverted after losing focus from control.
This would help:
<input type="text" onFocus="inputFocus();" onblur="inputBlur();">
function inputFocus(){ $(".div1").removeAttr('style'); };
You shouldn't be using JavaScript to do this. CSS has a :focus selector that is much more appropriate for this.
.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}
I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.
I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.
This is the code:
onload=function(){
var inp=document.getElementsByTagName('input'), i=0, t ;
while(t==inp[i++]){
if(t.type=='text'){
t.onclick=function(){this.style.border='1px solid red'}
}
}
}
</script>
Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?
If its not too hard could explain how to do it or show me some example code?
Cheers - Cohen.
Yes this can be done using CSS pseudo-classes
Here is an example:
<style>
.fancyText:hover{border:1px solid red;}
.fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />
#Aaron is right, and you may visit w3school for css learning,
if you want it using java-script you only need function onFocus, onBlur and access the text box via id
function change()
{
var a = document.getElementById('fansy');
a.style.border = '1px solid red';
}
Why dont use jQuery to make it simpler?
$(document).ready(function(){
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
});
Then you'll get multi browser support also....
Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
to include the jquery-file.
If you replace this
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
with this
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
});
you will automatic get the inputs with attr. type = text.
Here is more fact about jQuery attr selecting
#myTextarea {
border: 2px solid black;
}
#myTextarea:focus {
border-color: red;
outline: none;
}
In the HTML, the textarea element is given an ID of "myTextarea". In the CSS, the #myTextarea selector sets the initial border color to black and the #myTextarea:focus selector changes the border color to red when the textarea is clicked on and has focus. The outline: none; is added to remove the default outline that appears when the textarea is in focus.