social balk uitklappen

[jorisvho]

Ik ben bezig met een website design, hierbij is er een social wolk (links boven) en deze moet langzaam naar beneden vallen. Dit heb ik nu met css voor elkaar gekregen, echter is dit geen mooi resultaat. Op internet vond ik dit script om zo iets te maken.

[JS]var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.dropdown=function(){
var p={fade:1,slide:1,active:0,timeout:200}, init=function(n,o){
for(s in o){p=o} p.n=n; this.build()
};
init.prototype.build=function(){
this.h=[]; this.c=[]; this.z=1000;
var s=T$$('ul',T$(p.id)), l=s.length, i=0; p.speed=p.speed?p.speed*.1:.5;
for(i;i<l;i++){
var h=s.parentNode; this.h=h; this.c=s;
h.onmouseover=new Function(p.n+'.show('+i+',1)');
h.onmouseout=new Function(p.n+'.show('+i+')')
}
};
init.prototype.show=function(x,d){
var c=this.c[x], h=this.h[x];
clearInterval(c.t); clearInterval(c.i); c.style.overflow='hidden';
if(d){
if(p.active&&h.className.indexOf(p.active)==-1){h.className+=' '+p.active}
if(p.fade||p.slide){
c.style.display='block';
if(!c.m){
if(p.slide){
c.style.visibility='hidden'; c.m=c.offsetHeight; c.style.height='0'; c.style.visibility=''
}else{
c.m=100; c.style.opacity=0; c.style.filter='alpha(opacity=0)'
}
c.v=0
}
if(p.slide){
if(c.m==c.v){
c.style.overflow='visible'
}else{
c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20)
}
}else{
c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20)
}
}else{
c.style.zIndex=this.z; c.style.display='block'
}
}else{
c.t=setTimeout(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout)
}
};
function hide(c,t,h,s){
if(s){h.className=h.className.replace(s,'')}
if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}else{c.style.display='none'}
}
function slide(c,t,d){
if(c.v==t){
clearInterval(c.i); c.i=0;
if(d==1){
if(p.fade){c.style.filter=''; c.style.opacity=1}
c.style.overflow='visible'
}
}else{
c.v=(t-Math.floor(Math.abs(t-c.v)*p.speed)*d);
if(p.slide){c.style.height=c.v+'px'}
if(p.fade){var o=c.v/c.m; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'}
}
}
return{init:init}
}();[/JS]

kan iemand mij helpen met het invoegen van dit script in mijn webstite? Je kunt de website vinden op colorsoft.host56.com

 

[Robin S]

Het script leest nogal ingewikkeld, met alle korte benamingen. Vaak is het trouwens toch makkelijker om zelf iets te maken omdat zo'n script nét niet helemaal doet wat je wil
Bekijk dit eens: http://robins.awardspace.com/helpmij/social/

Opmerkingen bij de broncode:
- HTML, CSS: ik heb een wrapper met position: "absolute", bottom: 0 toegevoegd. Div met id="social" heeft overflow: "hidden".
- Er is een Timer-klasse (Timer.js)
- Er is een addEvent-functie (crossBrowser.js)
- Initialisatie in de main-functie: er wordt een expand- en collapse-Timer aangemaakt. Beiden worden gestart en gestopt bij de corresponderende events (mouseover, mouseout). Terwijl ze lopen, wordt de hoogte van #social aangepast. Daardoor worden automatisch de links (on)zichtbaar.

 

[jorisvho]

Erg bedankt voor de snelle hulp, het is precies het juiste wat ik wil.

Ik heb nu alleen een probleem met de tekst van mijn content. Die word nu naar onderen gedrukt, maar moet blijven staan waar die staat.
Hoe kan ik dat oplossen?

 

[Robin S]

Mooizo Even de position op absolute zetten, dan blijft de rest mooi staan

 

[jorisvho]

Helemaal super bedankt