Search code examples
jqueryjquery-animatecss-animationssharethis

sticky flyout sidebar like ShareThis

ShareThis is a social sharing widget for websites in which a 'sidebar' per say is created on the far edge of the page and when clicked it scrolls out and displays a menu of sharing options. I need to find a jQuery plugin or a javascript that will allow me to mock this feature.

An example of what I am trying to do can be found here: http://support.sharethis.com/customer/portal/articles/475260#sthash.iBn1ZGqT.dpbs on the far left side of the page.

Does anyone know of a jQuery plugin that will allow me to do this with a div of my choice? Of course I will have to add some styles to it myself but the library/script/plugin to start would be helpful.

EDIT: I have made a custom js solution but now I want to close the element when clicked again. Below is my JS to open the element on click:

jQuery(function() {
    jQuery('.contact-flyout').bind('click', function() {
        jQuery('.contact-flyout-menu').animate({ marginRight: '0px'}, 500);
        jQuery('.contact-flyout').animate({ marginRight: '150px'}, 500);
    });
});
Solution

  • I created a custom jQuery function to do this. Here is my final working result: 

    jQuery(function() {
    jQuery('.contact-flyout').bind('click', function() {

        if(jQuery('.contact-flyout-menu').css('margin-right') == "-152px") {
            jQuery('.contact-flyout-menu').animate({ marginRight: '0px'}, 500);
            jQuery('.contact-flyout').animate({ marginRight: '150px'}, 500);
        } else {
            jQuery('.contact-flyout-menu').animate({ marginRight: '-152px'}, 500);
            jQuery('.contact-flyout').animate({ marginRight: '0px'}, 500);
        }

    });
});