How do you create your own slideout page using javascript?
see http://support.tweetboard.com/home/#installation click on "tweets"
+1
A:
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
Robusto
2010-05-11 02:23:45
+2
A:
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'});
});
Adam
2010-05-11 02:32:28