Example: Sliding Div Element

Explanation

This little idea was originally for implementation on the timnash.co.uk main site, but I personally found it to annoying even with the ability to turn it off. It is however a slightly modified version of the CSS Guy original idea and so has just enough deviation to warrant throwing it up here. The code was meant to house an Accessibility block allowing users to skip to contet and change font size hence the div names.

Go back to Putting House in Order

Setting up the container

<div id="aligndiv">

<div id="scrolldiv">

<p>Contents</p>

</div>

<div>

This is the basic setup of both the CSS Guy and my own sliding div technique I have a third div tag pair to also separate closed and open areas. The outer div is used to set the alignment and position of the moving dic as well as the starting point. This could be a column in your layout or as in this case independent.



Basic Javascript

<script type="text/javascript">
function establishTopPosition() {
var slidebar = document.getElementById('slidebar');
var y = 0;
while (slidebar!=null) {
y += slidebar.offsetTop
slidebar = slidebar.offsetParent;
}
return y;
}
function pushMyCart() {
var access = document.getElementById('access');
var closed = document.getElementById('access-menu');

var topPos = establishTopPosition();
if (closed.style.display != "none" ) {
if( window.XMLHttpRequest ) { // IE 6 doesn't implement position fixed nicely...
if (document.documentElement.scrollTop > topPos || self.pageYOffset > topPos) {
access.style.position = 'fixed';
access.style.top = '0';

} else {
access.style.position = '';

}
}
}
else {
access.style.position = '';

}
}

</script>

This is a modified version of CSS guy javascript notice the "if (closed.style.display != "none" )" this is setting the scenes to allow us to stop scrolling if we have collapsed the access-menu div.

The double else statement is pretty ugly code but hey it was 2 in the morning and it does the job fine.



Changing Display status of an element

function switchMenu() {
var el = document.getElementById('access-menu');
if ( el.style.display != "none" ) {
el.style.display = 'none';
}

else {
el.style.display = '';
}
}

I borrowed this code - you can tell I didn't even change the function name though I made a couple of very minor edits, so that rather then closing an element that was specified in the call it closes a div of my choice in this case access-menu If you had multiple elements you might want to call then it makes sense to keep the original code in place



Wrapping it all up

<body onscroll="pushMyCart();">

...

<div id="slidebar">
<div id="access">
<h5>Moving <span>Div</span><a href="#" onclick="switchMenu();" title="Close div access-menu "><img src="images/close.jpg"/></a></h5>
<div id="access-menu">
<p>Access Menu contents here</p>
</div>
</div>
</div>

The onscroll function is called in the body and the onclick switchmenu is the little x icon. that is pretty much there is to it, a couple of things to remember when you are styling do not set access div position initially to 'fixed' or specify a top attribute or things get very messy. The example on this page and all additional styling can be seen if you view source. Sorry its so messy but it was never really meant for show and just if some one might find it interesting.


Any comments please I would like to hear them in the Sorting site post



Go back to Putting House in Order