I am trying to figure out how to fade all divs but the one that is being hovered. here is my code so far, I can only get it to fade the one being hovered not all the onse not being hovered.
$(document).ready(function () {
$('.fadeHover').hover(
function () {
$(this).stop().fadeTo('slow', 0.3);
},
function () {
$(this).stop().fadeTo('slow', 1);
});
});
<div class="fadeHover fadeDiv">
<p>1</p>
</div>
<div class="fadeDiv fadeHover">
<p>2</p>
</div>
<div class="fadeDiv fadeHover">
<p>3</p>
</div>
check this fiddle
You can do it simply by making use of jquery not() selector and this follows
$('.fadeHover').hover(
function () {
$('.fadeHover').not(this).fadeTo('slow', 0.3);
},
function () {
$('.fadeHover').fadeTo('slow', 1);
});
$(document).ready(function () {
$('.fadeDiv').hover(function(){
$('.fadeDiv').fadeTo('slow', 0.3);
$(this).fadeTo('slow', 1);
});
});
Give this a try:
$('.fadeHover').hover(
function(){
var current = $(this);
$('.fadeHover').each(function(){
if ($(this) !== current) $(this).stop().fadeTo('slow', 0.3);
});
},
function(){
var current = $(this);
$('.fadeHover').each(function(){
if ($(this) !== current) $(this).stop().fadeTo('slow', 1);
});
}
);
Here's a fiddle:
http://jsfiddle.net/RjH4a/
$(document).ready(function () {
$('.fadeHover').hover(
function () {
$('.fadeHover').stop().fadeTo('slow', 0.3);
$(this).stop().fadeTo('slow', 1);
},
function () {
$('.fadeHover').stop().fadeTo('slow', 1);
});
});
Slash's solution works too, it's more efficient but is more code.
$(document).ready(function () {
$(document.body)
.on('mouseenter', '.fadeHover', function () {
$('.fadeHover:not(:hover)').stop().fadeTo('slow', 0.3);
})
.on('mouseleave', '.fadeHover', function () {
$('.fadeHover:not(:hover)').stop().fadeTo('slow', 1);
});
});
And this can be done with pure CSS3:
.fade-container .fade-hover {
opacity: 1;
transition: opacity .5s linear;
}
.fade-container:hover .fade-hover {
opacity: 0.3;
}
.fade-container:hover .fade-hover:hover {
opacity: 1;
}
With HTML:
<div class="fade-container">
<div class="fade-hover">
<p>1</p>
</div>
<div class="fade-hover">
<p>2</p>
</div>
<div class="fade-hover">
<p>3</p>
</div>
</div>
Related
When i click the fade button the box just disappears. I need some kind of time element, but I just can't seem to find the correct answer. I've tried a couple answers here on slack but I don't understand them and when I tried to apply them nothing worked. go to: doc
<script type="text/javascript">
document.getElementById("button1").addEventListener("click", function(){
document.getElementById("box").style.height = "300px";
});
document.getElementById("button2").addEventListener("click", function(){
document.getElementById("box").style.backgroundColor = "blue";
});
document.getElementById("button3").addEventListener("click", function (){
document.getElementById("box").style.opacity = 0.0;
});
document.getElementById("button4").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.backgroundColor = "orange";
});
</script>
You could do the following:
...
.fadeout {
animation: 1s linear fadeaway;
}
#keyframes fadeaway {
from {opacity:1}
to {opacity:0}
}
</style>
<script>
...
document.getElementById("button3").addEventListener("click", () => document.querySelector('#box').className += 'fadeout'));
</script>
quicker would be the following
$('#button3').on('click', () => $('#box').fadeOut(500);
You can use jQuery for this.
Run the snippet below and see
$(document).ready(function() {
$("#button1").click(function() {
$("#box").fadeOut();
});
$("#button2").click(function() {
$("#box").fadeIn();
});
});
#box {
width: 100px;
height: 100px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
</div>
<button id="button1">Fade out</button>
<button id="button2">Fade in</button>
I have this working bootstrap popover, which works fine with time attribute.
But I want it to have the functionality of when someone has their mouse on the content it should not close and should close when mouse leaves the content.
Below is the code related to it. https://jsfiddle.net/bob_js/eLLaacju/5/
HTML
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
jQuery:
$(function () {
$("#popover-a").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-b').html();
}
});
});
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
If you mean that when the user moves the mouse on the popover, it should not close, then here is a code I use for this. Credits go to the author of this fiddle for the original idea and code.
$.fn.popover.Constructor.prototype.leave = (function(fn) {
return function(obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data("bs." + this.type);
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions());
$(obj.currentTarget).data("bs." + this.type, self);
}
var container, timeout;
fn(obj);
if (self.$tip && self.$tip.length) {
container = self.$tip;
timeout = self.timeout;
container.off("mouseenter.popover").one("mouseenter.popover", () => {
clearTimeout(timeout);
container.off("mouseleave.popover").one("mouseleave.popover", () => {
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
});
}
};
})($.fn.popover.Constructor.prototype.leave);
What it does is basically captures mouse enters on the popover, and denies closing the popover.
https://jsfiddle.net/bob_js/eLLaacju/6/
jQuery
$(function () {
$("#popover-a").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-a').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
$("#popover-b").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-b').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
});
I have updated it and this works fine, found it in stackoverflow as well.
http://plnkr.co/edit/x2VMhh?p=preview
This is the jquery
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).animate({'transform' : 'scale(0.8)'}, 'slow');
});
layer.on('mouseleave', function() {
$(this).animate({'transform' : 'scale(1)' }, 1000);
});
});
This is the html
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<%= image_tag "233HHH.jpg", class: 'img-profile' %>
</div>
</div>
</div>
It's in rails hence the image_tag.. but I don't understand why nothing is happening when mouse hovers over.
transform is not a property that can be animated using jQuery.
You can use transition to set the animation properties like
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).css({
'transform': 'scale(0.8)'
});
});
layer.on('mouseleave', function() {
$(this).css({
'transform': 'scale(1)'
});
});
});
.project-layer1 {
transition: all ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
There is no need to use scripting for this effect, you can just use the :hover css rule
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
});
.project-layer1 {
transition: all ease 1s;
}
.project-layer1:hover {
transform: scale(0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
.box-one {
border: 0.1em solid #ccc;
}
.dropdown-info {
display: none;
}
<div class="box-one">
<div class="header">
<h3 class="text-center">Sample Header</h3>
</div>
<div class="dropdown-info">
<p class="text-center">Sample Text</p>
</div>
</div>
I'm trying to open and close a div if another div is clicked on and I tried with both .toggle() and .click() but it won't work. I would like to get someone else's opinion on it. I will show how I tried accomplishing it using both methods
$(document).ready(function() {
var descriptionOpen = false;
if (descriptionOpen === false) {
$('.header').click(function() {
$('.dropdown-info').show();
descriptionOpen === true;
});
};
else if (descriptionOpen === true) {
$('.header').click(function() {
$('.dropdown-info').hide();
descriptionOpen === false;
});
};
});
$(document).ready(function() {
$('.header').toggle(function() {
('.dropdown-info').show();
}, function() {
('.dropdown-info').hide();
});
});
Just do this:
$('.header').click(function() {
$('.dropdown-info').toggle();
});
I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.
Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});
$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)