CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
Rob Booth
Rob Booth

Reputation: 35

jQuery ID attribute change error?

Right, so I've got an example website I'm making, and I'm using mostly jQuery. On my footer, I'm getting it to animate on click, and I've got it to change the ID of the footer after the click and animation has happened. But when I click it again (to carry out the jQuery commands of the new ID) it doesn't work. it appears that none of the jQuery code is excecuted after the change of ID. Here is the code used:

This is the code to change the ID in the first instance:

$("#footer").click(function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");

This is the code to change the ID back:

$("#footerclose").click(function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});

This is the CSS for the footer content:

#footercontent {
    width:990px;
    height:1px;
    text-align:center;
    background-color:#FFF;
    padding:5px;
    box-shadow:inset 0 0 25px #000;
    border:0px;
}

And this is the footer and footerclose CSS:

#footer {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    z-index:99;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;
}

#footerclose {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;

You can find the site in question here: http://epicgiggle.co.uk/test/example/

I've looked everywhere and there is no solution.

Help is much appreciated.

Upvotes: 2

Views: 363

Answers (3)

Damon Bauer
Damon Bauer

Reputation: 2726

Somewhat unrelated, but, you can do some code optimization. For example each of the following selectors all do the same thing (.hide();):

$("#homecontent").hide();
$("#aboutcontent").hide();
$("#contactcontent").hide();
$("#othercontent").hide();
$("#footercontent").hide();

This can be turned into:

$("#homecontent, #aboutcontent, #contactcontent, #othercontent, #footercontent").hide();

Also, .css() (as well as .animate();) attributes can be combined. So this:

$("#aboutcontent").css({height:"10px"});
$("#aboutcontent").css({width:"490px"});

could be turned into:

$("#aboutcontent").css({ height:"10px", width: "490px" });

These aren't limited to just these examples. There are multiple places where your ID's do the same thing (like .hide();), where you can combine the selectors.

Finally, I would suggest using variables. Each time you do something like $("#homecontent"), jQuery goes out and searches the page for anything with an ID of "homecontent". However, with a variable, such as var homecontent = $("#homecontent"), you cache that selector, so it doesn't have to be searched for it each time. It will work faster as well as be more readable for you. If you did this, your jQuery lines would look something like this:

homecontent.css({ height:"10px", width:"240px" });
etc etc...

Upvotes: 0

nrabinowitz
nrabinowitz

Reputation: 55678

You're trying to bind the .click() handler to #footerclose in $(document).ready(). But there's no element with that id at that point in time, so the handler doesn't get bound to anything.

You can fix this with your current approach by using .delegate(), e.g.:

$(body).delegate('#footerclose', 'click', function() { ... });

As noted by @JonathanG, in jQuery 1.7 this should use .on() instead:

$(body).on('click', '#footerclose', function() { ... })

But to be honest, I wouldn't do it this way - I think you'd have a much easier time just using .toggle() (docs):

$('#footer').toggle(
   function() {
       // animate open, add a class to change the CSS
   },
   function() {
       // close, remove the class
   }
);

Upvotes: 4

ShankarSangoli
ShankarSangoli

Reputation: 69915

You should use jQuery live because the element is not present on the page when you try to attach click event handler.

Try this

$("#footer").live('click', function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");
});

$("#footerclose").live('click', function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});

Upvotes: 0

Related Questions