We Keep Coding

Add border to jquery draggable element on focus

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;
}

Use jQuery to animate the re-position of DIV's after fadeOut (fiddle)?

To get a better idea of what I'm trying to do, I have this fiddle:
https://jsfiddle.net/tfisher9180/7efagjhj/1/
When you click the button 3 squares fade out, and then afterwards the orange square immediately snaps up because of the absence of the others.
I want to know if there's a way to animate that to look more fluid so that the orange box slides up as well.
.square {transition: all 0.3s linear;}
This did not work as I expected.
UPDATE:
Marking #anied as correct answer for working with me a bit and helping to fix positioning. Everyone's solutions were awesome though and worked nicely. +1 for all and will have to try out a few to see which looks best!!!

So, the problem with using a CSS transition here is that there is no CSS property of the orange box that is changing when the boxes around it disappear-- it is simply reflowing to the new position in the DOM based on the change the display property of these other boxes. I think if you want this to work you will have to write a custom bit of jQuery code that fades the boxes out but doesn't immediately hide them, but instead slides them up and out of sight.
Try something like this:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity' : 0}, 400, 'swing', function () {
$(this).slideUp();
});
}
});
});
edit:
Regarding the skip-- not really sure exactly, but I tried replacing the slideUp with a custom replacement and it seemed to resolve it:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height': 0}, 400, 'swing');
});
}
});
});
edit (again): actually, looking now I see that one problem is that the top .row still is retaining height after the boxes within slide-up.... you might need to slide that up as well, depending on your requirements..
edit:
OK, last time, fixed your positioning a bit-- I think this works:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height' : 0}, 400, 'swing');
});
}
});
});
.clearfix:after {
content: "";
display: table;
clear: both;
}
.row {
display: block;
clear: both;
}
.square {
width: 60px;
height: 60px;
display: block;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row row-top clearfix">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row row-bottom clearfix">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>

Use this jquery:
$('#sort').on('click', function() {
$("row").eq(0).css("min-height",$(".square-red").height()+"px");
$(".square:not(.square-orange)").fadeOut().slideUp();
$(".square-red").parent().slideUp();});

Try This:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({
opacity: 0
}, 500, function() {
$(this).slideUp(100);
});
}
});
});
https://jsfiddle.net/7efagjhj/7/

You can set the position of .square-orange and #sort to absolute and set top .position().top before .fadeOut() begins, use .promise(), .animate() to animate .square-orange when .square:not(.square-orange) elements animation completes
$('#sort').on('click', function() {
$(this).add(".square-orange")
.each(function() {
$(this).css({
"position": "absolute",
top: $(this).position().top
})
})
$('.square:not(.square-orange)').each(function() {
$(this).fadeOut();
})
.promise()
.then(function() {
$(".square-orange")
.animate({
top: 20
}, 1000, "linear")
})
});
.square {
width: 60px;
height: 60px;
display: inline-block;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>
jsfiddle https://jsfiddle.net/7efagjhj/8/

jquery run when div id has a class

I have the following code which currently runs when #a-div has focus
jQuery(document).ready(function(){
jQuery('#a-div').focus(function(){
if ( $( "#tab3" ).is( ".tab-pane.active" ) ) {
$( "#another-div" ).hide();
}
});
});
But instead id like it to run when #tab3 has the following class .tab-pane.active
jQuery(document).ready(function(){
jQuery('#tab3').is( ".tab-pane.active" )(function(){
$( "#another-div" ).hide();
});
});
But I haven't got the correct syntax.
Any help would be very much appreciated, many thanks in advance!

To get your code working on document ready:
jQuery(document).ready(function(){
if(jQuery('#tab3').is( ".tab-pane.active" )){
$( "#another-div" ).hide();
}
});

This snippet is using only jQuery and no external libraries. But it serves to show you how to do this.
Just add a click event handler on the class tab-pane and check if the clicked element has the class active.
The other code in this snippet just mimics the tab's switching classes. Every time a class has been clicked, it'll toggle the div with class output
I hope this is what you are searching for.
$(".tab-pane").click(function() {
//Ignore this code, since it's mimicking the change of tabs
changeTab($(this));
var tab = parseInt($(this).data("tab"));
switch(tab)
{
case 1:
$(".output").css("border", "2px dashed red");
break;
case 2:
$(".output").css("border", "2px dotted blue");
break;
default:
case 3:
$(".output").css("border", "2px solid black");
break;
}
$("#tabnr").html(tab);
});
function changeTab(pEl)
{
$(".tab-pane").each(function() {
$(this).removeClass("active");
});
pEl.addClass("active");
}
.tab-pane {
height: 100px;
width: 200px;
border: 2px solid black;
background-color: lightblue;
float: left;
margin-left: 15px;
}
.first {
border: 2px dashed red;
}
.second {
border: 2px dotted blue;
}
.active {
background-color: beige;
}
.clearfix {
clear: both;
}
.output {
width: 100%;
height: 50%;
background-color: lightgreen;
margin-top: 30px;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane first" data-tab="1">
Tab 1
</div>
<div class="tab-pane second" data-tab="2">
Tab 2
</div>
<div class="tab-pane active" data-tab="3">
Tab 3
</div>
<div class="clearfix"></div>
<div class="output">
This output is altered by clicking on the tabs above. You are on tab <span id="tabnr">3</span>
</div>

How i can show red border around text field for 3 second?

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

Jquery can´t select image inside link

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'});
}
);