Show / Hide Div's with Cookie?
I wanted to create a search navigation bar, witch will also be used in the category browsing - almost everywhere in the site. The navigation bar consists of two parts, the navigation and the filter.
Well the filter is really the search_form template, but redesigned.
So my biggest problem was to remember the div-state - an open filter should be open, a closed one should be closed. So there's only one way - using cookies (a pain in the ...).
Anyway, if you ever need a search filter (or closed/open div) with "memory function", here's the code:
First, we assign the cookie function (before the </head> tag):
<script type="text/javascript">
function Open(cls,nu,h,days){
var objs=bycls(cls,document),z0=0;
for (var z0=0;z0<objs.length;z0++){
objs[z0].style.height=(z0!=nu?0:objs[z0].offsetHeight>h-5?0:h)+'px';
}
if (typeof(days)=='number'){
cookieset(cls,nu+'|'+objs[nu].offsetHeight,days);
}
return false;
}
function cookieget(nme){
var rtn=cookie(nme),objs=bycls(nme,document);
if (rtn){
rtn=rtn.split('|');
if (objs[rtn[0]]){
objs[rtn[0]].style.height=rtn[1]+'px';
}
}
}
function cookie(nme){
var re=new RegExp(nme+'=[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}
function cookieset(nme,v,days){
document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}
function bycls(nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
}
</script>
Then we need to search for the cookie (again before the closing head tag):
<script type="text/javascript">
window.onload = function() {
cookieget('filter_search');
}
</script>
assign the div to our styleshteet (style.css) :
.filter_search {
position:relative;
overflow:hidden;
height:0px;
}
and put the div where you want to appear it:
<div class="filter_search">
your content
</div>
now we need to toggle it (show/hide). Best with a button, isn't it?
Draw a nice button and insert it like this:
<a class="filter_button" href="" onclick="return Open('filter_search',0,140,1);"></a>
The "140" you see is the height of the expanded div - change it to your needs.
So what's left? Aaah, the button. Assuming you didn't change filenames, put this in your style.css:
.filter_button {
width: 90px;
height: 30px;
cursor: pointer;
display: block;
background-image: url( 'images/filter.png' );
}
.filter_button:hover {
background-image: url( 'images/filter_hover.png' );
}
Just change the path/width/height to your button and you are ready to go.
So this is how it looks like on my sandbox (sorry, no demo available yet).
Closed filter bar
Button Hover
Expanded filter bar
If you need any help on that stuff, just drop me a line
Cheers
PS: Project will be finished in 6-7 days.
PPS: 4images is awesome!
