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');
});
Related
I have a block of repeating images, each with a caption underneath. I am using slideToggle to show and hide the caption for each image when the image is clicked.
$('.imageholder').click(function() {
$(this).next().slideToggle("fast");
});
A working fiddle showing my method is here.
This works as it should but I want to prevent multiple captions from being visible simultaneously. As a user clicks an image, any open captions should close. In my example, you will see it is possible to open all captions. This is what I want to prevent.
Would appreciate a nudge in the right direction. Thanks.
Just do something like this?
$('.imageholder').click(function() {
$('.description').slideUp();
$(this).next().slideToggle("fast");
});
You should try hiding the other visible elements:
$('.imageholder').click(function() {
$('.description:visible').not($(this).next()).slideToggle("fast");
$(this).next().slideToggle("fast");
});
slideUp() all descriptions that aren't the current one, then slideToggle() the current one.
$('.imageholder').click(function() {
var $desc = $(this).next();
$('.description').not($desc).slideUp('fast');
$(this).next().slideToggle("fast");
});
The above is a fiddle in which i want to toggle or show/hide the background image(i.e. tick mark) onclick and also select the following offer in database (mysql). I am able to show the tick mark but not hide it. Please help.
$(function() {
$('.listing-content').click(function() {
$(this).css('background-image', 'url(http://i.stack.imgur.com/Kg1Do.png)');
});
})
When a listing-content element is clicked, I need the other listing-content elements to have the background image removed also? So no more than one is ticked at a time?
On .listing-content click, execute this:
$(document).on('click', '.listing-content', function() {
$('.listing-content').css('background-image', '');
$(this).css('background-image', 'url(http://i.stack.imgur.com/Kg1Do.png)');
});
or
$('.listing-content').removeAttr('style'); //removes all inline css
You need a control to check if CSS image is set. Look here for demo: https://jsfiddle.net/kpsbbjk4/
$(function() {
$('.listing-content').click(function() {
//this code to control and untick current clicked item if it is ticked
if ($(this).css('background-image')=='url("http://i.stack.imgur.com/Kg1Do.png")'){
$(this).css('background-image', '');
}else{
//this code to remove all css images so that new item get ticked
$('.listing-content').css('background-image', '');
$(this).css('background-image', 'url("http://i.stack.imgur.com/Kg1Do.png")');
}
});
})
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
Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/
First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});
I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});
fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});
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', '');