We Keep Coding

JQuery change border color for 10 seconds

How can I change border color of the clicked for 10 seconds and then change back to original?

Can you try this solution ? :)
$("#button").on("click", function(){
elem = $(this);
elem.css('border-color', 'blue');
setTimeout(function(){
elem.css('border-color', 'red'); },
10000);
});

Use setTimeout for that.
$(document).ready(function() {
var timer;
$('div').click(function() {
// cancel previous timeout
clearTimeout(timer);
var self = $(this);
// set new border collor. Or add new class for CSS integration
self.css('border-color', 'green');
timer = setTimeout(function() {
// reset CSS
self.css('border-color', '');
}, 5000); // time in miliseconds, so 5s = 5000ms
});
});
div {
width: 40px;
height: 40px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

If you want to use jQuery do something like this:
$(".test").click(function(){
$(this).animate({"border-color":"#fff"}).delay(1000).animate({"border-color":"#c00"});
});
.test {
width: 100px;
height: 20px;
color:#fff;
text-align: center;
background: #333;
border: 5px solid #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="test">Test</div>
Please note that you can't do it with jQuery alone - because animate can't use colors. So you need to add jQuery UI for Example to extend jQuery.

i think you need to try like this
$('#btn').click(function () {
$(this).css('border-color', '#fff');
setTimeout(function () {
$('#btn').css('border-color', '#000');
},10000);
});

Hidden anchor link falling in next line once show

Can you tell me why the anchor link with class "edit" falling in next line the next time it is being displayed/showed?
To replicate click, edit button and then save button on jsfiddle link below.
JS Fiddle
HTML
<div id="con">
Delete
Edit
Save</div>
JQUERY
$(".edit").click(function(){
var ID=$(this).attr('id');
var RemoveIDedit = ID.replace('edit_','');
$(this).hide();
$("#save_"+RemoveIDedit).show();
});
$(".save").click(function(){
var ID=$(this).attr("id");
var RemoveIDsave = ID.replace('save_','');
$(this).hide()
$("#edit_"+RemoveIDsave).show();

Demo
instead of this
$("#edit_"+RemoveIDsave).show();
Try this
$("#edit_"+RemoveIDsave).css("display","inline");

Remove position:absolute for .edit and .save from your stylesheet.

This is due to display: block;, replace it with display: inline;
Please use following code, I've edited this
$(document).ready(function() {
$(".edit").click(function() {
var ID = $(this).attr('id');
var RemoveIDedit = ID.replace('edit_', '');
$(this).hide();
$("#save_" + RemoveIDedit).css('display', 'inline');
});
$(".save").click(function() {
var ID = $(this).attr("id");
var RemoveIDsave = ID.replace('save_', '');
$(this).hide()
$("#edit_" + RemoveIDsave).css('display', 'inline');
});
});
.save {
display: none;
}
.save,
.edit {
position: absolute;
padding-left: 5px;
}
#con {
width: 500px;
height: 500px;
border: 1px solid;
boreder-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="con"> DeleteEdit Save
</div>a

You can use the Visibility property instead of display
css
.save {
visibility:hidden;
}
.save, .edit {
position: absolute;
padding-left: 5px;
}
jquery
$(document).ready(function() {
$(".edit").click(function(){
var ID=$(this).attr('id');
var RemoveIDedit = ID.replace('edit_','');
$(this).css("visibility","hidden");
$("#save_"+RemoveIDedit).css("visibility","visible");
});
$(".save").click(function(){
var ID=$(this).attr("id");
var RemoveIDsave = ID.replace('save_','');
$(this).css("visibility","hidden");
$("#edit_"+RemoveIDsave).css("visibility","visible");
});
});
Hope this may satisfy you

JQuery doesn't appear to be working in Wordpress

I have the following in the tags of the header in my wordpress theme, but no matter what it will not work.
<script>JQuery(function() {JQuery('#fader img:not(:first)').hide();JQuery('#fader img').css('position', 'absolute');JQuery('#fader img').css('top', '0px');JQuery('#fader img').css('left', '50%');JQuery('#fader img').each(function() {var img = JQuery(this);JQuery('<img>').attr('src', JQuery(this).attr('src')).load(function() {img.css('margin-left', -this.width / 2 + 'px');});});var pause = false;function fadeNext() {JQuery('#fader img').first().fadeOut().appendTo(JQuery('#fader'));JQuery('#fader img').first().fadeIn();}function fadePrev() {JQuery('#fader img').first().fadeOut();JQuery('#fader img').last().prependTo(JQuery('#fader')).fadeIn();}JQuery('#fader, #next').click(function() {fadeNext();});JQuery('#prev').click(function() {fadePrev();});JQuery('#fader, .button').hover(function() {pause = true;},function() {pause = false;});function doRotate() {if(!pause) {fadeNext();}}var rotate = setInterval(doRotate, 2000);});</script>
What a mess right? To show that I have been researching this, a previous answer said to remove all whitespaces and change all $ with JQuery. I want to simply fade between a few images in the fader ID.
I have even made a fade.js file, and included it in the functions file, to no avail.
Here is my CSS...
#fader {
position: relative;
width: 100%;
height: 400px;
}
.button {
background-color: green;
width: 50px;
height: 30px;
font-size: 20px;
line-height: 30px;
text-align: center;
position: absolute;
top: 30px;
}
#next {
right: 100px;
}
#prev {
left: 100px;
}
And my HTML ...
<div id="fader">
<img src="http://dummyimage.com/600x400/000/fff.png&text=Image1"/>
<img src="http://dummyimage.com/200x400/f00/000.jpg&text=Image2"/>
<img src="http://dummyimage.com/100x100/0f0/000.png&text=Image3"/>
<img src="http://dummyimage.com/400x400/0ff/000.gif&text=Image4"/>
<img src="http://dummyimage.com/350x250/ff0/000.png&text=Image5"/>
</div>
Instead of showing one image and fading between the 5 images supplied, it just shows all 5 images at the same time.
I first thought this could be a JQuery problem, so tested to see if JQuery was functioning, which it is.
Here is the original JQuery before I removed whitespaces and swapped $ for JQuery.
$(function() {
$('#fader img:not(:first)').hide();
$('#fader img').css('position', 'absolute');
$('#fader img').css('top', '0px');
$('#fader img').css('left', '50%');
$('#fader img').each(function() {
var img = $(this);
$('<img>').attr('src', $(this).attr('src')).load(function() {
img.css('margin-left', -this.width / 2 + 'px');
});
});
var pause = false;
function fadeNext() {
$('#fader img').first().fadeOut().appendTo($('#fader'));
$('#fader img').first().fadeIn();
}
function fadePrev() {
$('#fader img').first().fadeOut();
$('#fader img').last().prependTo($('#fader')).fadeIn();
}
$('#fader, #next').click(function() {
fadeNext();
});
$('#prev').click(function() {
fadePrev();
});
$('#fader, .button').hover(function() {
pause = true;
},function() {
pause = false;
});
function doRotate() {
if(!pause) {
fadeNext();
}
}
var rotate = setInterval(doRotate, 2000);
});
Thanks in advance!!!!!!!
I love you ;)

Use jQuery or $ and not what you are using.
You are using JQuery, which is wrong.
But if you really want to use JQuery,then you can do the below:
var JQuery = jQuery;
Now, after the assignation, you can use JQuery

Using Jquery to remove/add border on hover

I know there's several other threads with similar questions answered although I believe my question is slightly different.
Within my navigation the page you are currently on has a bottom border on the nav link. I'm trying to use Jquery to make it so that when you hover over any of the other links all borders are removed except for a new border on the hovered link. So within the example in JSFiddle when I hover over "About" the underline on "Home" would be replaced with an underline on "About" and then returned to "Home" when the mouseleaves.
http://jsfiddle.net/6Ucmq/
Anybody have any suggestions? All help greatly appreciated!
$(document).ready(function() {
$(".navigation a").hover(
function() { $(this).removeClass("hoverEffectSelect"); }
function() { $(this).addClass(".hoverEffect"); },
function() { $(this).removeClass(".hoverEffect"); }
);
});

Try
$(document).ready(function () {
var $home = $(".navigation a.hoverEffectSelect");
$(".navigation a").hover(function () {
$home.removeClass("hoverEffectSelect");
$(this).addClass("hoverEffectSelect");
},function () {
$(this).removeClass("hoverEffectSelect");
$home.addClass("hoverEffectSelect");
});
});
Demo: Fiddle

No jQuery necessary: JSFiddle
The idea is to apply the border-bottom to the active element and to the hovered one, but when the entire navigation is hovered over it should hide the border from the active element.
HTML:
<div class="headingTop">
<div class="navigation">
<a class="hoverEffect active" href=".html">HOME</a>
<a class="hoverEffect" href=".html">ABOUT</a>
<a class="hoverEffect" href=".html">PROJECTS</a>
<a class="hoverEffect" href="r.html">CONTACT</a>
</div><!-- DIV navigation -->
</div><!-- DIV headingTop -->
CSS:
.navigation a {
color: black;
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', 'Alef', sans-serif;
margin-left: 20px;
border-bottom: 0px solid transparent;
}
.hoverEffect {
transition: border-bottom 300ms linear;
}
.navigation:hover>.active {
border-bottom: 0px solid transparent;
}
.hoverEffect.active, .navigation>.hoverEffect:hover {
border-bottom: 2px solid #EBCD37;
}

Try:
$(".navigation a").hover(function() {
$(".navigation a").css('border-width', '0');
$(this).css('border', '3px solid black');
});
In this case you will remove the borders first, then set it as you want.

You can do like this:
$(document).ready(function () {
var index = $('a.hoverEffectSelect').index();
$(".navigation a").hover(function () {
$(".navigation a").removeClass("hoverEffectSelect");
$(this).addClass("hoverEffect");
}, function () {
$(this).removeClass("hoverEffect");
$('.navigation a').eq(index).addClass('hoverEffectSelect');
});
});
Fiddle Demo

Try this
$(document).ready(function () {
var olda = $('.navigation a.hoverEffectSelect').index();
$(".navigation a").hover(function (olda) {
$('.navigation a').removeClass("hoverEffectSelect");
$(this).addClass("hoverEffect");
}, function () {
$('.navigation a:eq(' + olda + ')').addClass("hoverEffectSelect");
});
});
DEMO

Add CSS Class after HTML div using JQuery

I have this HTML
<div class="portItem"></div>
<div class="portItem"></div>
<div class="portItem"></div>
<div class="portItem"></div>
This CSS
.rectangle {
height: 250px;
width: 100%;
position: relative;
display: none;
background: #ffffff;
box-shadow: 1px 0px 20px black;
overflow-y: hidden;}
Here's the CSS for portItem, although not necessary (forms 4 green blocks next to each other)
.portItem {
height: 180px;
width: 250px;
position: relative;
display: inline-block;
background: #D0E182;
margin: 0 5px 5px 0;
And I'm trying to add the CSS rectangle after any of the portItems that I click on.
Here's the JQuery function I'm trying to use:
$(document).ready(function() {
$('.portItem').click(function() {
addDiv($(this));
});
});
function addDiv($ele) {
var $box = $('<div />' '.rectangle');
$box.insertAfter($ele);
}
The problem is with the var $box statement, I can't get it to work.
Thanks in advance!

You're missing a comma, and an object.
var $box = $('<div />', {'class':'rectangle'});
// -------------------^ ^ ^
// added comma-----| |___________________|---and object literal syntax
The quotes around class are needed to support older browsers. You could also use className instead.
var $box = $('<div />', {className:'rectangle'});

How about this:
var $box = $('<div/>').addClass('rectangle');
... or as simple as...
var $box = $('<div class="rectangle"/>');
Actually, I might consider preparing this item first-hand, then just cloning it. For example:
var $boxTemplate = $('<div class="rectangle">');
function addDiv($ele) {
$boxTemplate.clone().insertAfter($ele);
}

change the var $box line to:
var $box = $('<div class="rectangle" />');