Develop Reference

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

Double clicks from (document) instead of one to close select dropdown

I have a dropdown list, and I want, if click on the select tag to add the class 'active' to the span tag and remove it if click again. But I also want that if I click on the document page it should remove the class 'active' if it added to the span tag. It work.. but I should double click from the document instead of one to remove the active class..
I'm sure that there are a shorter and better code to do this trick but anyway it work a little like that :)
Any help would be appreciated
Here the basic html:
<select class="qty">
<option>1</option>
<option>2</option>
</select>
<span class="arrow"></span>
Jquery :
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
arrow.addClass('active');
}
});
$(document).on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
return false;
}
});
});
JSFIDDLE

I think the issue with the "double-click" is that when you select an option in the dropdown, it remains focused (browser behaviour). This means you need to click twice, not necessarily double click. First you need to click elsewhere to remove focus from it, and only then the body element can listen to your click.
Not sure what you are trying to do, maybe the is not your best option. You could consider making your own dropdown with a DIV or UL LI elements. However, if you do want to patch the browser behaviour, you could force it to blur (unfocus). You would need to change the trigger to change instead of a click, otherwise it would blur it before you make your selection.
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on("change", function(e) {
e.stopPropagation();
arrow.toggleClass("active");
$(this).blur();
});
$(document).on('click', function(e) {
arrow.removeClass('active');
});
});
Also, note that you can use .toggleClass instead of you if statements and in your case you wouldn't need to check if the .active class is already there, you can simply remove it.
Here's an updated JSFiddle

jQuery selector eq:() not working

I made a toggle button with pure CSS/jQuery and all works perfectly. The problem comes when I duplicated it and tried to toggle it. As supposed, the toggles 'toggled' at the same time, here is my code so far:
HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
Or the Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
This is how it works, when you click the toggle it detects if it has a class called "detector". If it doesn't, it animates the toggle and creates one. If it does, that means that the class was previously created so it animates back the toggle and removes the class.
Ok, the problem starts when I duplicate the toggle. I have now two of them which I want to activate individually. The easiest solution was using :eq() jQuery selector or .eq() jQuery function which people classified as a more 'correct' option.
So I add it to the code of the second toggle but it didn't worked. In the fiddle above you can test it by yourself. Please if someone know which is the problems, let me know, thanks!
EDIT: I already used :eq() selector but it didn't work either.
EDIT 2: I use a different detector class called "detector-1" to prevent it from interfering with the other one.

$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
using the this selector, you need to define the click handler only once - and it still works for endless numbers of buttons...
"see working fiddle"
forgot to mention. i changed the css in your fiddle, since the background image didn't show up, i created a white circle via css...

I figured out how to make it thanks to #BhushanKawadkwar
I had to use the :eq() selector on the click function and .eq() function in the other ones. I don't know why, but it works, here's the working fiddle:
http://jsfiddle.net/ew0s6nqd/2/

jQuery basic toggling only working one way

I've created some quick jQuery toggle code:
$("#expander.closed").click(function(){
console.log("opening");
$("#expander").removeClass();
$("#expander").addClass("open");
});
$("#expander.open").click(function(){
console.log("closing");
$("#expander").removeClass();
$("#expander").addClass("closed");
});
The idea is that everytime you click #expander the class toggles between open and closed.
However, for some reason, it only works once, changing from closed to open, and then goes no further.
I have no clue why. Here's a jsFiddle.

I think in the beginning, when you bind the events, .closed class does not exists, so the event does not get bound
May be you should bind the event to some other criteria, or use live. which is deprecated though
Better way would be like this
$("#expander_parent").on('click', '#expander.closed', function(){
// Do your stuff
})

Just bind it using the id and toggle the classes using .toggleClass
$("#expander").click(function(){
$(this).toggleClass('open closed');
});
FIDDLE
if you need to do other functions depending on which class it has you can check like this
$("#expander").click(function(){
var $this = $(this);
$this.toggleClass('open closed');
if($this.hasClass('open')){
// do your open code
}else{
// do your close code
}
});
FIDDLE

You can do this and add your other related operations within the if/else conditions
HTML:
<div id="expander" class="closed">Click Me</div>
CSS:
.closed {
background-color: red;
}
.open {
background-color: blue;
}
Javascript:
$("#expander.closed").click(function (){
if ($('#expander').attr('class') === 'closed') {
$('#expander').attr('class', 'open');
// Add other related functions here
} else {
$('#expander').attr('class', 'closed');
// Add other related functions here
}
});
http://jsfiddle.net/mCDwy/1/

javascript mouseover/out combined with click behavior

I am very new in programming, please give me a mercy. Below is my code:
$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})
$(function(){
document.getElementById("custom_link").addEventListener("click",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
},false)})
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.

http://jsfiddle.net/ETrjA/2/
$('#custom_link').hover(function () {
$('#custom_div').toggleClass('highlighted');
});
$('#custom_link').click(function (e) {
$('#custom_div').addClass('highlighted');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.

You are mixing Javascript with its framework jQuery. Stick with jQuery for this.
// CSS: Create the highlight accessible with two classnames.
.highlight, .highlight_stay{
background:yellow;
}
Jquery
$(function(){
$('.custom_link').hover(function(){
$(this).addClass('highlight');
}, function(){
$(this).removeClass('highlight');
});
$('.custom_link').click(function(){
$(this).addClass('highlight_stay');
});
});

here is a link http://jsfiddle.net/8GV7B/2/
$(function(){
mouse_is_clicked = false;
$(".custom_link").hover(function(){
$("#container").addClass("highlight");
}, function(){
if(!mouse_is_clicked){
$("#container").removeClass("highlight");
}else{
mouse_is_clicked = false;
}
});
$(".custom_link").click(function(){
$("#container").addClass("highlight");
mouse_is_clicked = true;
});
});