CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Owen O'Neill
Owen O'Neill

Reputation: 205

Changing a div background color through a hyperlink

Hello Stackoverlowers!

I need to sort out my div's and ensure that the background color of a div changes when a certain hyperlinks are closed.

My JS mark up is:

<script>
$("bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

My HTML is: 

<div id="blackandwhite"> text here </div>

My CSS is: 

#blackandwhite { width:100%; #FFFFFF; }

The link structure I am using to trigger the div to change color is like this:

<li><a href="#secondpagename" class="bgcolor"> link text </a></li>

Really cannot work out why it is not working and will appreciate any and all help! I feel like I am almost there.

All I want to do is to have the hyperlink change the div background. This hyperlink is also and will remain outside of the div. Any ideas?

Upvotes: 1

Views: 644

Answers (6)

JaredPar
JaredPar

Reputation: 754745

There are two problems you need to address

  1. The selector needs to look for the class bgcolor and hence should be .bgcolor
  2. Probably need to prevent the default action of the hyperlink via e.preventDefault(). Not 100% sure about your intent here but if it's just to change the color and not jump in the page then this is likely what you want.

Try the following instead 

$(".bgcolor").click(function(e) {
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");
    e.preventDefault()
});

EDIT

As others have pointed out jQuery doesn't support animation out of the box. It does support direct changes of the color though via css

$("#blackandwhite").css(backgroundColor: '#000000');

If you really want color animation though there are a number of plugins available. For example

Upvotes: 4

Didier Ghys
Didier Ghys

Reputation: 30666

First you are trying to select by css class. Correct selector syntax for this is .<classname>. So your selector for binding the click event should be:

$(".bgcolor")

jQuery selectors

Beware that jQuery cannot animate colors out of the box, you have to use the Color plugin, or to use jQuery UI which overloads the animate() method to support animating colors.

From the .animate() documentation:

...most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used)///

Upvotes: 0

Jivings
Jivings

Reputation: 23250

The identifier for your click function is incorrect. It should be:

$(".bgcolor").click(function(){
);

Note the dot to represent that it is searching for a class. Also the script needs to either be placed after the element, or in document.ready() tags.

Upvotes: 0

steveukx
steveukx

Reputation: 4368

Your select needs to be prefixed with a dot to pick elements that have the matching class instead of matching tag name:

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

Upvotes: 0

Olegas
Olegas

Reputation: 10507

jQuery didn't support color animation "out of the box". Only "numeric" properties can be animated. You still can set you background color "directly", without an animation.

$(".bgcolor").click(function(){
    $("#blackandwhite").css(backgroundColor: '#000000');
});

If you are still want to animate color, you can try this plugin: http://www.bitstorm.org/jquery/color-animation/

Upvotes: 0

Rok Kralj
Rok Kralj

Reputation: 48735

You have forgotten the dot: .bgcolor

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

Apart from that, I think it should work.

Upvotes: 0

Related Questions