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
Related
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');
});
I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.
Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/
There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
If you insist on using jQuery, you can try this
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
This approach is highly frowned upon though
In jQuery, you could do it like this:
$(document).ready(function() {
// Make the first active
$(".overlay:first").addClass("active");
// On hover remove all active classes from .overlay
// and add .active only to the one that is hovered
$(".overlay").hover(function() {
$(".overlay").removeClass("active");
$(this).addClass("active");
});
});
but Richard Hamilton's answer is much better and cleaner.
You can use jQuery's on. For example:
$(".overlay:first").addClass("active");
$(".overlay").on("hover", function(){
$(this).addClass("active");
$(".overlay:first").removeClass("active")
});
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks
Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});
You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...
jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");
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'});
});
});