Please see this fiddle http://jsfiddle.net/rabelais/Fzs7u/
I have thumbnails and titles that toggle when a mouseover function occurs. How can I make the title remain from the last hovered thumbnail? Should I use something other than toggle? Perhaps target the css display rule?
$(".thumbnail-wrapper").on("mouseover mouseout", "img", function () {
$("#" + $(this).data("title")).toggle();
});
Since you don't want to hide the caption, I'd do things a little differently:
http://jsfiddle.net/zZ6UJ/
<div class="editable title" id="title">
</div>
<div class="thumbnail-wrapper repeatable">
<img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img012_2.jpg" alt="1" data-title="Vivienne Westwood"/>
</div>
<div class="thumbnail-wrapper repeatable">
<img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img013_3.jpg" alt="2" data-title="Paul Smith"/>
</div>
$(".thumbnail-wrapper").on("mouseover", "img", function () {
$("#title").text($(this).data('title'));
});
http://jsfiddle.net/Fzs7u/3/
$(".thumbnail-wrapper").on("mouseover", "img", function () {
$('.title:visible').hide();
$("#" + $(this).data("title")).show();
});
I changed your .toggle() to .show(), and hid .title on mouseover, to make sure that only one title is displayed at a time. Also removed your mouseout handler.
Related
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I have a div main-wrap and an image in it.
I want to hide main-wrap when click on it. But when you click on image that is inside main-wrap I don't want to do anything. Right now I have this non-working code. When I click on image main-wrap still hides. (hidden is my class .hidden {display:none})
<div class="main-wrap" >
<div class="photo-wrap">
<img style="cursor:default;" onclick = "return false;" class="img img-responsive" src = "/stat_photo/1.jpg"/>
</div>
</div>
And I have this code
$(document).ready(function() {
$('.main-wrap').click(function(){$('.main-wrap').addClass('hidden')});
});
I ended up with this code
$('.main-wrap').on('click', function(e) {
$('.main-wrap').addClass('hidden');
}).on('click', 'img', function(e) {
// clicked on descendant div
e.stopPropagation();
});
which is taken from here
How to have click event ONLY fire on parent DIV, not children?
(the accepted answer didn't work though)
$('.main-wrap').click(function(e) {
$(this).addClass('hidden');
}).on('click', 'img', function(e) {
return false;
});
https://jsfiddle.net/bfwsqxko/1/
I added a click event, which extends with an exceptional click on image, which is set to return false;
Better add an id of the image. Then replace .img with #yourid
$(document).ready(function() {
$('.main-wrap').not('.img').click(function(){$('.main-wrap').addClass('hidden')});
});
I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword
I have tried plenty of things and nothing appears to be working.
I am not sure if I am using .siblings() correctly so I had to remove it and made it simple without the actual thing that I want.
Currently I have made it to be as: fade currently selected/hovered div.
$('.recent_each').hover(function () {
$(this).stop().fadeTo(300, '.5')
}, function () {
$(this).stop().fadeTo(300, '1');
});
Can anyone tell me how I can set the opacity of '.5' to all of the siblings and have the currently hovered div on opacity of '1'
I am really confused. Here's html structure tho.
echo "
<div class=\"recent_each\">
<div class=\"recent_title\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
{$info["yt_name"]}
</a>
</div>
<div class=\"recent_thumbnail\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
<img src=\"{$info["thumb"]}\" alt=\"Recently Converted Thumbnail\">
</a>
</div>
</div>
";
As of CSS, there's no opacity at all set in there.
You can use .siblings:
$('.recent_each').hover(function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '.5')
}, function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '1');
});
I am having some difficulty trying to get my Fade In and out effect working properly. I think I am over complicating it.
I have 4 images, however only the first 2 need to be faded out and in on hover of the image (The other 2 images come into play with some other feature on the page).
My HTML is:
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one" src="image_01.jpg" />
<img class="two" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
Images, two, three, four are displayed none
JS:
$('.square').mouseover(function () {
$(this).find('img').each(function () {
if ($(this).attr('class') === 'two') {
$(this).fadeIn('slow');
}
if ($(this).attr('class') === 'one') {
$(this).fadeOut('slow');
}
});
});
Any help would be much appreciated.
Thanks for the responses.
I was trying to be too clever and it didn't need it. Is there a way for the the fadein and out to happen simultaneously without the use for a plugin?
Why do the each and not just selected them?
var imgs = $(this).find("img");
imgs.filter(".one").fadeOut('slow');
imgs.filter(".two").fadeIn('slow');
or
var imgs = $(this);
imgs.find(".one").fadeOut('slow');
imgs.find(".two").fadeIn('slow');
Try to do it like this:
$(".one").fadeIn("slow", function() { $(this).fadeOut("slow") });
$(".two").fadeIn("slow", function() { $(this).fadeOut("slow") });
Update:
I misread you question and thought you want both to fade in and out. To make the first one fade in and the second fade out use something like this:
$(".one").fadeIn("slow");
$(".two").fadeOut("slow");
If you have other elements with one and two classes and don't want to affect them, you can type $(".imageHolder .one") and $(".imageHolder .two") instead of $(".one") and $(".two").
If you have multiple imageHolder elements on your page, use find() function as suggested by epascarello or sushanth reddy.
You do not need a .each loop .. Just find the img inside the div and do your operations on it
Try this instead..
$('.square').mouseover(function() {
$(this).find('.two').fadeIn('slow');
$(this).find('.one').fadeOut('slow');
});
Check FIDDLE
I think this is what you're looking for:
$('.square img')
.mouseover(function () {
$(this).fadeIn('slow');
})
.mouseout(function () {
$(this).fadeOut('slow');
});
I think you will better use jquery.hoverIntent.js. It will create a little delay time when you will move your cursor rapidly over the different images.
an example
$(document).ready(function(){
var config = {
interval: 230,
over: zoomIn,
out: zoomOut
};
$("div#clients_wrap div").hoverIntent(config);
});
zoomIn en zoomOut are functions, you could declare them with an fadein, fadeout respectively. This is just an improvement.
Basically assign a class to the group of images that need to fade in/out on hover in/out respectively
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one fadeeffect" src="image_01.jpg" />
<img class="two fadeeffect" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
javascript:
$('.fadeeffect')..hover(function(){
// write your code here
}