I want to apply 4 effects on an element:
On hovering over the element.
On hovering away from the element.
On focusing on the element.
On blur.
But there is a conflict happens , When I focus on the element the hover in and out runs , and when I click outside the element the effect that should happens on blur doesn't happen , I think it's because of the hover out.
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
On hovering in the border color turns green , on hovering out it turns grey.
But on focusing on the input the color is grey not green, and in blur it's grey too not red.
The issue is due to the logic in your if condition. el.val returns the reference of the function, which will never equate to an empty string. You need to use el.val() instead to get the actual value of the control:
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val() == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
That being said I would suggest combining CSS rules with this where possible, and definitely using classes over joining the styling rules with the JS code so tightly. Something like this:
var el = $('input');
el.blur(function() {
$(this).toggleClass('empty', $(this).val().trim() === '');
});
input {
outline: 0;
border: 2px solid grey;
}
input:hover,
input:focus {
border: 2px solid green;
}
input.empty {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
Related
From jquery ui draggable internally it fires blur event so I am unable to set border to the container. Is there anything I am missing? How can I set border on select of the draggable element. I am trying to add border on select(on mouse down).
$("#draggable").draggable();
$("#draggable").on('focus', function() {
$(this).css('border', '1px solid')
}).blur(function() {
$(this).css('border', '')
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content" tabIndex = -1>
<p>Drag me around</p>
</div>
You can either use the class added when dragging .ui-draggable-dragging or add your own class using the start and stop events.
$("#draggable").draggable({
start: function(event, ui) {
ui.helper.addClass('active');
},
stop: function(event, ui) {
ui.helper.removeClass('active');
}
});
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
.ui-draggable-dragging {
border: 3px solid red;
}
.active {
outline: 3px dashed yellow;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable">Drag me</div>
Use dragstart and dragstop events. Here is the reference for documentation https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
$("#draggable").on('dragstart', function() {
$(this).css('border', '1px solid')
}).on("dragstop",function() {
$(this).css('border', '0')
});
Use mousedown to add border before dragging starts
$("#draggable").on('mousedown', function() {
$(this).css('border', '1px solid')
}).on("dragstop",function() {
$(this).css('border', '0')
});
You could simply add a new css class that specifies what it should look like when active:
#draggable:active {
border: 1px solid;
}
I'm learning some Javascript, which I'm incorporating into another project. I have some input fields with maxlength set at 20. They currently have a border set to them via CSS:
.textInput:focus {
border: 2px solid green;
}
I'd like for the border of the input fields to go red when the user hits the maxlength limit - this part I've achieved:
$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
document.getElementById('newsTitle').style.borderColor = "red";
}
});
However, if the user is to delete some text, or backspace, I'd like the border to go BACK to green. Could someone give me some pointers on how to do this?
If theres a more efficient way to achieve what I have so far, do tell me. I feel my approach is a bit bulky and that theres no need to give the element ID twice if its within an if statement, which applies to the element ID in question.
Cheers,
Jack
I would actually do it like this:
$(function() {
$("#newsTitle").keydown(function() {
$(this).toggleClass('invalid', $(this).val().length >= 20);
});
});
.textInput:focus {
border: 2px solid green;
}
.textInput.invalid,
.textInput.invalid:focus {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textInput" id="newsTitle">
$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
$(this)[0].style.borderColor = "red";
} else {
$(this)[0].style.borderColor = "green";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">
You can try this code
$("#newsTitle").keypress(function() {
if($(this).val().length >= 20) {
$(this).removeClass("valid");
$(this).addClass("invalid");
} else {
$(this).addClass("valid");
$(this).removeClass("invalid");
}
});
.invalid {
border: 2px solid red;
}
.valid {
border: 2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">
In my code, when you mouseover elements, a red border will appear around them. When you mouseout, the border is removed.
As you can see, when you do mousoevers, the elements are jumping around as the border adds width and height to it.
Is there a way to prevent the jumping around?
document.addEventListener("mouseover", eOnMouseOver, true);
document.addEventListener("mouseout", eOnMouseOut, true);
function eOnMouseOver(e) {
e.target.style.border = "2px solid red";
}
function eOnMouseOut(e) {
e.target.style.border = "";
}
<div style="border:1px black solid;">Mouseover me</div>
Mouseover me
Yes, there is. You must use box-sizing: borde-box together with vendor prefixes to achieve this. Here is what I mean:
document.addEventListener("mouseover", eOnMouseOver, true);
document.addEventListener("mouseout", eOnMouseOut, true);
function eOnMouseOver(e) {
e.target.style.outline = "2px solid red";
}
function eOnMouseOut(e) {
e.target.style.outline = "";
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
<div style="border:1px black solid;">Mouseover me</div>
Mouseover me
However, you do not need to use javascript in this case. Use CSS pseudo-classes instead, like this:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-sizing: border-box;
-ms-sizing: border-box;
-o-sizing: border-box;
}
*:hover {
outline: 2px solid red;
}
<div style="border:1px black solid;">Mouseover me</div>
Mouseover me
How about using a box shadow instead? It does not influence your layout, is purely visual and keeps the border property of your div intact:
document.addEventListener("mouseover", eOnMouseOver, true);
document.addEventListener("mouseout", eOnMouseOut, true);
function eOnMouseOver(e) {
e.target.style.boxShadow = "0 0 0 2px red";
}
function eOnMouseOut(e) {
e.target.style.boxShadow = "none";
}
<div style="border:1px black solid;">Mouseover me</div>
Mouseover me
assign a transparent border, when mouse over add color to the border
div,
a {
border: 1px solid transparent;
}
div:hover,
a:hover {
border-color: red;
}
<div>Mouseover me</div>
Mouseover me
function eOnMouseOver(e) {
e.target.style.border = "2px solid red";
e.target.style.marginLeft = "-2px";
e.target.style.marginTop = "-2px";
}
function eOnMouseOut(e) {
e.target.style.border = "";
e.target.style.marginLeft = "";
e.target.style.marginTop = "";
}
Try that. The margin offset should pull the element up and left by the 2px your border is pushing, theoretically keeping the element stable. Untested.
EDIT: Another solution would be to do the following...
function eOnMouseOver(e) {
e.target.style.border = "2px solid red";
}
function eOnMouseOut(e) {
e.target.style.border = "2px solid transparent";
}
Then simply apply the border in the eOnMouseOut(e) function to the base element so it doesn't bounce on the first mouseOver.
I've tried this construction:
field.animate({border: '1px solid rgb(173, 26, 26)'}, 3000, function() {
$(this).css('border', 'none');
});
but
border: '1px solid rgb(173, 26, 26)'
don't work.
What i'm doing wrong?
Edit: As mentioned by #showdev, colors cannot be animated only using jQuery. You either need a plugin like jQuery UI, or to use CSS transitions.
You need to modify each property separately:
$('div').animate({
borderWidth: '1px',
borderColor: 'rgb(173, 26, 26)'
}, 2000, function() {
$(this).css('border', 'none');
});
div{
border: 20px solid green;
padding: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
Please try this
var intervalID = setInterval(function() {
$('input').removeClass('red').css('border','none');
}, 3000);
DEMO
I am trying to select a image inside a link.
JQUERY:
$('#selskaber img').hover(function () {
$(this).next().css({'border' : '1px solid #0167B0 !important'});
},
function () {
$(this).next().css({'border' : '1px solid #CCCCCC !important'});
}
);
HTML:
<div id="selskaber">
<a target="_blank" href="#">
<img style="border:none;" src="/images.pmg" alt="Telenor">
</a>
</div>
UPDATE:
I have removed the next(). Still no border is added.
My CSS:
#wrap #selskaber a {border:none;margin-left:10px;display:inline-block !important;
height: 41px;
margin-top: 5px;
width: 150px;}
Um... why are you using Javascript here?
#selskaber a img{
border:1px solid #ccc;
}
#selkskaber a:hover img{
border: 1px solid #0167B0;
}
will do exactly the same thing, and be compatable down to IE6 with no JS required.
That image doesn't have any sibling, so next won't give you anything.
If you're trying to select the img, just remove the next()
$('#selskaber img').hover(function () {
$(this).css({'border' : '1px solid #0167B0 !important'});
},
function () {
$(this).css({'border' : '1px solid #CCCCCC !important'});
}
);
next:
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Your selector '#selskaber img' already gives you the image. So inside the hover callbacks if you need the image $(this) will suffice. No need to call next:
$('#selskaber img').hover(function () {
$(this).css({'border' : '1px solid #0167B0 !important'});
},
function () {
$(this).css({'border' : '1px solid #CCCCCC !important'});
});
Remove next(), you already selected the img tag:
$('#selskaber img').hover(function () {
$(this).css({'border' : '1px solid #0167B0 !important'});
},
function () {
$(this).css({'border' : '1px solid #CCCCCC !important'});
}
);
$(this) inside your functions is the <img>. $(this).next() is nothing, so just remove the call to next().
There's no node after the img element. The $(this) context is relative to the img element that it is hovering over. Try removing next().
$('#selskaber img').hover(function () {
$(this).css({'border' : '1px solid #0167B0 !important'});
},
function () {
$(this).css({'border' : '1px solid #CCCCCC !important'});
}
);