I have a series of pictures with a class of .player__headshot and right now it's fading out the image that's being moused over as opposed to the other 59 images in the series.
<div class="player player--goalie">
<div class="player__headshot player--elder">
<div class="picked is-active">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
$(".player__headshot").on("mouseover", function(){
$(this).css("opacity", 0.25);
});
$(".player__headshot").on("mouseout", function(){
$(this).css("opacity", 1);
});
To fix this you can select all the .player__headshot elements and exclude the current one using not(), before fading them all back on mouseleave.
Also note that you can achieve this more effectively using hover(); it's shorter and uses mouseenter and mouseleave events instead:
$(".player__headshot").hover(function(){
$(".player__headshot").not(this).css("opacity", 0.25);
}, function() {
$(".player__headshot").css("opacity", 1);
});
The code below will fade out everything that has the class player_headshot
$(".player__headshot").on("mouseover", function(){
$(".player_headshot").css("opacity", 0.25);
});
If you want to keep the image you've moused over active, then you will need to change the class on that image to prevent it from being affected.
If you are using JQuery, perhaps remove the class from the selected image on mouseover or something like that.
Related
I'm trying to figure out the simplest way to show and hide a series of divs with Previous and Next buttons by adding and removing some classes.
So far, I can get the Next button to trigger, but it's adding the active class to all of the divs and not just the next one in line.
I've been reading through other examples and so far they seem really bloated or not what I am looking for specifically.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/pxrrmy/
HTML:
<div class="group">
<div class="item active">
<h2>Thing One</h2>
</div>
<div class="item">
<h2>Thing Two</h2>
</div>
<div class="item">
<h2>Thing Three</h2>
</div>
</div>
<div class="btns">
Previous
<a class="btn next" href="#">Next</a>
</div>
JS:
$('.next').on("click", function(){
if($('.item').hasClass('active')) {
$('.item').next().addClass('active');
}
})
CSS:
body {
padding: 10px;
}
.active {
display:block !important;
}
.item {
display:none;
}
It seems like this should be fairly simple, but I can't seem to think of how to target the next div by itself without it showing all of the other ones.
Basically you should get your last active element and activate next after it:
$('.next').on("click", function(){
const $active = $('.item.active');
const $next = $active.next();
if ($next.length) {
$active.removeClass('active');
$next.addClass('active');
}
})
The problem in your current code is that you are getting all items and performing hasClass on all of them so it returns true all the time because there is at least one element with this class and then you are getting next element after each item element and add active class to them so all of your elements are activated in result.
I think you want something like this
$('a.next').on("click", function(){
var a = $('.item.active').last();
a.next().addClass('active');
a.removeClass('active')
});
I have a homepage with 4 buttons. When hovered over a button, a menu appears behind the buttons. When you hover over another button, a different colored menu appears in it's place.
Currently, I can get the buttons to show the menus, but when I hover onto the menus (and hover off the button) I lose the menu.
Here's my simple code:
Jquery at top:
$(".mybutton").hover(
function () {
$(".mybox").fadeIn();
},
function () {
$(".mybox").fadeOut();
}
);
$(".mybutton2").hover(
function () {
$(".mybox2").fadeIn();
},
function () {
$(".mybox2").fadeOut();
}
);
And my HTML:
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
<div class="mybutton2">
/* Button 2 image here */
</div>
</div>
So I need some way to keep the box that fades in active when it is hovered over. I was thinking of not doing the callback for the fadeout, and somehow only doing the fadeout if they fade off the .mybox DIV or if they hover over another button. But it's a little unclear to me how to accomplish that.
Thanks in advance.
you need to include your menu and the button inside a container and have a hover event on the container. this way your menu will be visible as long as you're hovering over the container.
here's what you need to do.
declare the container like this with your menu and button both inside it.
<div id='container'>
<div class="mybox box">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
</div>
</div>
here's what you need to do in jquery.
$(document).ready(function() {
$("#container").hover(
function() {
console.log($(".mybox").fadeIn());
$(".mybox").fadeIn();
},
function() {
$(".mybox").fadeOut();
}
);
});
here's a working JSFIDDLE with 2 buttons
It's because you're no longer hovering over the button and instead going to a different element "mybox" so you could rearrange the html structure for it to work by keeping the menu in the button class like so:
<div class="buttons">
<div class="mybutton">
/* Button image here */
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
</div>
</div>
this should keep the menu active as long as the curser is in there.
I don't recommend this as a UI design pattern for various reasons (one of them being the complexity of implementing it); you could instead consider changing it so that the menu appears when the user clicks.
Having said that, here's a way to do it. Get rid of your existing fadeOut() calls and add this:
$("body").on("mousemove", function(e) {
var $hovered = $(e.target);
var $myButton = $(".myButton");
var $box = $(".myBox");
if ( $hovered.is( $myButton ) ) return;
if ( $hovered.is( $box ) ) return;
if ( $.contains( $box.get(0), $hovered ) ) return;
$box.fadeOut();
});
...and similar for button2. The basic principle is this - whenever the mouse moves, we check whether the mouse is hovering over the button, or the box, or over an element contained in the box (using $.contains()). If not, we hide the box.
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
I have a piece of code that I've written to get my vertical navigation to have a small fade in/out hover effect on the image. The only problem is I can't get the active to NOT do anything.
All I want is the image to fade in/out on my navigation but stay at 100% opacity when active and not animate on hover. The problem with the code below is they all animate even if not active?
Now I'm no jquery expert but it's something I want to learn so any help would be appreciated.
if (!$(".view-sidebar-links .views-row a").hasClass("active")) {
$(".view-sidebar-links .views-row").hover(
function() {
$("img", this).fadeTo("fast", 1);;
},
function() {
$("img", this).fadeTo("fast", 0.33);;
});
};
The html
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h2 class="title">Clinical devlopment</h2>
<img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/slideshow/image01.jpg" />
</div>
<div class="views-row views-row-2 views-row-even">
<h2 class="title">Technological development</h2>
<img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/Screen%20shot%202012-05-11%20at%2010.05.30.png" />
</div>
<div class="views-row views-row-3 views-row-odd views-row-last">
<h2 class="title">Our Team</h2>
<img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/team-header-image.jpg" />
</div>
</div>
Edit:
I'm so close.
$(".views-row").delegate("a:not(.active)", "mouseenter", function() {
$('img').fadeTo('fast', 1);
}).delegate("a:not(.active)", "mouseleave", function() {
$('img').fadeTo('fast', 0.33);
});
I've managed to get it working, now as you can see the code above works on all images on the page. If I add ('img', this) it doesn't work?
Your logic is a tad incorrect. You're setting an event handler in a conditional, not the other way around (i.e. checking a conditional in an event handler).
Also, try a delegate:
$('.views-row')
.on('mouseover', 'a:not(.active)', function () {
$('img', this).fadeTo('fast', 1);
})
.on('mouseout', 'a:not(.active)', function () {
$('img', this).fadeTo('fast', 0.33);
});
This way, if your view rows toggle their active class on/off, you'll still be able to check on the fly whether to run the handlers or not, while also minimizing the number of event handlers you actually put out their on your DOM.
You could try using the .not('selector') in Jquery
Updated: Try this:
$(".views-row").delegate("a:not(.active)", "mouseenter", function() {
$(this).find('img').fadeTo('fast', 1);
}).delegate("a:not(.active)", "mouseleave", function() {
$(this).find('img').fadeTo('fast', 0.33);
});
I am trying to get it so when the mouse moves over the div it fades the image inside
function clickimage($imageid){
$("#image_"+imageid).hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.6);
});
}
<div id='images_$imageid'>
<a href='?tg=photos&photo=$imageid' onmouseover=\"javascript:clickimage('$imageid')\">
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
You would want to set the binding when the document loads, not every time the mouse hovers over the image. Also, I would create a class so that you can initialize the hover on each item
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('img').fadeTo("slow", 1.0);
},function(){
$(this).find('img').fadeTo("slow", 0.6);
});
});
For the link, you would do something like this:
<a class="image-hover-class" href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
If you want to do the hover on the div, you could do this instead (but I recommend doing the hover on the <a> tag):
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('a img').fadeTo("slow", 1.0);
},function(){
$(this).find('a img').fadeTo("slow", 0.6);
});
});
For the div, you would do something like this:
<div class="image-hover-class">
<a href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
i dont see in the image element id attribute.
when you do it
$("#image_"+imageid)
its try to find this id,
add
id=image_".$imageid." to img
This can be done just using css. I wrote a tutorial here:
http://www.ozzu.com/html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html
Just include your orignal image and a "faded" image.