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);
});
Related
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.
I'm working with someone else html else I would of approached this differenty, but I'm trying to create a simple accordion from it.
The problem is it only slides show the first lot of div, it should find its parent div and slide show.
JS
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:first').slideToggle( "slow", function() {});
});
HTML
<h3 class="jqueryheading" style="cursor:pointer">Heading One</h3>
<div style="display:none;">
<p><img src="one.jpg"/></p>
<p><img src="two.jpg"/></p>
</div>
<h3 class="jqueryheading" style="cursor:pointer">Heading Two</h3>
<div style="display:none;">
<p><img src="three.jpg"/></p>
<p><img src="four.jpg"/></p>
</div>
Any ideas why this is happening?
Targeting the parent, then all DIV's gets you all the DIV's as they are children of the same parent, just target the next() DIV instead
$('h3.jqueryheading').click(function () {
$(this).next('div').slideToggle("slow");
});
FIDDLE
You can use next to target the next element
$('h3.jqueryheading').click(function() {
$(this).next().slideToggle( "slow", function() {});
});
Or the next div tag, if you want to be specific
$('h3.jqueryheading').click(function() {
$(this).next('div').slideToggle( "slow", function() {});
});
FIDDLE
Only one issue you have to use the :first-child or :eq(0)
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:eq(0)').slideToggle( "slow", function() {});
});
I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.
Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/
HTML:
<div id="container">
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 1
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 1
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 2
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 2
</div>
</div>
</div>
</div>
JQuery:
$('.item .item-image').bind({
mouseenter: function() {
$(this).siblings('.item-body').children('body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('body-inner').hide();
console.log('Left');
}
});
I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/
body-inner needs to have a . to indicate a class selector:
$(this).siblings('.item-body').children('.body-inner').hide();
Additionally, as of jQuery 1.7 the .on method is preferred to .bind:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
Alternatively, you could use hover and toggle():
DEMO jsFiddle
$('.item .item-image').hover(function(){
$(this).siblings('.item-body').children('.body-inner').toggle();
});
PS: you should remove class hidden on second .item-body as in jsFiddle
Or using only CSS:
DEMO jsFiddle
.item-image:hover ~ .item-body > .body-inner {
display: block;
}
Your code works fine. You're just missing . to target class body-inner
$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here
Also, you should use .on() instead of .bind(), final code look like:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.
If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:
$('.item-body:eq(1)').removeClass('hidden');
Updated Fiddle
You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()
$('.item').on({
mouseenter: function () {
$(this).find('.item-body .body-inner').show();
},
mouseleave: function () {
$(this).find('.item-body .body-inner').hide();
}
});
Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/
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 wrote some jquery code (from one video tutorial) to make mousehover zoom effect like in google pictures.
I want to add some delay before zoom (0.5-1 sec), but I don't know how to do that!!!
I've tried a lot of methods with delay() or setTimeout(), but nothing helps!!!
I do not know why...
Here is the javascript code:
$(function(){
$.fn.popOut=function(user_opts){
return this.each(function(){
var opts=$.extend({
useId:"poppedOut",
padding:20,
border:0,
speed:200
},user_opts);
$(this).mouseover(function(){
// kill any instance of this already
$("#"+opts.useId).remove();
// make a copy of the hovered guy
var $div=$(this).clone();
// setup for prelim stuff
$div.css({
"position":"absolute",
"border":opts.border,
"top":$(this).offset().top,
"left":$(this).offset().left,
"-moz-box-shadow":"0px 0px 12px black",
"-webkit-box-shadow":"0px 0px 12px black",
"z-index":"99"
});
// store all of the old props so it can be animate back
$div.attr("id",opts.useId)
.attr("oldWidth",$(this).width())
.attr("oldHeight",$(this).height())
.attr("oldTop",$(this).offset().top)
.attr("oldLeft",$(this).offset().left)
.attr("oldPadding",$(this).css("padding"));
// put this guy on the page
$("body").prepend($div);
// animate the div outward
$div.animate({
"top":$(this).offset().top-Math.abs($(this).height()-opts.height),
"left":$(this).offset().left-opts.padding,
"height":opts.height,
"padding":opts.padding
},opts.speed);
// loop through each selector and animate it to its css object
for(var eachSelector in opts.selectors){
var selectorObject=opts.selectors[eachSelector];
for(var jquerySelector in selectorObject){
var cssObject=selectorObject[jquerySelector];
$div.find(jquerySelector).animate(cssObject,opts.speed);
}
}
$div.mouseleave(function(){
$("#"+opts.useId).animate({
width:$(this).attr("oldWidth"),
height:$(this).attr("oldHeight"),
top:$(this).attr("oldTop"),
left:$(this).attr("oldLeft"),
padding:$(this).attr("oldPadding")
},0,function(){
$(this).remove();
});
});
});
});
};
$(".productBox").popOut({
height:300,
border:"1px solid #333",
selectors:[{".productDescription":{
height:150
}
}]
});
});
And example HTML code:
<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
Can anyone help me to do that? besides, I think it is very useful script.
Thanks in advance!!!
This may be what you're looking for : hoverIntent jQuery Plug-in
The best example can be found at Pop Images like Google Images
Also take a look at the demo
If you want to copy the cloned object to your original div then you need to just following the steps:
add id to your original div & the following code above the respective code:
var old_box = $div.attr('id');
$div.attr("id", opts.useId)
.attr("oldWidth", $(this).width())
.attr("oldHeight", $(this).height())
.attr("oldTop", $(this).offset().top)
.attr("oldLeft", $(this).offset().left)
.attr("oldPadding", $(this).css("padding"));
add the following code above the mouseleave event:
$div.click(
function() {
$("#" + old_box).html($(this).html());
$(this).remove();
}
);