jQuery - Slide out sidebar

Question

I found this code for a slide in/out sidebar. How to let it slide in after the website is loaded so people can sneak peak the content a bit?

(function sidebar() {

        var sidebar = $('#sidebar').show(),
            sidebarButton = $('#sidebarButton', sidebar),
            w = sidebar.outerWidth();

        sidebar.css('left', '-' + w + 'px');

        sidebarButton.toggle (

            function() {
                sidebar.css('left', 0).show('slide', { easing: 'easeOutCubic' }, 1000, function() {
                    sidebarButton.css('right', '-20px');
                });
            },

            function() {
                sidebar.animate({ left: '-' + w + 'px' }, 1000, 'easeOutCubic');
                sidebarButton.css('right', '-20px');
            }

        );



    }());

Thanks

score 3 · Accepted Answer · answered Aug 05 '11 at 23:21

3

HTML:

<div id="sidebar">My sidebar</div>

CSS:

#sidebar {
    float:left;
    height:100%;
    position:fixed;
    background-color:#CCC;
    width:200px;
    display:none;
}

JQuery:

$(function(){
    toggle_sidebar();
    setTimeout(toggle_sidebar,3000);
});

function toggle_sidebar(){
    $('#sidebar').toggle('slide', { direction: 'left' }, 500);
}

Demo: http://jsfiddle.net/AlienWebguy/zrdC4/

** Requires JQueryUI

answered Aug 05 '11 at 23:21

AlienWebguy

76,997
17
122
145

Sorry it's me again with a follow up question. Is it possible to call the *(function sidebar() {* (I posted before) without a button? – Michael Aug 06 '11 at 14:57
Sure you can, but keep in mind `(function sidebar(){}()) is a [self-executing function](http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript), meaning all variables defined inside it are limited to that scope AND it will execute immediately by itself, so keep that in mind :) – AlienWebguy Aug 06 '11 at 15:26
Sorry I'm totally new to jQuery. What I'ld like to achieve is to call the function by multiple links and not just by the *sidebarButton*. I tried to use to call the function with *sidebar()* but than nothing happens. This is the code: http://pastebin.com/8ueMZSwx – Michael Aug 06 '11 at 17:33
In the example code I provided, you'd simply need to call `toggle_sidebar();` inside a click listener. For example if you have `Show/hide sidebar` you'd setup the listener like this: `$('.sidebar_toggler').click(function(event){event.preventDefault(); toggle_sidebar();});` – AlienWebguy Aug 06 '11 at 18:03
Great, thanks. I tried to edit your jsfiddle myself but without a satisficing result. So it would be very nice if you could answer me this 2 questions also. #1 How to make the slider stop 20px before the left screen border so it keeps beeing visible? #2 How to start the "onload" toogle directly from the "slide out status" so it's just a "slide in" and not a "slide out + slide in"? – Michael Aug 06 '11 at 18:38
@AlienWebguy let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2196/discussion-between-michael-and-alienwebguy) – Michael Aug 06 '11 at 22:48

jQuery - Slide out sidebar

1 Answers1