Develop Reference

Stop jQuery toggle from sliding content in

I am using a simple jQuery .toggle hoping it would show/hide my content on click. It does that but my content always slides in from left to right until it's where it should be. I don't want it to slide in. Is there a better jQuery method for this or a property I need to specify?
Thanks! This is the jQuery code I'm using:
$(document).ready(
function(){
$('.img-lg').click(function () {
$('.content').toggle("slow");
});
}
);

Change $('.content').toggle("slow") to $('.content').toggle(). This will remove the transition

make elements change color with button hover

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

Kenburn zoom image effect doesn't work

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

Changing color with jquery removes hover color?

So i have:
#selection_menu .secondary_options button:hover { color: #000066; }
and it works great on my site..
When one of these buttons is clicked, however, i run a javascript function that contains:
$('button').css("color","#FFFFFF");
if(!$sameTile)
$($tileSelector).css("color","#000066");
So that when the button is clicked, the highlight color sticks when the mouse is moved away.
The problem i am having is that after this is run for the first time, the buttons stop changing color when highlighting. How can i get around this? Or is this normal behavior?
I am trying to add a class and i can't get it to work: http://jsfiddle.net/sUKkb/1/
Some more of my code:
index: http://pastebin.com/7gYu9YG8
css: http://pastebin.com/Jz1bvzrr
Or this might be more helpful: http://staging.easyzag.com/style.css
view-source:http://staging.easyzag.com/index.php?section=drink

The issue here is that your jQuery is adding an inline style which will override the rule from your CSS. The other issue is $('button').css('color','#000666') is going to apply inline styles to ALL buttons.
I would suggest adding a rule in your CSS for the defaults and the sticky state like this:
button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }
Then in your jQuery you do this instead of what you're doing:
`$(/*add your selector here*/).addClass('.sticky-state');

I believe this is (generally) what you're after:
jsFiddle: http://jsfiddle.net/sUKkb/5/
HTML:
<button class="not-sticky">Hello</button>
JS:
$('button').on('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
Note, this does require a relatively new version of jQuery (1.7+). You could also use:
$('button').live('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
or
$('button').click(function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
for older versions of jQuery.

you can do it without jquery if that's giving you trouble.
add an onmouseover and an onmouseout handler for the hover effect and add an onclick that first cancels the onmousover and onmouseout and then sets the desired color.

Try this;
in your CSS;
.new_class{
color:#000066
}
in your JS
$('button').css("color","#FFFFFF");
if(!$sameTile){
$($tileSelector).removeClass()('.your_previous_class');
$($tileSelector).addClass('.new_class');
}
or you may try
$($tileSelector).css({ 'color':'#000066' });
here is the fiddle http://jsfiddle.net/sUKkb/2/ (without class)
and this one http://jsfiddle.net/sUKkb/3/ (with class)
and this one http://jsfiddle.net/sUKkb/4/ using ID instead of class to make buttons unique
And I think, what you want is a toggle solution like the fiddle below;
http://jsfiddle.net/sUKkb/7/

How to change/swap a div's background image with a click?

I'm attempting to create a mute button (it already has an onclick function) on a site using a div with a background image. I would like to be able to change the displayed image after clicking on it (mute), but I also need to change it back after a second click (unmute). How can this be done?
The site already uses jquery.
Thank you!

Have a look at toggleClass(). You just need two CSS classes, one with each background image e.g.:
.mute {
background-image:url('mute.png');
}
.unmute {
background-image:url('unmute.png');
}
Then the jQuery would be (assuming you have a div named "button", with class "unmute"):
$('#button').click(function() {
$(this).toggleClass('mute');
});

You want jQuery's .toggle() which takes multiple function arguments and calls each in turn after each click event.
$("#mutebutton").toggle(
function() {
$(this).css("background-image","url('on.jpg')");
mySoundOn();
},
function() {
$(this).css("background-image","url('off.jpg')");
mySoundOff();
}
);

Use .removeAttr() if the background image is the only think applied inline. If not, then use .css() and change the path to the original background image.
$(this).toggle(function() {
$(this).removeAttr('style');
},
function() {
$(this).css("backgroundImage", "url(mute_img_path)");
});

its easy
<div id="img-swap" />
where xxxxxx_Off is you image for mute
$(function(){
$("#img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
$(this).css("background-image","on.jpg");
} else {
$(this).css("background-image","off.jpg");
}
$(this).toggleClass("on");
});
});
this will switch image on click from off to on. you must use a pattern for images that will contain _off and _on suffix