calling a Jquery function to initiate a hover effect onclick of a href

Question

Ok, sorry if I am misunderstanding, or misinterpreting, anything, but I am fairly new to jQuery and javascript.

I have built a shop in php, and one of the elements is a jQuery cart that is 'required' in all pages so its always on page. The jQuery I include on page to make it work is as follows:

$(document).ready(function(){
    $("#cbox").hover(function(){ 

         $(this).stop(true,false)
         .animate({right:  0}, 500); },
         function(){               

            $("#cbox").stop(true,false).animate({right: -120}, 500); });
    });

Basically the cart sits on the right side of the page, and on hover pops/slides out.

I would like to make it programmatically pop/slide out when the user adds an item to the basket, as a sort of notification of the event. Ideally using onclick .

I have tried calling various parts, but as its a on document ready overall function, I am struggling as to what my onclick should say. Am am not even sure if it will work.

Can anyone give me a point in the right direction please?

Answer 1

$(document).ready(function(){
    $("#cbox").hover(function()
    { 

         $(this).stop(true,false)
                //.animate({right:  0}, 500); },function()<-- invalid syntax: leave out parentheses and semi-colon:
                .animate({right:  0}, 500,function()
                {//no need for the selecot here
                    $(this).stop(true,false).animate({right: -120}, 500);
                });
    });
    $('.storeItems').on('click',function()
    {//best use on for AJAX content, for example
        $('#cbox').trigger('hover');/
    });
 });//you were missing this closing

There's one suggestion I'd like to make: the .on('click' handler has a jQuery selector in it. This means that you'll scan the DOM on each click event for that #cbox element. You can make your code more efficient by using a closure here:

    $('.storeItems').on('click',(function(cbox)
    {
        return function()
        {//cbox is a reference to the cart element, in memory so no need to scan the dom over and over
            cbox.trigger('hover');
        };
    }($('#cbox'))));//pass the reference here

I know, there's a lot of function 's and even more parentheses and brackets. You don't have to use this approach, but just keep this in the back of your mind as you go about learning more JS: you'll start using closures sooner or later, I promise :)

Answer 2

Call the hoverfunction on click of another item is one of many solutions

$(document).ready(function(){
     $("#cbox").hover(function(){ 

         $(this).stop(true,false)
         .animate({right:  0}, 500); },
          function(){               

              $("#cbox").stop(true,false).animate({right: -120}, 500); });
     });

     $('.itemClicked').click(function(e){

           $('#cbox').trigger('hover');

     });

});