I want to change the color of the input element that is in focus.
I've tried with this but it doesn't seem to be working.
HTML
<li>
<input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Number}}">
</li>
<li>
<input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Priority}}">
</li>
JS
function changeColor() {
$(this).style.backgroundColor = "red";
};
function removeColor() {
$(this).style.backgroundColor = "white";
};
You only need CSS for this:
input:focus {
background-color: yellow;
}
I'm sure it was just a quick example, but be aware you have two matching ID's in your code. I guess in fact you might want to go with classes
input.yellow:focus { background-color: yellow; }
input.pink:focus { background-color: pink; }
For example
You can use
input:hover{
background-color:#ff00ff;
}
js Fiddle example
If you want to do this with jQuery, you could use the css() method:
function changeColor() {
$(this).css({"background-color":"red"});
}
function removeColor() {
$(this).css({"background-color":"white"});
}
A better way would to do this would be to use a combination of CSS / jQuery:
CSS:
.colored {
background-color: red;
}
:not(.colored) {
background-color: white;
}
JavaScript:
var colorClass = "colored";
function changeColor() {
$(this).addClass(colorClass);
}
function removeColor() {
$(this).removeClass(colorClass);
}
I prefer have a single class as a toggle. The advantage of this is you can update and change the styling as much as you want in the CSS without having to change your JavaScript. This is a good separation of concerns. In addition, you could style child elements and have them inherit the toggled state.
first pass this in onfocus. then change $(this).style.backgroundColor = "red"; to $(temp).css("backgroundColor", "red");
also use onblur' notonfocusout`
function changeColor(temp) {
$(temp).css("backgroundColor", "red");
};
function removeColor(temp) {
$(temp).css("backgroundColor", "white");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><input id="text1" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
<li><input id="text" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
</ul>
Hope this help
TLDR; You can do this without jQuery
CSS selector
input {
background-color: white;
}
input:focus {
background-color: red;
}
if with jQuery
$('input').focus(function() {
$(this).css('background', 'red');
});
$('input').focusout(function() {
$(this).css('background', 'white');
});
JQUERY: SNIPPET
$('input').focus(function() {
$(this).css('background', 'red');
});
$('input').focusout(function() {
$(this).css('background', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
Related
I'm trying to add a class to a element when mouse hovers over it and then remove it when mouse leaves. It works currently only with giving it direct style in js.
As shown below I tried various ways to do this, all had some problems. Only the direct style change worked. On mouse leave I do the same but remove the class. The mouse over and leave checks canvas element.
poly.on('mouseover', function () {
this.opacity(1);
layer.draw();
$('.' + this.name()).css({ backgroundColor: "#ffcc00" });
//$('.' + this.name()).classList.add("textboxhighlight");
//$('.' + this.name()).className += " textboxhighlight";
//$('.' + this.name()).addClass("textboxhighlight");
//$('.' + this.name()).setAttribute("class", "textboxhighlight");
});
I'm not sure what the problem is as I tired various methods in adding class all of them with different problems. Using just this.addClass wont work as it needs to start with $('.' + this.name()) or nothing works in the code not even forcing the style part. $('.' + this.name()) refers to a class name in element with the same name as poly.
In css:
.textboxhighlight {
background-color: #ffcc00;
}
Thanks for any help.
May be you have to use in your css class background-color: #red !important. See working example here
It would be easier if you provided more code to work with. The example below will illustrate on how to add a class on hover and remove a class on leaving the element.
$('#element').hover(function(e) {
$(this).addClass('selected');
}, function(a) {
$(this).removeClass('selected');
});
.selected {
background-color: green;
}
<div id='element'>
element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Hard to say what is wrong with your code when you don't show the mouseenter/leave parts of your code. But here is an example with classes:
https://codepen.io/andeersg/pen/MOGqPQ
$('.el').mouseenter(function() {
$(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
$(this).removeClass('el-hover');
});
You can use toggleClass on hover event
$(".hoverclass").hover(function () {
$(this).toggleClass("hoverclass_toggle");
});
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.hoverclass_toggle {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1"> <i class="icon"></i>Test</div>
</div>
<div>
Otherwise you can do that type :
$(".hoverclass").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1">
<i class="icon"></i>Test
</div>
</div>
<div>
I need to change the color of my anchor element from black to white while the enclosing div is clicked.
code:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(".functionHyperlink").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view">
</div>
</div>
To achieve this you can use toggleClass() to add/remove a pre-defined CSS rule you apply to the .settings-list-container element. This class can then be set to affect the child .functionHyperlink element, something like this:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(this).toggleClass('active');
});
});
.functionHyperlink {
color: #000;
}
.settings-list-container.active .functionHyperlink {
background-color: #F00;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view"></div>
</div>
If you only want the colour to be added once, change toggleClass() to addClass().
A possibility is to use angular.element() and css selector
angular.element('.functionHyperlink').css('color', '#fff');
If I understand you correctly, you only want to achieve the color change while clicking. You could try so with pure CSS like this.
.settings-list-container:active .functionHyperlink {
color: white;
}
Or you could go by jQuery and add a class while clicking the div:
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).bind('mousedown', function() {
$(this).find('.functionHyperlink').addClass('inverted');
}).bind('mouseup', function() {
$(this).find('.functionHyperlink').removeClass('inverted');
});
});
});
.functionHyperlink.inverted {
color: white;
}
If you want the element to stay inverted, use the following jQuery instead.
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).click(function(e) {
e.preventDefault();
$(this).find('.functionHyperlink').toggleClass('inverted');
});
});
});
When a user mouses over a div it should change to the color red, when they mouse out it should change back to transparent. When they click on the div, it should change to color red.
For some reason, the mouse out event listener is conflicting with the click event listener. Can someone help? When I click on the div, it doesn't change to red.
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
$(this).css('background-color', 'white');
});
div$.on('click', function () {
$(this).css('background-color', 'red');
});
Note, I have to apply a background image dynamically to each element, so using CSS classes to add the background image is out of the question (because I don't know it before hand).
You could set a boolean variable to confirm that the click has occurred and then only run the mouseout code if the variable is false like this:
var is_clicked = false;
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
if(!is_clicked) {
$(this).css('background-color', 'white');
}
});
div$.on('click', function () {
$(this).css('background-color', 'red');
is_clicked = true;
});
Note: For multiple div elements user multiple is_clicked variables
You can always do a CSS implementation with :hover; just make sure to add a specifying class to each element you would like this effect on.
1. :hover and jQuery
var div$ = $('.redHover'); // name the class whatever you like
div$.on('click', function () {
$(this).css('background-color', 'red');
});
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>
2. :hover and vanilla JS
var els = document.querySelectorAll('.redHover');
for (var i = 0; i < els.length; ++i) {
els[i].addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
}
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>
Instead use mouseenter insead of mouseover see why.
The best thing you can go with would be the following notes:
To those elements with hover effect add a class like hoverable.
Hover effect is only applied to those elements having this class.
HTML:
<div class="hoverable"></div>
CSS:
.hoverable:hover{
background-color: red
}
JavaScript:
div$.on('click', function () {
$(this).css('background-color', 'red');
});
In this way, you can simply decide whether an element should be hover-able or not by adding or removing hoverable class. Also hover effect is applied in CSS level not JavaScript, which is more acceptable.
As far as I understand you really want to change picture in the div, not just background color which is relatively easy. Try this:
<div class="hoverable">
<img src="myImg.jpg" />
</div>
//css
.hoverable img{visibility:hidden;}
.hoverable:hover img{visibility:visible;}
.clicked img{visibility:visible!important;}
//JS
$('.hoverable').click(function(){
$(this).addClass('clicked');
});
I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks
Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});
You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...
jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");
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