Develop Reference

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L

Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

How to show toolbar ( and hide current ) when click on the next item?

how to show toolbar (and hide current) when i click on next similar element? in my code, when i click on next similar element, toolbar doesn't disappear, he disappears only if i firsly click on body and then on element, how to remove toolbar without clicking to body to show next toolbar? thx!
http://jsfiddle.net/wwL8fgr1/1/
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
var toolbar = $('<div class="dm-popover"></div>');
if ( !$('.dm-popover').hasClass('in') ) {
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});

You can try this
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
if ( !$('.dm-popover').hasClass('in') )
{
var toolbar = $('<div class="dm-popover"></div>');
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
else
{
var toolbar = $('.dm-popover');
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
See the JSFiddle http://jsfiddle.net/wwL8fgr1/3/

The code responsible for removing the toolbar is here:
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
Note this registers a mouseup handler on body. That's why you need to click on body to remove the toolbar. You can attach this handler to the second element, if that's what you expect.
EDIT
My guess is that you wanted to achieve something like in this fiddle. Note that is is suitable for 2 elements only, if you need more similar elements, you'd probably need to make a function to generate id's for you instead of storing them in data- attributes.
My opinion:
Your code seems overly complex - you're using timeouts, swapping css, mouseup instead of click, creating div elements on each click, preventing handler's propagation... Try to make it simpler by removing unnecessary stuff.

How to trigger the '.click' event more than once?

$('document').ready(function() {
$('.button').click(function() {
$('img').animate({left: "+80px"}, 2000);
});
});
So, I'm a bit of a newbie to jQuery and stuff. All I want to do is make an image move to the right every time I click a button. When I run it, it works the first time, but when I click the button again, it just stays still.
I was wondering how I could trigger the .click event multiple times.
PS: If it's worth knowing, the button I mention here is actually a <div>. I couldn't get it to work with a <button>.

Try +=:
$('img').animate({left: "+=80px"}, 2000);

try the on event:
var doc = $(document);
doc.ready(function() {
doc.on('click', '.button', function() {
var imgElem = $('img');
var imgLeft = parseInt(imgElem.css('left'));
var distance = 80;
var newDistance = imgLeft + distance;
$('img').animate({left: newDistance+'px'}, 2000);
});
});
Edit: I changed the code after "remembering" how animate works

$(document).ready(function() {
$('.button').unbind('click').click(function() {
$('img').animate({left: "+80px"}, 2000);
return false;
});
});
I must works.

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);

$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

How to slide down to show content of DIV using CSS/jQuery?

I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.

I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});

You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle