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

Hide DIV until page loads using visibility property

I have a DIV (.container) and a button (.btn) which i want to hide until the page is fully loaded.I managed to do it by using dispay:none on a small jquery snippet, but it would be better if i could use visibillity:hidden because the page wouldnt shift (like it does with display:none).
basically, I have:
<style>
.container {visibility:hidden;}
.btn {visibility:hidden;}
</style
Is there any nice soul that could help me with jquery part so it only shows once the page is fully loaded?

Here is what you need to do
$(window).load(function() {
$('.container').css('visibility','visible');
$('.btn').css('visibility','visible');
});
OR you could just add a class to the the container as well
$(window).load(function() {
$('.container').addClass("show");
});
and then for your css
.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }
You can create a class just for visibility but make sure it is after the other rules so it will overwrite it. Like so
.container {visibility:hidden;}
.btn {visibility:hidden;}
.my_class { visibility: visible; }
The jquery in this case would be
$(window).load(function() {
$('.container').addClass("my_class");
});

You can try this:
Javascript:
$(window).load(function(){
$('.container, .btn').addClass('visible');
});
CSS:
.visible { visibility: visible; }
Hope help you!

Don't overthink it! :)
$(function() {
$('.container').show(); // show .container and .btn
$('.btn').show();
});

Have you tried something like this?
$(document).ready( function() {
$(".container).show( "fast" );
}

div content doesn't animate

Hello i am using jquery to animate a box on the left to slide right to show the facebook link , the box slides fine but the text inside seems not to be affected by the jquery function , my code is :
JQUERY
$(document).ready(function () {
$("#social").mouseenter(function () {
$("#social").animate({
width: 50
});
});
$("#social").mouseleave(function () {
$("#social").animate({
width: 20
});
});
});
HTML
<div id="social">test</div>
The problem is whith the a href , it doesnt animate with the div , i tried to give the a href an id , still didnt work

Try with e.preventdefault()
$("#social").mouseenter(function () {
e.preventdefault();
$("#social").animate({
width: 50
});
});

You need to make sure that your div has a specified width for it to animate, for example:
#social {
width: 20px;
}
Fiddle Demo

Not sure if this is what you want, but if you want the <a> to expand along with the <div>, just add a display: inline-block; and width: 100%; in your css:
#social a {
display: inline-block;
width: 100%;
}
Fiddle demo

Thank you guys i found the solution , i need to change the marginLeft so that it looks like the whole thing box with link was a bit hidden then shows
$(document).ready(function(){
$("#social").mouseenter(function(){
$("#social").animate({width:80});
$("#social").animate({marginLeft:'0px'});
});
$("#social").mouseleave(function(){
$("#social").animate({width:40});
$("#social").animate({marginLeft:'-10px'});
});
});

How to Add Effect to text when over it by mouse

i need to add effect to text when mouse is hover is.
my js code :-
var j = jQuery.noConflict();
j(document).ready(function() {
j('.related_box ul li').hover(function(event) {
j(this).stop().animate({ right: "-5px" }, {duration: 'slow',easing: 'easeOutElastic'});
}
,
function(){
j(this).stop().animate({ right: "-75px" }, {duration: 'slow',easing: 'easeOutElastic'});
});
});
Html code :-
<div class="related_box">
<ul class="related_list_ul">
<li class="related_list"><h3><span>«</span> About us</h3></li>
<li class="related_list"><h3><span>«</span> Call us</h3></li>
<li class="related_list"><h3><span>«</span> Contact us</h3></li>
</ul>
</div>
How to Add Effect to text when over it by mouse.

You need to make sure the element you want to animate is position: relative; or position: absolute;, otherwise changing right won't have any effect.

try this one
j('.related_box > ul > li > a').hover(function(event) {

li.related_list a:hover{ color: #xyz; }
you can do it using CSS

Use mouseover() http://api.jquery.com/mouseover/
Example: (test here http://jsfiddle.net/y8GYq/)
var j = jQuery.noConflict();
j(document).ready(function() {
j("li").mouseover(function(){
j(this).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
}); // animate
});
});

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