For people that is not using sNews and want to be able
to have a toggle function on their websites this might come in handy.
Now a disclaimer:
This snippet is not mine, it has been on my harddrive for sometime, and I can honestly not remember where I got
it from, so if anybody knows please let me know so I can give credit
where credit is due...
Now, showing a div by clicking a link. then hiding it by clicking another link is fairly simple. You need a
javascript snippet in order to do this. Click the "Show JS code" and copy and paste this snippet into a document
which you upload to your server named motionpack.js
Show JS code |
Close JS code
var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}
function startslide(objname){
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == "down"){
obj[objname].style.height = "1px";
}
obj[objname].style.display = "block";
timerID[objname] = setInterval('slidetick('' + objname + '');',timerlen);
}
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;
obj[objname].style.height = d + "px";
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == "up")
obj[objname].style.display = "none";
obj[objname].style.height = endHeight[objname] + "px";
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
// - Last function. Making the same link both open and close div !
function toggleSlide(objname){
if(document.getElementById(objname).style.display == "none"){
// div is hidden, so let's slide down
slidedown(objname);
}else{
// div is not hidden, so slide up
slideup(objname);
}
}
What you do after this is placing a link to the JS file in your header, like this:
I have my script put in the folder scripts/ that's why it looks this way. Now when the "engine" is up,
you need to add the code to your document in order to make it work. So just to try it out, open up the
document and add something like:
testing testing
Slide down
|
Slide up
Now you should have a working toggled H3 title there, right ? Well, if the existance of
two links making it possible to show/hide is to much, we simply add another function to the
motionpack.js in order to be able to have but one occurance of a link.
(Go check the function on the bottom of the JS file. Which already been added.)
And instead of the previous code in the document we add this:
Show/hide - div
This is another test!
Can you see this aswell ?
And you will end up with something similar to the below which is slided open and closed by using the same link:
Show/hide - div
This is another test!
Can you see this aswell ?
Two major things to remember:
Numero Uno: The height must be set or nothing will show, so this instance of the snippet will
have to be altered depending on what you need to show inside the toggled div.
Numero Dos: the id can't be the same if you're using this function on more than one occasion
in the same article, you need to change that to something unique for each div. Like first toggle div could be mydiv1
the second one could be mydiv2 and so on.
Hope this was of any use for someone. And once again, please contact me if you would know whom the original auther of this
is so I can credit him/her for this.
This article hasn't been commented yet.