I made this image gallery but I want to give the active thumb a class="active". I can give the .small_image a class "active" if I click on it but then after I click the other thumbs they all get a class "active". So I thought if I make an if statement, if the rel and src of the big image and the Thumbnail are the same, give a class "active" but my code doesn't work. Can anyone tell me what I'm doing wrong?
http://jsfiddle.net/XNsHC/8/
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).css('display', 'block');
});
});
if($(".small_image").prop("rel") == $("#under").prop('src', image)){
$(this).addClass('active');
}
});
Try something like this: (working jsFiddle - added red border around .active)
$(".small_image").click(function () {
event.preventDefault();
$('.small_image.active').removeClass('active'); // remove "active" from current image
$(this).addClass('active'); // add "active" to the new one
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(300, function () {
$('#current_image #above').prop('src', $('#current_image #under').prop('src'));
});
}).eq(0).addClass('active'); // set the first one as "active" by default
Related
So I am using jQuery to fade in and out but I encountered the problem in which when I run the code the img is faded out but the same img fades back in. I am stuck.
Here is the code
$(document).ready(function() {
// preload the image for each link
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
//-------------------------
// set up the event handlers for each link
$("#image_list a").click(function(evt) {
// alert($(this).attr("title"))
$("#image, #caption").fadeOut(3000, function(){
$("#image").attr("src", $(this).attr("href"));
$("#caption").text($(this).attr("title"));
});
$("#image, #caption").fadeIn(3000);
evt.preventDefault();
});
// get the image URL and caption for each image and animate the caption
// cancel the default action of each link
// move the focus to the first link
}); // end ready
I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.
Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.
Here is the fiddle
Can someone help me with this?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
There you go:
http://jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
Sometimes working with toggles may be a bit tricky and confusing.
In this case I used "hasClass" in order to determine if items are already open or not.
Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation.
this makes sure that already toggled items are not re-toggled.
To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.
See this updated fiddle (edited to change the icons also)
I want just when I click on the image I see the new image and just after the click I want the new image changes with the default one, but I have to drag the mouse to see the default image but I don't want that.
This is my code:
$(document).ready(function(){
$(".img-button").live('click', function () {
$(this).attr("src","images/pressed.svg");
});
});
If you only have one image, I suggest you give it an ID instead of (ab)using the classname.
If you have several and use the same image for all, then change $("#myImage") below to $(".img-button")
Toggle
$(document).ready(function(){
$("#myImage").toggle(
function() {
$(this).attr('src','images/pressed.jpg');
},
function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap after leaving
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
});
$('#myImage').on("mouseleave",function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap half a sec after pressing
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
setTimeout(function() {
$('#myImage').attr('src',"images/default.jpg");
},500);
});
});
I am using the title attribute in all my links but I don't want to be visible on mouse hover, but still visible in the code for screen readers.
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
Using jQuery, you can hide the title attr on hover, and replace it on mouseout:
$(function(){
$('a').hover(function(e){
$(this).attr('data-title', $(this).attr('title'));
$(this).removeAttr('title');
},
function(e){
$(this).attr('title', $(this).attr('data-title'));
});
});
Like in this fiddle.
Since you are using jQuery, you can do it in a simple way:
$(document).ready(function(){
$("a").removeAttr("title");
});
Or, setting it to empty value:
$(document).ready(function(){
$("a").attr("title", "");
});
If this is gonna change the way the screen readers read, then, you can just target on hover.
$(document).ready(function(){
$("a").hover(function(){
$(this).attr("rel", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("rel"));
$(this).removeAttr("rel");
});
});
I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.
I used a bit of JQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.
Following is a DIV with some "Title" content:
<div class="tooltip-class" title="This is some information for our tooltip.">
This is a test
</div>
Now you can run the following JQuery to hide the Title tag on mouse hover:
$(document).ready(function(){
$(".tooltip-class").hover(function(){
$(this).attr("tooltip-data", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("tooltip-data"));
$(this).removeAttr("tooltip-data");
});
});
Following is a link to the full example:
http://jsfiddle.net/eliasb/emG6E/54/
$(".element").hover(function(){
// Get the current title
var title = $(this).attr("title");
// Store it in a temporary attribute
$(this).attr("tmp_title", title);
// Set the title to nothing so we don't see the tooltips
$(this).attr("title","");
});
$(".element").click(function(){// Fired when we leave the element
// Retrieve the title from the temporary attribute
var title = $(this).attr("tmp_title");
// Return the title to what it was
$(this).attr("title", title);
});
I have written the following code:
$(document).ready(function () {
$("#rade_img_map_1335199662212").hover(function () {
$("li#rs1").addClass("active"); //Add the active class to the area is hovered
}, function () {
$("li#rs1").addClass("not-active");
});
});
The problem is it doesnt seem to toggle the class on hover?
But how can i get it so that the class toggles based on hover and non-hover..?
Do not add a different class on hover-out just remove the active class
$(document).ready(function(){
$("#rade_img_map_1335199662212").hover(function(){
$("li#rs1").addClass("active"); //Add the active class to the area is hovered
}, function () {
$("li#rs1").removeClass("active");
});
});
or if all elements are inactive at first you could use a single function and the toggleClass() method
$(document).ready(function(){
$("#rade_img_map_1335199662212").hover(function(){
$("li#rs1").toggleClass("active"); //Toggle the active class to the area is hovered
});
});
Try like below,
$(document).ready(function () {
$("#rade_img_map_1335199662212").hover(function () {
$("#rs1")
.removeClass("not-active")
.addClass("active"); //Add the active class to the area is hovered
}, function () {
$("#rs1")
.removeClass("active");
.addClass("not-active");
});
});