6 svar · 487 visningar · startad av toja
Har tack vara god hjälp från Jawbreaker fått hjälp att få fram detta...
<html>
<head>
<title>menyTest</title>
<script language="javascript" type="text/javascript">
<!--
var g_fdrs = new Array();
function Fade( p_id )
{
this.id = p_id;
this.obj = document.getElementById( p_id );
this.tmr = null;
this.opacity = 0;
this.diff = 10;
this.fadeIn = FDR_fadeIn;
this.stayIn = FDR_stayIn;
this.fadeOut = FDR_fadeOut;
this.fade = FDR_fade;
}
function FDR_fadeIn()
{
this.diff = 4;
this.obj.style.display = "block";
this.fade();
}
function FDR_stayIn()
{
this.diff = 4;
this.obj.style.display = "block";
this.fade();
}
function FDR_fadeOut()
{
this.diff = -2;
this.fade();
}
function FDR_fade()
{
if ( this.tmr )
clearTimeout( this.tmr );
this.opacity += this.diff;
if ( this.opacity > 100 )
this.opacity = 100;
else if ( this.opacity < 0 )
this.opacity = 0;
if ( document.getElementById && document.all )
this.obj.style.filter = "alpha(opacity="+this.opacity+")";
else if ( document.getElementById && !document.all )
this.obj.style.MozOpacity = this.opacity / 100;
if ( this.opacity > 0 && this.opacity < 100 )
this.tmr = setTimeout( "g_fdrs['" + this.id + "'].fade();", 10 );
else if ( 0 == this.opacity )
this.obj.style.display = "none";
}
function doOnLoad()
{
var d = document.getElementsByTagName( "div" );
for ( var i = 0; i < d.length; i++ )
{
if ( 0 == d.item(i).id.indexOf( "fade" ))
{
var id = "obj_" + d.item(i).id;
g_fdrs[id] = new Fade( id );
d.item(i).onmouseover = new Function( "g_fdrs['" + id + "'].fadeIn();" );
d.item(i).onmouseout = new Function( "g_fdrs['" + id + "'].fadeOut();" );
}
if ( 0 == d.item(i).id.indexOf( "obj_" ))
{
var id = d.item(i).id;
g_fdrs[id] = new Fade( id );
d.item(i).onmouseover = new Function( "g_fdrs['" + id + "'].stayIn();" );
d.item(i).onmouseout = new Function( "g_fdrs['" + id + "'].fadeOut();" );
}
}
}
//-->
</script>
<style type="text/css">
.ny { position: absolute; left: 313px; width:200px; display: none; background: #ccc; }
.old { position: relative; left: 0px; width:300px; background: #ececec; }
</style>
</head>
<body onload="doOnLoad();">
<table>
<tr>
<td><div class="ny" id="obj_fade1">Extra text 1</div>
<div id="fade1" class="old">Meny variant 1</div></td>
</tr>
<tr>
<td><div class="ny" id="obj_fade2">Extra text 2</div>
<div id="fade2" class="old">Meny variant 2</div></td>
</tr>
<tr>
<td><div class="ny" id="obj_fade3">Extra text 3</div>
<div id="fade3" class="old">Meny variant 3</div></td>
</tr>
</table>
</body>
</html>
Allt fungerar super...
men nu vill jag ju att "undermenyerna" ska stanna kvar.. om man tar musen över dessa... samt att de ska tonas bort när man tar bort musen... OM nu inte musen dras tillbaka till den div:en som tonade fram lagret från början!
Jawbreaker, pallar du hoppa på detta också..?!!
Verkar som det löste sig själv... efter en massa prov och liknande...
För er som proffs.. ser ni något knas med koden... eller ser det bra ut även i era ögon!??
Får jag ett godkännande av tex Jawbreaker som hjälpt mig på vägen hit så kan jag äntligen acceptera detta som svar!
Redigerar inlägget ovan!!!
Hmm... märkte en konstig sak med scriptet ovan!
När jag kör på min dator går fade:n med en bra hastighet... samma gäller min brors dator...
men när jag körde på farsans dator, av äldre modell typ 333:a eller vafan det är.. så gick den segt.. nästan 3 ggr så segt...
tänkte att det hade med den datorn att göra.. fast det inte borde spela roll...
sen testa en kolega scriptet i safari.. på en sprillans ny MAC... vad händer.. lika segt där...
vad beror detta på..?!!
varför seg på vissa och normal på vissa.?!!
Visst beror lite på prestandan på maskinen, men den största skillnaden i detta fall beror sannolikt på kompilationen av webbläsaren eller närmare bestämt dess javascript-interpreter. När du som i detta fall använder en timeout på 10 ms på funktionsanropen så kommer tiden som själva funktionen tar att exekvera att bli proportioneligt väldigt stor jämfört med "vilotiden" därimellan.
okej... men för att få en bra övergång på de flesta datorerna, vad tror du skulle kunna vara bra tid för timeout:en ...?! vill ju inte att det inte ska synnas om man kör i en "nyare" webläsare för att den kompilerar koden så mycket snabbare...
Hej igen. Hade inte tid för så mycket javascriptande i helgen, men du har ju lyckats bra själv ser det ut som...
Tyvärr har jag inga värden som kan vara bra på timeouten för att det ska fungera bra på "alla" datorer. Men det är väl bara att experimentera med lite längre tider på timeouten, och justera diff-värdena lite för att kompensera för den längre timeout-tiden så får du säkert ihop något som fungerar.
Hehe... verkar fungera fint nu... bara vissa datorer som är lite segare.. det kan vi leva me! Tack för alla svar Jawbreaker! :D
