We Keep Coding

Mouseout and click

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

turning on and off border radius on jquery click event

There are few divs. I need to change the border radius of them with click event. i have managed to change the border radius only once. When someone click on a div, the border radous should be changed to 50%, And click on the same div again, applied border radius should remove.
And while there is a border changed div and if click on another div border of the changed div should remove and border radius should applied to clicked div. Which means there must be only one border radius applied div at a time.
I have this code
jsfiddle
HTML
<div></div>
<div></div>
<div></div>
<div></div>
ANd this css
div {
width: 100px;
height: 100px;
background: #000;
margin: 10px;
float: left;
}
also this jquery code
$('div').each(function(){
$(this).click(function(){
$(this).css('border-radius', '50%');
});
});
help me please, on this.. i have no idea about how to do this..

Use a class for that:
DEMO
$('div').click(function(){
if($(this).is('.radius')){$(this).removeClass('radius'); return;}
$(this).addClass('radius').siblings().removeClass('radius');
});
div.radius {
    border-radius:50%
}

You may want to provide more divs than this. So you should user a class to select them.
I've updated your code and give you this function:
$('div.radius').each(function(){
$(this).click(function(){
$('div.radius').css('border-radius','0');
$(this).css('border-radius', '50%');
});
});
http://jsfiddle.net/C23a2/1/

I have updated your code adding CSS classes: http://jsfiddle.net/Hq6TQ/7/
div.round-border {
border-radius: 50%;
}
and adding it using jQuery:
$(this).addClass("round-border");
P.S. you don't need to iterate over each div element and bind events, you can just use the following snippet:
$('div').click(function(){
// do whatever you need here
});
UPDATE: so far here is what you've initially asked for, I didn't read your question well.

$('div').toggle(function(){
$(this).css('border-radius', '50%');
});

First, you don't need to do each for a click event. Just use click directly. Then:
$('div').click(function(){
$(this).css('border-radius', $(this).css('border-radius') == '50%' ? '0px' : '50%');
});
A (better) alternative would be to use toggleClass() like some people here suggested.

JQUERY:
$('div').click(function () {
$('div').removeClass('radius')
$(this).addClass('radius');
});
CSS:
div.radius {
border-radius:50%
}
DEMO

Try this, working good.
$('div').each(function () {
$(this).click(function () {
if ($(this).css("border-radius") == "0px") {
$(this).css('border-radius', '50%');
} else {
$(this).css('border-radius', '0');
}
});
});
JSFIDDLE

change border/color onFocus

I tried to make script which changes color of border-bottom of div after having focus on
<input type="text">
and then changing back to default color after clicking somewhere else.
This is what i tried:
Css:
.div1 {border-bottom:1px solid #ccc;}
Javacript:
function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };
Html:
<input type="text" onFocus="inputFocus();">
The first part (changing color on focus) works fine, however after clicking somewhere else (not having focus on input) it doesnt change back to normal style as set in css file.
any idea what im doing wrong?

I'd suggest:
$('input').focus(
function(){
$(this).css('border-bottom','1px solid #000');
}).blur(
function(){
$(this).css('border-bottom','1px solid #ccc');
});​
JS Fiddle demo.
Though if you're amenable to CSS:
input:focus,
input:active {
border-bottom: 1px solid #000;
}
JS Fiddle demo.

$('input').focus(function(){
$(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
$(this).css('border-bottom-color','#ccc');
});

You shold add a function to onBlur event to rollback your change

You have to use onBlur event.
JavaScript:
function inputBlur() {
$(".div1").css("border-bottom","1px solid #ccc");
}
HTML:
<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">
However, the better option will be using class toggling.
HTML:
<input type="text" class="myinput">
CSS:
.myinput {
border-bottom:1px solid #ccc;
}
.myinput.active {
border-bottom:1px solid #ffba00;
}
JavaScript:
$(function() {
$(".myinput").on("focus", function() {
$(this).addClass("active");
}).on("blur", function() {
$(this).removeClass("active");
});
});

instead of calling a function in html you can try this:
.border {border-bottom:1px solid #ccc;}
$("input[type='text']").focus(function(){
$(this).addClass("border")
})
$("input[type='text']").blur(function(){
$(this).removeClass("border");
})

this happens because the changed css is not reverted after losing focus from control.
This would help:
<input type="text" onFocus="inputFocus();" onblur="inputBlur();">
function inputFocus(){ $(".div1").removeAttr('style'); };

You shouldn't be using JavaScript to do this. CSS has a :focus selector that is much more appropriate for this.
.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}

Change text box border when it is clicked

I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.
I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.
This is the code:
onload=function(){
var inp=document.getElementsByTagName('input'), i=0, t ;
while(t==inp[i++]){
if(t.type=='text'){
t.onclick=function(){this.style.border='1px solid red'}
}
}
}
</script>
Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?
If its not too hard could explain how to do it or show me some example code?
Cheers - Cohen.

Yes this can be done using CSS pseudo-classes
Here is an example:
<style>
.fancyText:hover{border:1px solid red;}
.fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />

#Aaron is right, and you may visit w3school for css learning,
if you want it using java-script you only need function onFocus, onBlur and access the text box via id
function change()
{
var a = document.getElementById('fansy');
a.style.border = '1px solid red';
}

Why dont use jQuery to make it simpler?
$(document).ready(function(){
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
});
Then you'll get multi browser support also....
Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
to include the jquery-file.
If you replace this
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
with this
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
});
you will automatic get the inputs with attr. type = text.
Here is more fact about jQuery attr selecting

#myTextarea {
border: 2px solid black;
}
#myTextarea:focus {
border-color: red;
outline: none;
}
In the HTML, the textarea element is given an ID of "myTextarea". In the CSS, the #myTextarea selector sets the initial border color to black and the #myTextarea:focus selector changes the border color to red when the textarea is clicked on and has focus. The outline: none; is added to remove the default outline that appears when the textarea is in focus.

Changing the border on an image map

How do I change the border of an image map(on mouse over) that i have placed over a part of the image

You can use jQuery:
$('#imagemapid').mouseover(function() {
$(this).css("border","solid 1px red");
});

If you do use jQuery, which would be wise, use hover so you can remove the border as well.
$('#imagemapid').hover(
function() {
$(this).css("border","solid 1px red");
},
function() {
$(this).css("border","none");
}
);

Since you ask in javascript then I'll fist show your desired solution
function imageon(here)
{
var elem= document.getElementById(here);
elem.style.border = "solid 2px grey";
}
in jquery you can just do this
$(function(){
$('#d1').mouseover(function() {
$(this).css("border","solid 2px grey");
});
});
with html like this
<img name="d1" id="d1" href="LINK #1" onmouseover="imageon('d1');" >