Slide page using javascript?
How can I create my own slide page using javascript?
see http://support.tweetboard.com/home/#installation click "tweets"
a source to share
Here's a very simple solution using jQuery animate
meat method . (Working demo and code below.)
Html
You need three main 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 set it absolutely so that 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)
The jQuery animate
method will take 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'});
});
a source to share
Any number of sites can show you how to do this. Here alone.
http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide
a source to share