CODEWITHSUNDEEP
javascript
001
001

Reputation: 65205

Slideout page using javascript?

How do you create your own slideout page using javascript?

see http://support.tweetboard.com/home/#installation click on "tweets"

Upvotes: 2

Views: 846

Answers (2)

Adam
Adam

Reputation: 1874

Here's a very simple solution using jQuery's animate method for the meat. (Working demo and code below.)

HTML

You need three basic elements: a container (#slideout), its contents (#slideout_contents), and a toggle button (#slideout_toggle).

<body>
<div>Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents.</div>
<div id="slideout">
    <div id="slideout_contents">
        <a id="slideout_toggle">Open</a>
        <h1>Header</h1>
        <p>Some text.</p>
        <p>Some text.</p>
    </div>
</div>
</body>​

CSS

You need to position it absolutely so it hugs the left edge of the screen.

body {
    padding: 0px;
    margin: 0px;
}
#slideout, #slideout_contents, #slideout_toggle {
    background: #000; /* to see it on a blank page */
    color: #fff;
    position: absolute;
    top: 0px;
}
#slideout_contents {
    left: -100px; /* adjust these */
    width: 100px;
    height: 300px;
}
#slideout_toggle {
    display: block;
    text-decoration: none;
    top: 50%;
    left: 100px;
    width: 50px;
    text-align: center;
}​

JavaScript (jQuery)

jQuery's animate method takes care of the rest.

$('#slideout_toggle').toggle(function(){
    $(this).html('Close');
    $('#slideout_contents').animate({'left': '0px'});
},function(){
    $(this).html('Open');
    $('#slideout_contents').animate({'left': '-100px'});
});

Upvotes: 2

Robusto
Robusto

Reputation: 31913

Any number of sites can show you how to do this. Here's one.

http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide

Upvotes: 1

Related Questions