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'});
}
);
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 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' />
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
Unfortunately I can not work it out with x-editable...
I´m trying to change a (hprimary) css class on select with x-editable. Here is my jsfiddel: jsfiddel (only with x-editable). Also, i tried It with a normal select button and it is working there. ( jsfiddel2 ) So what do I have to change in x-editable script to make it work?
html:
<div class="hpanel hprimary" id="overview">
</div>
<div><label class="control-label">TEST</label>
<a href="#" id="select" data-type="select" data-pk="1"data-value=""
data-title="" class="editable editable-click" style="color: gray;">not selected</a>
</div>
javascript:
$(function () {
$.fn.editable.defaults.mode = 'popup';
$('#select').editable({
prepend: "not selected",
placement: 'right',
source: [{
value: 1,
text: 'NTP(red)'
}, {
value: 2,
text: 'SUCCESS(green)'
}, {
value: 3,
text: 'OPTION(blue)'
}],
});
});
css:
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px
}
.hpanel.hprimary .panel-body {
border-top: 2px solid #34495e
}
.hpanel.hgreen .panel-body {
border-top: 2px solid #62cb31
}
.hpanel.hblue .panel-body {
border-top: 2px solid #3498db
}
.hpanel.hred .panel-body {
border-top: 2px solid #e74c3c
}
You can use the validate() callback option as described here to be alerted when the user has selected a value.
Based on your example, you would then use a regular expression to extract the color from the text value and add the appropriate class to the hpanel element.
Three elements need to be activated when hovered. These elements are also used in different divs and share the same elements and classes. I am using JavaScript to achieve this.
The problem is when hovering over div 1, it also activates div 2 and 3. Probably because they share the same elements.
How can I activate them individually when hovering?
$(function() {
$(".link")
.hover(
function() {
$(".link").css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function() {
$("link").css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
.box {
width: 300px;
height: 30px;
background: #f1f1f1;
text-align: center;
}
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
View on JSFiddle.
You need to use this to "find" the elements:
$(function () {
$(".link")
.hover(
function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(this).closest(".box").css('border-bottom', '4px solid #183c94');
$(this).next("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
$(this).next("span").css('opacity', '0');
});
});
DEMO
Also in CSS:
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
Should be:
span {
height:10px; width:10px;
background: #c3c3c3;
}
Use the jQuery $(this) key word
$(function () {
$(".link").hover(function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
I updated your fiddle I didnt know how you handle box or span elements on hover.