Im trying to fadeIn one element with jQuery and when click on another element fadeOut that element. I know how to fadeIn the divs but how do i fadeout all others?
thanks for the help!
the divs have the ids #id1 #id2 #id3 #id4
here´s my Jquery
function trying(id){
var fade_in =function (e){
$(id).fadeIn();
};
$(id).click(fade_in);
};
trying("#id1");
trying("#id2");
trying("#id3");
trying("#id4");
As Andy said, you should give these elements a class. Let's call the class potato, because who doesn't love potatoes.
$potatoes = $('.potatoes');
$potatoes.click( function() {
$(this).fadeIn('fast'); // fade in the div that was clicked
$potatoes.not( $(this) ).fadeOut('fast'); // fade out every other div
});
How about this (assuming that these elements are div):
$('div[id*=id]').click(function(){//when any div whose id contains 'id'
$('div[id*=id]').not($(this)).hide();
//hide all divs whose id contains 'id' except the current `div` clicked
});
I'm not entirely sold on using javascript to provide the visual effect of what you're trying to do; however, I would use javascript–in this case jquery-to apply class states to the elements. Let me know if this example helps, http://output.jsbin.com/kuxefunibi/.
All that I am doing is applying a .active class to the wrapper and then applying a .current class to the currently clicked on block. With that, anytime the .active is present, all of the .blocks inside of it are semi-transparent unless there is a .current class applied to the .block class. Then and only then will that particular .block.current will be solid.
$(function() {
$('.block').on('click', function() {
$(this)
.siblings().removeClass('current').end()
.addClass('current')
.parent().addClass('active');
return false;
});
});
* {
box-sizing: border-box;
}
.block-list.active .block {
transition: opacity 0.2s;
opacity: 0.25;
}
.block-list.active .current {
opacity: 1;
}
.block {
width: 25%;
padding: 30px 15px;
float: left;
background-color: #333333;
cursor: pointer;
color: #ffffff;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<div class="block-list">
<div class="block block-1">some text here</div>
<div class="block block-2">some text here</div>
<div class="block block-3">some text here</div>
<div class="block block-4">some text here</div>
<div class="block block-5">some text here</div>
<div class="block block-6">some text here</div>
<div class="block block-7">some text here</div>
<div class="block block-8">some text here</div>
</div>
</body>
</html>
Is this what you meant? jsfiddle fadein fadeoutall I added some comments too.
Here is the js code:
$('div[id*="id"]').click(function() {
$('div[id*="id"]').fadeOut('normal');//not recommended but if you don't want to use a class, then this will fadeOut all elmts that have ids starting with 'id'
$(this).fadeIn('normal');//fadeIn clicked jQuery object
});
Related
I have a structure like below and I want to toggle active the currently hovered .item element.
I'm using a simple Vanilla JavaScript function that I usually use for click-like situations and it works.
function myFunction(e) {
var elems = document.querySelectorAll(".hover");
[].forEach.call(elems, function(el) {
el.classList.remove("hover");
});
e.target.classList.add("hover");
}
<div class="main-container">
<div class="item hover" onmouseover="myFunction(event)">
item 1
</div>
<div class="item" onmouseover="myFunction(event)">
item 2
</div>
<div class="item" onmouseover="myFunction(event)">
item 3
</div>
</div>
So far so good, but here comes the tricky part. When the mouse goes to a sibling element the hover correctly is changing to the inner one.
I tried some CSS ticks but I can't manage to make it work, any thoughts would be much appreciated
P.S. I prefer Vanilla JavaScript than jQuery
You can use CSS to add and remove the hover. Basic code showing that and added code to toggle active so it can move around.
const menu = document.querySelector(".main-container")
menu.addEventListener("click", function (evt) {
const item = evt.target.closest(".item")
if (item) {
menu.querySelector(".item.active").classList.remove("active")
item.classList.add("active")
}
});
.main-container .item.active {
background-color: green;
}
.item,
.main-container:hover .item.active {
background-color: yellow;
transition: background-color .3s;
}
.main-container:hover .item:hover {
background-color: lime;
transition: background-color .3s;
}
<div class="main-container">
<div class="item active">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
</div>
You don't need JS for that.
Just overwrite style when the container is hovered
.main-container:hover .item.hover {
background-color: transparent;
}
.item.hover {
background-color: red;
}
.item:hover {
background-color: red !important;
}
<div class="main-container" >
<div class="item hover">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
</div>
See jsfiddle: https://jsfiddle.net/hs2yfxm1/
If you're trying to style this based on a hover event you should be utilizing the proper pseudo-class. You mentioned that you always want the first item to be "active", why not set an .active class that matches the format styling of :hover? For example:
SCSS
.item {
border-color: red;
&.active,
&:hover {
border-color: blue;
}
}
CSS
.item {
border-color: red;
}
.item.active,
.item:hover {
border-color: blue;
}
Note: In general, it's best practice to limit your use of JS whenever possible. If something is attainable simply with HTML and CSS, that should be the preferred implementation in most cases.
Other than the stylistic portion, just one comment on your JS. In your example, you're utilizing e.target this can be dangerous if the element has children in that the target could be the child. Since you're targeting each element individually (a lot of event listeners that you may want to consider re-working) you can make use of e.currentTarget for other JS needs.
Is this what you are after?
.active { background-color:grey; }
.item:hover { background-color:yellow; }
<div class="main-container" >
<div class="item active">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
</div>
I have a block which has some data attributes:
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Now I want to use javascript for changing text color on mouseenter and mouseover using my data attributes.
So I have:
$(".my-div").each(function() {
$(this).mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function() {
$(this).css('color', this.dataset.color);
});
});
If I have one div, it's working fine, but if I have another divs with the same class, and I mouseenter and mouseover one div, another divs react too.
What should I do to make it working right, maybe add an index, I don't know.
Can you help me, please?
Thanks in advance. Sorry for my English.
P.S. Don't advise css, for this I must use javascript.
Your code should work by itself but you don't need to loop through each div to check if the mouse has entered or left each div element - it's extremely inefficient.
So remove:
$(".my-div").each(function() {});
Your new code should look like the following:
$(".my-div").mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
$(this).css('color', this.dataset.color);
});
.my-div {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
color: #ff4b4b;
border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Obviously the CSS isn't necessary but I have added it to prove that it works correctly.
Get the target element of the event passed into each handler using $(this):
$(".my-div").each(function() {
$(this).mouseenter(function(e) {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function(e) {
$(this).css('color', this.dataset.color);
});
});
.my-div{
font-size: 20px;
line-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="black" data-hover="red">
Text 1
</div>
<div class="my-div" data-color="black" data-hover="green">
Text 2
</div>
<div class="my-div" data-color="black" data-hover="blue">
Text 3
</div>
how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle
In my Code I need Something like this.
For grid I've used bootstrap grid system like this:
<div class= "row">
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
</div>
Now on a button click I have to show Selection. How to do that?
What you should do is using css :after, and if you are using JQuery, that is easy to do it.
As I understand, what you need is this when one of the div[s] clicked, you show a mark (tick) at the top right corner of it. So, 2113 is the code for check mark(tick) and you can use it in CSS content.
HTML:
<div class="container">
<div class= "row our-div">
<div class = "col-xs-6">div1</div>
<div class = "col-xs-6">div2</div>
<div class = "col-xs-6">div3</div>
<div class = "col-xs-6">div4</div>
</div>
</div>
CSS:
.active:after{
font-family: "FontAwesome";
content: "\2713";
position: absolute;
top: 5px;
right: 5px;
color: white;
background:green;
border-radius:25px;
width:18px;
height:18px;
text-align:center;
}
.our-div > div{
height:100px;
background:purple;
color:white;
}
JavaScript (JQuery):
$(".our-div div").click(function(){
$(this).toggleClass('active');
});
DEMO - JSFiddle
You can addClass() on click for each or add class to all .mark
$(".className").click(function(){
$(".className").addClass("mark");
});
to mark and unmark use toggleClass()
Reference:
jQuery toggleClass()
jQuery addClass()
I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});