How do you create your own slideout page using javascript?
see http://support.tweetboard.com/home/#installation click on "tweets"
Add a comment
|
2 Answers
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'});
});
Comments
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
