$(function(){
var image = $('img');
if (image.attr("id") == "webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
});
I'm trying to write a conditional to find whether or not a hidden image is visible or not. Basically when you hover over the images, if a certain image is visible the hover image will be specific to that visible image. This would be fine if they were constantly visible but since they're on a cycle (cycle plugin) fading in and out every 10 secs I can't identify them. Any ideas?
Sounds like you have duplicate ids!!!! anyway it will be more logical if you write this block of code like this:
$("img").each(function(){
currentImage=$(this).attr("class");
if(currentImage=="webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
$("img").each(function(){
if($(this).is(':visible')){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
Use visible selector
Related
I am currently using the the following piece of code to fade in/out various DIV's (which hold information). This works, however I am not satisfied with the result. It should overlap each other, instead of piling up on each other.
I did a search and the only workable thing for me was to add: position:absolute; in the CSS. Though this works, it messes up the rest of the items underneath it. So I am looking to fix this.
I did read about inserting a so-called call-back function, however I don't know how to use that with this coding.
Here is a piece of the fade in/out code:
$('.extraInfo').hide();
$('input').on('ifChecked', function(event){
var extraInformationId = $(this).closest('label')[0].id;
if(extraInformationId != undefined) {
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(500);
}
});
$('input').on('ifUnchecked', function(event){
var extraInformationId = $(this).closest('label')[0].id;
if(extraInformationId != undefined) {
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeOut(500);
}
});
The best thing I can come up with myself, other than changing the CSS to absolute, is by changing fade in/out from 500 to 0. However that's not really a solution. :|
If you need more information and/or details, here is the JSFiddle.
When you click on the items, you will notice the DIV's are stacking. This, in my opinion, makes things look kinda 'ugly'.
Remove the ifUnchecked part and use this for the ifChecked
$('input').on('ifChecked', function(event){
$("div.extraInfo")
.fadeOut(500) // hide all divs with class `extraInfo`
.promise() // "wait" for the asynchonous animations to complete
.done(function() { // and then show the info for the selected one
var extraInformationId = $(this).closest('label').attr("id");
if(extraInformationId) {
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(500);
}
}.bind(this)); // preserve the value of this for the callback of fadeOut
});
fiddle
Don't use fadeout, use hide
$('input').on('ifUnchecked', function(event){
var extraInformationId = $(this).closest('label')[0].id;
if(extraInformationId != undefined) {
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').hide();
}
});
I made it work by introducing some delay.Since checking & unchecking is happening almost simultaneously you are seeing two text before one get removed
$('input').on('ifChecked', function(event){
var extraInformationId = $(this).closest('label')[0].id;
if(extraInformationId != undefined) {
setTimeout(function(){
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(1000);
},1000)
}
});
[jsfiddle][1]
I have laid out some images in HTML 4x2. My script is currently enlarging every image using .addClass(), however will only .removeClass() on the first image within the gallery.
How would I make it so as .removeClass() can be applied to every image? - Here is my code:
$(document).ready(function () {
$('#fig').delegate('img', 'click', function () {
$(this).addClass("imgbig");
$('.xbutton').stop(true, true).fadeTo(800, 1);
$("#fig").stop(true, true).addClass("f1");
});
$('.xbutton').click(function () {
$('#imgSmall').removeClass("imgbig");
$('.xbutton').stop(true, true).fadeOut(800, 0);
$("#fig").stop(true, true).removeClass("f1");
});
});
Here $('#imgSmall').removeClass("imgbig") you select the image with id imgSmall, not all the images you have.
I suppose that you should rewrite you callback like below:
$('.xbutton').click(function(){
$(".imgbig").removeClass("imgbig");
$('.xbutton').stop(true, true).fadeOut(800, 0);
$("#fig").stop(true, true).removeClass("f1");
});
Can you post the html please. I'm guessing you have a bunch of images, when you click on them, the image expands and when you click on the close button the image shrinks?
$(function() {
$('#fig').on('click','img', function(){
$(this).addClass("imgbig");
$('.xbutton').stop(true, true).fadeTo(800,1);
$("#fig").stop(true, true).addClass("f1");
});
$('#fig').on('click', '.xbutton', function(){
// this line may be wrong depending on where your button is in relation to the image
$(this).stop(true, true).fadeOut(800, 0).find('.imgSmall').removeClass('imgbig');
$('#fig').stop(true, true).removeClass("f1");
});
});
Note: I changed imgSmall to a class as I am guessing all small images have the same class, IDs should always be unique.
ANSWERED: Updated Fiddle
I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window.
I then have 5 div boxes in a fixed position all around the window.
What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
EDITED: What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
Then once the mouse has left that Div box of written content the original Diagram is shown.
Would I just need to create an if statement reverting the display proptery back to none?
I have created this FIDDLE for a basic skeleton.
I thought I was on the right track using the jquery below, but I can not seem to get it to work?
Any input would be greatly appreciated.
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
$diagram1.css(['display':'block']);
});
$('.content-2').hover(function(){
$diagram2.css(['display':'block']);
});
$('.content-3').hover(function(){
$diagram3.css(['display':'block']);
});
$('.content-4').hover(function(){
$diagram4.css(['display':'block']);
});
$('.content-5').hover(function(){
$diagram5.css(['display':'block']);
});
});
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5'),
$image=$('.image_container img');
$('.content-1').mouseover(function(){
$diagram1.css('display','block');
}).mouseout(function() {
$diagram1.css('display','none');
});
$('.content-2').mouseover(function(){
$diagram2.css('display','block');
}).mouseout(function() {
$diagram2.css('display','none');
});
$('.content-3').mouseover(function(){
$diagram3.css('display','block');
}).mouseout(function() {
$diagram3.css('display','none');
});
$('.content-4').mouseover(function(){
$diagram4.css('display','block');
}).mouseout(function() {
$diagram4.css('display','none');
});
$('.content-5').mouseover(function(){
$diagram5.css('display','block');
}).mouseout(function() {
$diagram5.css('display','none');
});
});
The .css() api syntax was wrong it should be .css('display','block'); and not .css(['display':'block']);
You could use mouseover and mouseenter to have easy way of fullfilling your task instead of hover
JSFiddle-DEMO
you need to make other images invisible when you are hovering over a certain div. image 1, 2, 3, 4, 5. all are overlapping each other. if you take your mouse over image 2 then you need to make image 1,3,4,5 invisible. you can add the visibility: hidden in the jquery you made.
$('.content-1').hover(function(){
$diagram5.css(['display':'block']);
//get visibility code here
});
Hope this answers your question
First you have to change the css syntax then you have to hide all the other images before showing the correct one.
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
hide();
$diagram1.css('display','block');
});
$('.content-2').hover(function(){
hide();
$diagram2.css('display','block');
});
$('.content-3').hover(function(){
hide();
$diagram3.css('display','block');
});
$('.content-4').hover(function(){
hide();
$diagram4.css('display','block');
});
$('.content-5').hover(function(){
hide();
$diagram5.css('display','block');
});
function hide()
{
$(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});
DEMO
on
$diagram5.css(['display':'block']);
maybe it should be like this
$diagram5.css('display','block');
answered fiddle: http://jsfiddle.net/aswzen/4o6mn3pm/6/
and then to make it reversible you have to put the original state display on each block again, like a lamp switches. But if you do this using the display property, probably you're doing it wrong.
Full working filddle as you wish: http://jsfiddle.net/aswzen/4o6mn3pm/11/
but not recommended
The Change display to block using jquery has some problem.
Simply change
$diagram1.css(['display':'block']);
to
$diagram1.css("display", "block");
/**Working fiddle**/
Working fiddle here
To Set a CSS Property
$("p").css("background-color", "yellow");
To Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Detail
replace [] to {} like
$('.content-5').hover(function(){
$diagram5.css({'display':'block'});
});
I've managed to get this working with:
<!--
function resettoggle() {
document.getElementById('imagecarousel').style.display = 'none';
}
function displayImages() {
document.getElementById$('#imagecarousel').style.display="block";
}
$('#imagecarousel').fadeIn("slow", function() {
// Animation complete
$('#portfolio').click(function () {
$("#imagecarousel").toggle();
});
});
-->
and adding onLoad="resettoggle()" to the body tag
I now only need help with 2 things:
I have the div set to fadeIn, but it seems to be flying in at the speed of light.
When the page loads, you see a flicker of the slideshow before it disappears. Not sure how to implement the resettoggle function in a way that keeps the hidden div completely out of view?
you can use fadeToggle():
Display or hide the matched elements by animating their opacity.
$("#portfolio").click(function () {
$("#imagecarousel").fadeToggle("slow");
});
i've managed to get a simple animation working so when I roll over my div with the class "gallery-wrap", an image with the class "magnifier" appears on top.
My problem is I have lots of divs with the class "gallery-wrap" and lots of images which have the class "magnifier".
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$("img.magnifier").show();
}, function() {
$("img.magnifier").hide();
});
The img.magnifier is located inside the .gallery-wrap parent div, not inside .gallery-wrap.
I need it so this does only the current hovered element, which it is doing already, but its animating all the img.magnifier on the page?
I thought it would maybe look like this...
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$(this).parent("img.magnifier").show();
}, function() {
$(this).parent("img.magnifier").hide();
});
But cannot get it to work.
Any ideas would be a huge help thanks.
Shouldn't it be like this:
$('.gallery-wrap').hover(function() {
$(this).find("img.magnifier").show();
}, function() {
$(this).find("img.magnifier").hide();
});
If I understand correctly, img.magnifier is a child of .gallery-wrap, so find() should be used instead of parent().
You were close with:
$(this).parent("img.magnifier").show();
Change it to:
$(this).parent().find("img.magnifier").show();
Then it should work. Do the same thing with your hide() of course.
Can you assign matching id values to the gallery-wrap and associated img.magnifier?
$('.gallery-wrap').hover(function() {
var id = $(this).attr('id');
$("img.magnifier#"+id).show();
}, function() {
$("img.magnifier#"+id).hide();
});
As img.magnifier is not inside .gallery-wrap, find() will not do it here.
Try this one:
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$(this).parents("img.magnifier").last().show();
}, function() {
$(this).parents("img.magnifier").last().hide();
});
The .last() is necessary if you have more than just one img.magnifier in the parents() collection.
You need to change:
$(this).parent("img.magnifier")
to:
$(this).find("img.magnifier")
since the img tag is a child element of your gallery-wrap.