I need to zoom image with Kenburns effect by clicking. This doesn't work, however.
Code:
$(document).ready(function () {
$('.kenburns').on('click', function () {
$('.kenburns').addclass('img.zoom');
});
});
JSFiddle
Your jQuery code has a few issues:
First, addclass should be addClass. Javascript is case-sensitive.
Second, the element addClass is attached to is for the parent div, not the image itself. Essentially you were trying to apply the CSS transform to the div instead of the image, while you actually want to apply it to the image. To add the class to the image and not the parent div, use as your selector:
$('.kenburns img')
instead of ...
$('.kenburns')
Alternatively, and perhaps more performantly, you can use
$('.kenburns').children('img')
Finally, the class name you were trying to add to the image is incorrect. addClass accepts the CSS class name ("zoom"), not the CSS selector ("img.zoom").
Corrected code:
$(document).ready(function () {
$('.kenburns').on('click', function () {
$('.kenburns img').addClass('zoom');
});
});
Working JSFiddle
Related
I seem to be struggling with this.
Im want to make other elements change with button hover.
what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.
The site url is:
http://staging.conversationlab.com/lions_valley/
You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...
$(".more-link").hover(
function() {
$(this).addClass("your-class-with-styling");
$(this).siblings(".post-meta").addClass("your-class-with-styling");
$(this).siblings("h2").addClass("your-class-with-styling");
},
function() {
$(this).removeClass("your-class-with-styling");
$(this).siblings(".post-meta").removeClass("your-class-with-styling");
$(this).siblings("h2").removeClass("your-class-with-styling");
}
);
I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.
You probably just need to add some css:
<style>
#buttonid:hover {
background-color:#ff0000;
}
</style>
where the #buttonid is declared on your button:
<button id="buttonid"> my button</button>
more info = better answer/s
You can see here how to do it. https://jsfiddle.net/5aybmjk7/
Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.
$('#here').mouseover(function () {
$(".highlightMe").addClass('colored');
});
$('#here').mouseout(function () {
$(".highlightMe").removeClass('colored');
});
jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});
Try that
So i currently have multiple images on a page, however when i want over hover effect on the one that is being hovered over. Where the page has more than 12 images, one way is to replicate this code 12 times, with an id but is there a more efficient way:
$("img").hover(function () {
$("img").addClass("transition");
}, function () {
$("img").removeClass("transition");
});
You could use in/out hover handler to toggle the class:
$("img").hover(function () {
$(this).toggleClass("transition");
});
But be aware, this could be done using only CSS with pseudo class :hover if your goal is just to apply transition to these images.
In order to apply hover effect only on currently hovered image and not on the other images, use $(this) as shown below :-
$("img").hover(function () {
$(this).addClass("transition");
}, function () {
$(this).removeClass("transition");
});
I am using Jquery to change the css of some images.
It works and changes the image css size when clicked.
The only issue is that when I click on the next image, the previous image stays
with the new css toggle.
Is there a way that when I click on the next image, the previous image goes back to
the original css.
I have included a jsfiddle example here:
http://jsfiddle.net/webdott/hSFpp/
Here is the jquery code:
$('img').click(function() {
$(this).toggleClass('thumb fullview')
});
You can see that each image you click stays large.
Thanks
You need to remove the fullview class from all other img elements, before adding it to the one which was clicked. Try this:
$('img').click(function() {
$('img').removeClass('fullview'); // remove class from all
$(this).addClass('fullview'); // add class to clicked img
});
Updated fiddle
Try removing the class on img "fullview" and adding it to $(this) after.
$('img').click(function() {
$('img').removeClass('fullview');
$(this).addClass('fullview');
});
Fiddle
UPDATE:
I realized that though we both solved the problem, clicking the large image didn't toggle it. I added a function for that in the following code:
if ( $('img').hasClass('fullview') ) {
$(this).click(function() {
$(this).removeClass('fullview');
});
}
UPDATED FIDDLE
check this fiddle. I solved your issue. please check this fiddle http://jsfiddle.net/Resey/1/
$('img').click(function() {
$(this).toggleClass('fullview').siblings().removeClass('fullview');
});
I have this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").css("background-image","url(carrow.png)");
});
});
I suggest using toggleClass():
CSS
.yourNewBackground {
background-image: url(carrow.png);
}
JavaScript
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").toggleClass("yourNewBackground");
});
});
EDIT
Here's a working fiddle. A couple things to note:
When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
toggleClass() wasn't working because of the span class. Adding !important to the toggleDown class was all that was needed.
If the background is set in a style sheetfile, you can just delete the custom style-attribute you created there:
$(".span").css('background-image', '');
I am using blueprint CSS framework. I have an article spanning 24 cols but I trying to use jQuery toggleclass (onclick) to reduce it to 20 cols and show the buttons for actions in the remaining 4 cols.
$("div").each(function() {
$(this).click(function() {
$(this).toggleClass("span-24");
$(this).toggleClass("span-20");
});
});
I have more than one div so I use each, but it does not work.
I appreciate any help.
This code should do what you're after:
$("div").toggle(function() {
$(this).attr("class", "span-24");
}, function() {
$(this).attr("class", "span-20");
});
You can bind the click event to all divs without the each loop. Also, you can use the :gt() greater-than selector and then toggle() the visibility of those spans
$("div").click(function() {
$(this).find("span:gt(19)").toggle();
});
you don't want to toggle classes on all divs you have, rather just the one with content
you can even simplify this code more:
$('#toggler').click(function(){
$('#content').toggleClass('span-20 span-24');
});
the #toggler.click() is just one of events that can run the toggleClass(), in your HTML it could be onload or whatever:
$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too)
example: http://jsfiddle.net/hhMFs/1/
You can also do this:
$("div").click(function() { $(this).toggleClass("span-20 span-24"); });