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.
Related
I'm hiding a div until a button is clicked thru this script:
$(document).ready(
function() {
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
but I'm also using TwentyTwenty inside that div and after I clicked the link to show the div, the TwentyTwenty content doesn't have any height so it's not showing up. How can I make it show up? This is my script for twenty twenty:
$(window).load(function() {
$("#container1").twentytwenty();
});
Here's a jsfiddle. Note that I can't make twentytwenty to work in here and I'm not sure why. It's working in my localhost but I just want to show how I made the structure.
First of all don't hide '#yalecontent' div by css.
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#yalecontent").hide("fast");
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
Try this one it may be solve your problem.
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 want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.
$(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
I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.