javascript css change stops after click

[turpentyne]

I've got a bit of javascript that changes the background image of a div on hover. Then, when they click on a link, the page rearranges, and the clicked menu item changes background image to show which section they're on. (the page never reloads).

Unfortunately, after they click, the hover function stops working. It only works on page load.

Here's what I have:

// first, here's the beginning animation.
// the part I can't get to work after they've clicked something, is the 
$(".square.one,#link_next").hover(function(){
        if (!$(".square.one").hasClass('animated') && !$(".square.one").hasClass('subbed')) {
            $(".square.one").dequeue().stop().animate({ width:"155px",height:"219px" },240);
            $('#link_next').css('background-image', 'url("http://site.com/dev/images/navigation/menu_2.png")');
            $("#pic_1_color").animate({ opacity:"0" },50);
            $("#square_caption2,#square_caption3,#square_caption4").css('visibility','hidden');
            $('#square_caption1') .delay(150).queue( function(next){ 
                $(this).css('visibility','visible'); 
                next(); 
            });

            }
        }, function() {
        if (!$(".square.one,#link_next").hasClass('subbed')) {
            $("#square_caption1").css('visibility','hidden');
            $(".square.one").addClass('animated').animate({ width:$width_one, height:$height_one }, "normal", "linear", function() {
                $('#link_next').css('background-image', 'url("http://site.com/dev/images/navigation/menu_1.png")');
                $("#pic_1_color").animate({ opacity:"1" },90);
                $("#square_caption1").css('visibility','hidden');
                $(this).removeClass('animated').dequeue();      
            });
        };
    });
}
// several other links, then...
else if ( $(this).hasClass('') ) {

  };







function pic_shift(){


$("#testit").removeClass("main_page");

    if ( $(this).hasClass('active') || $(this).hasClass('aa')) {
        $('.article,.the-next,.home-register').stop().animate({ opacity: 0 }, 20, function() { 
                $('.reg1').css("line-height","1.5em");

                $('.details .article').unload(); 
            });



            $('#link_next').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_theNext1.png")');
            $('#link_hill').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_hill1.png")');
            $('#link_3little').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_3LittleBx1.png")');
            $('#link_early').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_earlyBirdRegistration1.png")');
            $('#link_contact').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_contact1.png")');




        }); 


        // several other unrelated actions.

        });

        } else if ( $(this).hasClass('one') || $(this).hasClass('ee')) {

            $('.article').stop().animate({ opacity: 0 }, 100, function() { 

                $('.details .article').load('inc/the-page2.php');
                $('.article,h3').stop().animate({ left: '259px', top:'190px',width:'400px'}, 20, function() { 
                        $('.article,h3').stop().animate({ opacity: 1 }, 1800, function() { /*animation completed*/ });
                    });


                 });



            $('.mappits').stop().animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
            $('#nest_thumbs_1,#nest_thumbs_2,#nest_thumbs_3').stop().animate({ opacity: 0 }, 10, function() { /*animation completed*/ });

            // with these changes below, the animation on the first 25 lines, stops working 

            $('#link_nest').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_theNext2.png")');
            $('#link_hillcrest').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_hill1.png")');
            $('#link_3little').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_3LittleBx1.png")');
            $('#link_early').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_earlyBirdRegistration1.png")');
            $('#link_contact').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_contact1.png")');



    // other unrelated actions

        }

[LastMitch]

Unfortunately, after they click, the hover function stops working. It only works on page load.

Which line? It can't be all the CSS?

This code doesn't look the same as the preivous thread you posted.

[turpentyne]

Not sure if I understood the question.

Lines 3 through 30 are the rollover functions

function pic_shift() is called when they actually click on .square.one or #link_next.

lines 87 within pic_shift() is where the appropriate image clicked changes to the same as the hovered stated.
88-91 are bits of code where I set all unselected images back to the original state, to prevent them being set to the hovered image, regardless of what page their on?

[LastMitch]

Not sure if I understood the question.

I hope you notice that you only provide the jQuery code. There's no div tags so where to click?

Since you don't have any error. I have a feeling you can't pinpoint the issue?

Instead of this:

$('#link_nest').css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_theNext2.png")');

Try this (this is just for 1 CSS and it works on my end and I just enter your variable code in my example):

$(function() {
          $('#link_nest').click(function() {
                $(this).css('background-image', 'url("http://site.ca/dev/the-next/images/navigation/menu_theNext2.png');
          });
    }):

<div class="link_nest" onclick="function()"><img src="images/menu_theNext2.png" class="image"></div>

The reason I post that small code snippet is to explain to you if it stop hovering it means that either you div tags is not the same as the jQuery code. I hope that makes sense.

[pixelsoul]

Looking and not seeing any obvious things that stand out to me. If the class isn't being removed, then I wonder if the CSS is being overridden by the click events CSS, or something of that nature?

I am just throwing out a guess so, maybe try

$('#link_next').css('background-image', 'url("http://site.com/dev/images/navigation/menu_2.png") !important');

I know it may not be possible, but if you could present a working (or not working lol) example of this online, it will probably be easier to see what is going wrong.

[turpentyne]

hehe.. yeah, that's why I haven't posted the whole thing. It's a pain going in each time to replace words that they wouldn't want up. There's some temporary secrecy that the client wants. But, I did find a work around:

I put one of these at the top of my javascript, for each navigation item:

$('#link_1').click(function(){
    $('#link_1').toggleClass("selected");
    $('#link_2,#link_3,#link_5,#link_6,#link_7,#link_8,#link_9').removeClass("selected");
}); 

// still need to find a way to simplify, but it works.

Then, I added to the css, this:

#link_1.selected {width:130px;height:20px;background-image:url(../images/navigation/menu_1_2.png);background-repeat:no-repeat;cursor:pointer; !important }

[pixelsoul]

Glad to hear you found a way around it. Just one last mention, if you want to make that a little simpler, you might be able to do something like this

$('#link_1').click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});

I would probably also use a common class as the selector too that way I would not repeat this code for each one of the divs.