Søg
Avatar billede refshauge Nybegynder
30. maj 2003 - 11:37 Der er 11 kommentarer og
1 løsning

TimeOut problemer i undermenu

Jeg har nedenstående lille kode, som burde åbne en undermenu og lukke den igen når man forlader undermenuen. Dog skal der her være en pause på et sekund. Jeg kan bare ikke få det til at virke.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
    var ns6 = (document.getElementById && !document.all)?true:false;
    var gamle = "oldemptylayer"
    to=setTimeout("skjul('oldemptylayer')",1000);
    var thebase = true
   
    function vis(obj,xpos,ypos){
        gamle = obj;
        //cleartimeout(to);
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
            else if (document.all){sabine = eval("document.all"+obj+".style");}
            else {sabine = eval("document."+obj+".style");}
       
            if (ns6){sabine.display="";}
            else {
                if (document.layers) {sabine.visibility = "show";}
                else {sabine.visibility = "visible";}
            }
    }
   
    function skjul(obj){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
   
        if (ns6){sabine.display="none";}
        else {
            if (document.layers) {sabine.visibility = "hide";}
            else {sabine.visibility = "hidden";}
        }
    }
   
    function flyt(obj,xpos,ypos){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
        sabine.top = ypos
        sabine.left = xpos
    }
   
    function flytright(obj,xpos,ypos){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
        sabine.top = ypos
        sabine.right = xpos
    }
   
    function timefunk(objekt) {
        to=setTimeout("skjul(objekt)",1000);
    }
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">


<div ID="a" STYLE="position: absolute; top:85; left:-250; z-index: 30;" align="left" onMouseover="vis('a')" onMouseout=setTimeout("skjul('a')",1000)><table>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link1</a></td></tr>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link2</a></td></tr>
</table></div>

<div ID="b" STYLE="position: absolute; top:85; left:-250; z-index: 30;" align="left" onMouseover="vis('b')" onMouseout=setTimeout("skjul('b')",1000)><table>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link1</a></td></tr>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link2</a></td></tr>
</table></div>


<div id="oldemptylayer" style="position:absolute; top:-200px; left:-303px;width:300; height:250;">
</div>


<a href="/" onMouseOver="vis('a')" onMouseOut="skjul('a')">Klik her for at åbne meneun 1</a> &nbsp;&nbsp;&nbsp;
<a href="/" onMouseOver="vis('b')" onMouseOut="skjul('b')">Klik her for at åbne meneun 2 </a>



<script language="JavaScript">
<!--
        skjul('a');
        flyt('a',30,32);
        skjul('b');
        flyt('b',230,32);
//-->
</script>



</body>
</html>
Avatar billede roenving Novice
30. maj 2003 - 11:40 #1
Jeg lærte den anden dag, at skal man overføre variable igennem timeout skal det være:

to=setTimeout("skjul('"+oldemptylayer+"')",1000);

-- så prøv det ...
Avatar billede refshauge Nybegynder
30. maj 2003 - 11:45 #2
OK, tak til roensving, det hjalp i hvert fald lidt.

Nu er problemet, at den lukker undermenuen hvis man står mere end 1 sek på et af linksene i undermenuen.

Koden ser nu således ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
    var ns6 = (document.getElementById && !document.all)?true:false;
    var gamle = "oldemptylayer"
    to=setTimeout("skjul('oldemptylayer')",1000);
    var thebase = true
   
    function vis(obj,xpos,ypos){
        gamle = obj;
        //cleartimeout(to);
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
            else if (document.all){sabine = eval("document.all"+obj+".style");}
            else {sabine = eval("document."+obj+".style");}
       
            if (ns6){sabine.display="";}
            else {
                if (document.layers) {sabine.visibility = "show";}
                else {sabine.visibility = "visible";}
            }
    }
   
    function skjul(obj){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
   
        if (ns6){sabine.display="none";}
        else {
            if (document.layers) {sabine.visibility = "hide";}
            else {sabine.visibility = "hidden";}
        }
    }
   
    function flyt(obj,xpos,ypos){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
        sabine.top = ypos
        sabine.left = xpos
    }
   
    function flytright(obj,xpos,ypos){
        if (document.getElementById){sabine = eval("document.getElementById('"+obj+"').style");}
        else if (document.all){sabine = eval("document.all"+obj+".style");}
        else {sabine = eval("document."+obj+".style");}
        sabine.top = ypos
        sabine.right = xpos
    }
   
    function timefunk(objekt) {
        to=setTimeout("skjul('"+objekt+"')",1000);
    }
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">


<div ID="a" STYLE="position: absolute; top:85; left:-250; z-index: 30;" align="left" onMouseover="vis('a')" onMouseout="timefunk('a')"><table>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link1</a></td></tr>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link2</a></td></tr>
</table></div>

<div ID="b" STYLE="position: absolute; top:85; left:-250; z-index: 30;" align="left" onMouseover="vis('b')" onMouseout="timefunk('b')"><table>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link1</a></td></tr>
<tr><td></td><td align="left"><a href="/" class="undermenu_1">Link2</a></td></tr>
</table></div>


<div id="oldemptylayer" style="position:absolute; top:-200px; left:-303px;width:300; height:250;">
</div>


<a href="/" onMouseOver="vis('a')" onMouseOut="skjul('a')">Klik her for at åbne meneun 1</a> &nbsp;&nbsp;&nbsp;
<a href="/" onMouseOver="vis('b')" onMouseOut="skjul('b')">Klik her for at åbne meneun 2 </a>



<script language="JavaScript">
<!--
        skjul('a');
        flyt('a',30,32);
        skjul('b');
        flyt('b',230,32);
//-->
</script>



</body>
</html>
Avatar billede roenving Novice
30. maj 2003 - 12:02 #3
Hvad bruges den tidsfunktion til ?-)

Jeg skulle bruge en menu med undermenuer den anden dag, hvor det bare skulle flytte rundt, det endte med:

-- lidt langt, men funktionen skal jo med (det ligger i en iframe):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>

<TITLE>Turneringsmenu</TITLE>

<LINK HREF="turnstyle.css" REL="stylesheet" TYPE="text/css">
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="funktioner.js"></SCRIPT>

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var men = 5;// Number of active menus

function posText(){
  for(i=1;i<=men;i++){
    punkt=document.getElementById('menupunkt'+i)
    objX=parseInt(punkt.offsetLeft)+parseInt(punkt.offsetParent.offsetLeft) +parseInt(punkt.offsetParent.offsetParent.offsetLeft) +parseInt(punkt.offsetParent.offsetParent.offsetParent.offsetLeft) +45+"px";
    objY=parseInt(punkt.offsetTop)+parseInt(punkt.offsetParent.offsetTop)+parseInt(punkt.offsetParent.offsetParent.offsetTop)+parseInt(punkt.offsetParent.offsetParent.offsetParent.offsetTop)+5+"px";
    obj=document.getElementById('menutext'+i);
    obj.style.left=objX;
    obj.style.top=objY;
  }
}

function showFrame(frm){
  par=getI(top.document,frm).parentNode;
  frms=getTs(par,"IFRAME");
  for (i=0;i<frms.length;i++){
    if (frms[i].id==frm){
      frms[i].style.display="block"
    }else{
      frms[i].style.display="none"
    }
  }
}

function showMenu(nr){
    obj=document.getElementById('menutext'+nr);
    obj.style.display="block";
}

function hideMenu(nr){
    document.getElementById('menutext'+nr).style.display='none';
}
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#0099CC" STYLE="display:block;overflow:no" ONLOAD="posText()">
<DIV ID="menu" STYLE="display:block;overflow:no">

    <DIV ID="menuover" CLASS="menuOverskrift" STYLE="display:block">Hvad vil du</DIV><BR><BR>
  <TABLE ONMOUSEOVER="showMenu(1);" ONMOUSEOUT="hideMenu(1);"><TR><TD>
    <DIV ID="menupunkt1" CLASS="menuPunkt" STYLE="display:block"><A HREF="java script:showFrame('Start');">Start/Instruktion</A><BR>
    <DIV ID="menutext1" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Start');">&nbsp;&nbsp;Start&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>
  <BR>
    <TABLE ONMOUSEOVER="showMenu(2);" ONMOUSEOUT="hideMenu(2);"><TR><TD>
    <DIV ID="menupunkt2" CLASS="menuPunkt" STYLE="display:block">Indtastning m.v.<BR><BR>
    <DIV ID="menutext2" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Init');">&nbsp;&nbsp;Start&nbsp;ny&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A><BR><A HREF="java script:showFrame('Players');">&nbsp;&nbsp;Spillere&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(3);" ONMOUSEOUT="hideMenu(3);"><TR><TD>
    <DIV ID="menupunkt3" CLASS="menuPunkt" STYLE="display:block">Menu 3    <BR><BR>
    <DIV ID="menutext3" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(4);" ONMOUSEOUT="hideMenu(4);"><TR><TD>
    <DIV ID="menupunkt4" CLASS="menuPunkt" STYLE="display:block">Menu 4    <BR><BR>
    <DIV ID="menutext4" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(5);" ONMOUSEOUT="hideMenu(5);"><TR><TD>
    <DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block">Menu 5    <BR><BR>
    <DIV ID="menutext5" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>


</DIV>

</BODY>

</HTML>
Avatar billede roenving Novice
30. maj 2003 - 12:08 #4
-- øeh, kan ikke lige gennemskue om du ikke også skal have stylesheetet med ...

-- kigger lige
Avatar billede refshauge Nybegynder
30. maj 2003 - 12:08 #5
Tidsfunktionen skal bruges til en lille pause inden undermenuen lukkes. Hvis man fjerner tidsforsinkelsen virker det fint, men tidsforsinkelsen skal være der.

Jeg har læst mig frem til, at man kan annulere en pause med cleartimeout, men kan ikke få det til at virke...
Avatar billede refshauge Nybegynder
30. maj 2003 - 12:09 #6
Jeg skriver cleartimeout(to) i funktionen vis().
Det er godt nok udkommenteret...
Avatar billede refshauge Nybegynder
30. maj 2003 - 12:09 #7
Har også prøvet cleartimeout('"+to+"')
Avatar billede roenving Novice
30. maj 2003 - 12:15 #8
Uff ;-| en alvorlig stavefejl (ihvertfald i javascript ;-)

cleartimeout --> clearTimeout

Den menu jeg dumpede bygger på, at undermenuen fysisk ligger lidt indover hovedpunktet, så musen bevæges direkte ind over ...

Effekten var bare perfekt, da jeg satte hver menupunkt og underpunkter ind i en table ...

Jeg har selv tidligere haft fat i sådan noget med timeout, men principielt er det jo ikke så godt, så jeg var glad for at få det til at virke
Avatar billede roenving Novice
30. maj 2003 - 12:25 #9
-- jeg kiggede lige selv på min menu uden stylesheet -- det ser lidt kikset ud, men med baggrunde på undermenuerne tror jeg godt den kan gennemskues ...

hvis du er interesseret i at se det bedre, kan du kopiere dette ind som

<style>
.menuOverskrift {
font-family: verdana,arial,sans-serif ;
color: #CCCCCC ;
font-size: 14pt ;
font-weight: bold ;
font-style: italic ;
}

.menuPunkt, .menuPunkt a{
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: #CCCCCC ;
font-size: 10pt ;
font-weight: bold ;
cursor:hand;
}

.menuText, .menuText a{
background-color:#66CCCC;
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: #30C ;
font-size: 10pt ;
font-weight: normal ;
cursor:hand;
}
</style>
Avatar billede refshauge Nybegynder
30. maj 2003 - 12:28 #10
Hurra - så virker det.
Tænk sig at sådan en lille ting kan gøre så stor forskel :-)

Laver du et svar, så skal du få nogle point
Avatar billede roenving Novice
30. maj 2003 - 12:29 #11
Bingo '-)
Avatar billede roenving Novice
30. maj 2003 - 12:33 #12
-- og takker for points ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
I dag 10:24 Kan Excel selv beregne alder? Af leahcim i Excel
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »