cancel a function on a certain page

Question

I've written this function that is a horizontal accordion, So far it's working well, I've added it to an external js file, and loaded it into each page, what i want to do now is on the home page, remove the hover function, and set the colour to #CCC. I've tried everything, unwrap the a, add another hover with the width the same....

http://uwptestsite.uwpistol.net/menu.html

here is the test page.

my code I have written is here.

    // JavaScript Document    

$(document).ready(function(){
    $(".letter-b").width(12);
    $(".letter-b").css({"overflow":"hidden", "position":"relative"});       

$(".letter-b a").hover(
    function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
    },
    function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
    });

    $(".letter-e").width(12);
    $(".letter-e").css({"overflow":"hidden", "position":"relative"});

    $(".letter-e a").hover(
        function() {
        $(this).parent().stop().animate({"width": "83"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });    

    $(".letter-h").width(12);
    $(".letter-h").css({"overflow":"hidden", "position":"relative"});

    $(".letter-h a").hover(
        function() {
        $(this).parent().stop().animate({"width": "53"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });

    $(".letter-l").width(11);
    $(".letter-l").css({"overflow":"hidden", "position":"relative"});

    $(".letter-l a").hover(
        function() {
        $(this).parent().stop().animate({"width": "54"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "11"}, 300);
        });

    $(".letter-n").width(12);
    $(".letter-n").css({"overflow":"hidden", "position":"relative"});

    $(".letter-n a").hover(
        function() {
        $(this).parent().stop().animate({"width": "43"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });         

    $(".letter-o").width(12);
    $(".letter-o").css({"overflow":"hidden", "position":"relative"});

    $(".letter-o a").hover(
        function() {
        $(this).parent().stop().animate({"width": "94"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });     

    $(".letter-r").width(12);
    $(".letter-r").css({"overflow":"hidden", "position":"relative"});

    $(".letter-r a").hover(
        function() {
        $(this).parent().stop().animate({"width": "95"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });


    $(".letter-w").width(17);
    $(".letter-w").css({"overflow":"hidden", "position":"relative"});

    $(".letter-w a").hover(
        function() {
        $(this).parent().stop().animate({"width": "95"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "17"}, 300);
        });


    $(".letter-x").width(12);
    $(".letter-x").css({"overflow":"hidden", "position":"relative"});

    $(".letter-x a").hover(
        function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });

    $(".letter-y").width(12);
    $(".letter-y").css({"overflow":"hidden", "position":"relative"});

    $(".letter-y a").hover(
        function() {
        $(this).parent().stop().animate({"width": "52"}, 300);
        },
        function() {
        $(this).parent().stop().animate({"width": "12"}, 300);
        });    
});

I'm really struggling with this, i guess i need an option for disabling, but that would be making it a plugin which im not sure how to do.. and I don't want each page to have a list of enabled link items, because it's growing at the minute, so if i can do something like

$("letter-h").disableAccordion();

I hope I'm making sense, I know someone out there will have a solution, thanks for this!

I may be completely missing the point here but if you don't want the hover functionality on a particular page, just don't include the .`js` file that contains the `.hover()` function. — andyb, Apr 26 '11 at 09:03

Dormouse · Accepted Answer · 2011-04-26T09:22:20.987

2

On the page you don't wish to use the plugin (if you're against dynamically loading the plugin depending on page) you can put:

<script type="text/javascript">
$(document).ready(function ()
{
    $(".letter-a").unbind("mouseenter mouseleave");
});
</script>

after the call to include the js file

edited Apr 26 '11 at 09:22

answered Apr 26 '11 at 09:01

Dormouse

5,130
1
26
42

unbind("hover") will not work. http://stackoverflow.com/questions/2727570/jquery-unbindhover-does-not-work – Khoa Nguyen Apr 26 '11 at 09:16

score 1 · Answer 2 · answered Apr 26 '11 at 09:13

1

You can use this code:

$("letter-h").unbind('mouseenter mouseleave');

answered Apr 26 '11 at 09:13

Khoa Nguyen

1,319
7
21

cancel a function on a certain page

2 Answers2