Develop Reference

Background color change on hover not working (jquery)

I'm hoping someone can help me with an issue I am having. I am trying to change the background color of my page when mousing over a nav link on the page. I have tried to use jquery for this (last lines of my js code) but it doesn't seem to be working. I think some of my other Js is interfering in some way because it worked on a simple test page before.
https://codepen.io/adamkelly153/pen/gOGaJYq
$('#hover-01').on('mouseenter', function() {
$('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function() {
$('#hover-change').css('background-color', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>
Any help much appreciated! Sorry if I have missed some key info, happy to provide it.
Adam

I change #hover-01 to .proj-cat and worked!
$('.proj-cat').on('mouseenter', function(){
$('#hover-change').css('background-color', 'blue');
});
$('.proj-cat').on('mouseleave', function(){
$('#hover-change').css('background-color', 'red');
});
https://codepen.io/kian-kpt/pen/zYEvQjW

Always keep your cdn above your jquery because jquery only works when cdn has been loaded..
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$('#hover-01').on('mouseenter', function() {
$('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function() {
$('#hover-change').css('background-color', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>

How to keep display one Hover at a time?

I have a small hover script and it works like that:
When i hover on a link it is fade the relevant div.
Now, i tried to create a second link and configure it to display the second div and i have succeeded, but, when i hover them fast one-after-one it display BOTH faded Divs and stay stuck a while (with 2 divs display instead of 1) until the first div returns.
I want to display only one div at a time when i hover even if i hover fast between links.
Here is the code:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
/]]>
</script>
See it in action: https://jsfiddle.net/rami7250/1jLtxdr7/

$('#btn').hover(function(e){
$('#fancy').stop(true, true).fadeOut('slow', function(){
//--------^ Add 'stop(true, true)'
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop(true, true).fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
By adding stop(true, true) you can start current animation immediately and your previous animations will be removed from queue. Read More
Example Fiddle

this prevent 2 div shown at the same time
$('#btn').hover(function(e){
$('#fancy').stop().hide();
$('#bank').fadeIn('slow');
});
$('#btn-bk').hover(function(e){
$('#bank').stop().hide();
$('#fancy').fadeIn('slow');
});
#bank {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

you can use a flag to return function if it's already running:
var flag;
$('#btn').hover(function(e){
if (flag)return;
flag = true;
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
flag = false;
});
});
$('#btn-bk').hover(function(e){
if (flag)return;
flag = true;
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
flag = false;
});
});
fiddle

This is because if you hover over an animation while another is in progress it doesn't stop the current animation. You can force this to happen by using the stop() function for each call.
$('#btn').hover(function(e){
$('#fancy').stop().fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop().fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
See my fiddle: https://jsfiddle.net/1jLtxdr7/2/

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
</head>
<body>
<div>Show bank div and hide fancy div</div>
<BR>
<BR>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut(40, function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut(40, function(){
$('#fancy').fadeIn('slow');
});
});
});
</script>
<body>
</html>
Try is one . you can give decimal numbers to fix speed of fadeIn function

Try This one
$('#btn').hover(
function(e){
$('#bank').show();
},
function(e){
$('#fancy, #bank').hide();
}
);
$('#btn-bk').hover(
function(e){
$('#fancy').show();
},
function(e){
$('#fancy, #bank').hide()
}
);

Try this:
$('.toggle_text').hover(function(e){
var text = $(this).attr("data-info");
var text_to_show = $("#"+text).html();
$('#show_div').fadeOut('slow', function(){
$('#show_div').html(text_to_show).fadeIn('slow');
});
});
#bank {display:none;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="show_bank" class="hide">Bank Div</div>
<div id="show_fancy" class="hide">Fancy Div</div>
<div id="show_div"></div>
Fiddle Link
Hope this helps.

Adding a click function to a image element

I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.

As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.

You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});

first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};

https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well

Why Is My Jquery Slide div always showing at the start

I have a simple jQuery slide toggle but I want hit the div on start up but it is always showing
Here is a demo I build to show u what I mean.
Maybe you can see where I am going wrong
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>
</body>
</html>

You need to hide the panel div
this should do it
#panel
{
padding:50px;
display:none;
}
Hope it helps

$(document).ready(function(){
//just need an initial run to close it first
$("#panel").slideDown();
//or if it was open to start use this instead
$("#panel").slideUp();
//rest the same
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});

jQuery slideToggle more than one panel

Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>

If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>

#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This

Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.

I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/