Programmer Diaries: Sideways Sliding DIV (Animated Sideways Sliding Panel in Javascript)

Sideways Sliding DIV (Animated Sideways Sliding Panel in Javascript)

-------------------------------------------------------
Goto blog home
Visit my new blog dedicated to Internet of Things, Embedded Programming & Automation
-------------------------------------------------------
Last week I was in need of a DIV that could slide sideways. My search on the internet led me to an useful article on up and down sliding DIV by Harry Maugans. But I could not find a sideways sliding DIV that could be readily used. So I decided to write my own. The JS code is listed below.

Start out by placing a hyperlink and a DIV on your web page, as shown below.

Next, place the following javascript code within the head tag of your web page. Just remember to remove all the BR tags from the JS code below :)

<script type="text/javascript"><br />
var timer;<br />
<br />
function Init(linkID, divID)<br />
{<br />
document.getElementById(divID).style.display='block';<br />
document.getElementById(divID).style.width=200;<br />
document.getElementById(linkID).innerText = '<<';
}

function SlideToggle(linkID, divID, stepSize, panelWidth)
{
var frequency = panelWidth/stepSize;
//If width is not already zero, then prepare parameters to shrink the DIV
if(parseInt(document.getElementById(divID).style.width) != 0 && document.getElementById(divID).style.width != '')
{
panelWidth = 0;
stepSize = -stepSize;
}
else
{
if(document.getElementById(divID).style.width == '')
{
document.getElementById(divID).style.width = stepSize;
}
}
timer = setInterval('Slide(\''+linkID+'\', \''+divID+'\', '+stepSize+', '+panelWidth+')', frequency);</P><p>}<br />
<br />
function Slide(linkID, divID, stepSize, panelWidth)<br />
{<br />
if(panelWidth != 0 && parseInt(document.getElementById(divID).style.width) < panelWidth)<br />
{<br />
document.getElementById(divID).style.width = parseInt(document.getElementById(divID).style.width) + stepSize;<br />
}<br />
else if(panelWidth == 0 && parseInt(document.getElementById(divID).style.width) > panelWidth)<br />
{<br />
document.getElementById(divID).style.width = parseInt(document.getElementById(divID).style.width) + stepSize;<br />
}<br />
else<br />
{<br />
clearInterval(timer);<br />
if(document.getElementById(linkID).innerText=='<<')<br />
{<br />
document.getElementById(linkID).innerText = '>>';<br />
}<br />
else<br />
{<br />
document.getElementById(linkID).innerText = '<<';<br />
}<br />
}<br />
}<br />
</script>

And of course don't forget to initialize the the DIV on page onload event by calling the Init function.

1 comment:

kulzSeptember 17, 2011 at 8:44 AM
I removed the
tags, but still it didn't work! I wrote nothing else on the page except this coding, but only a blank page showed up!
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)