Søg
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 09:59 Der er 13 kommentarer og
1 løsning

Lukke layer

Når jeg kører musen over et link, åbner den et layer (navMenu_1) f.eks.

<a href="#" onmouseover="show_navMenu('navMenu_1');">link</a>

Og derefter kører man så musen hen til den. Jeg vil så gerne have, at hvis musen IKKE føres henover layeret i løbet af 3 sec, så lukker den selv for layeren med funktionen hide_navMenu('navMenu_1');

Jeg havde forestillet mig noget i retning af:

  setTimeout("close();", 3000);

Og close() kunne så vha. event.clientX og event.clientY checke om musen var indenfor et vist område
Avatar billede roenving Novice
11. juli 2003 - 10:43 #1
Når du åbner dit layer ved vi da hvor den er henne, så vi behøver vel ikke at bruge musepositionering, så vi kan vel gemme oplysningen de 3 sekunder ...

lige under <script>-tagget:
var menuOpen = null;

i din show_navMenu() slutter du af med:

menuOpen = layerObject;//Det aktuelle objekt
setTimeout('closeMenu()',3000)
}//funktion slut

function closeMenu(){
menuOpen.style.display = 'none';
}

-- og du sparer en masse point !-)
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 10:55 #2
Nu tænker jeg mere på, at hvis musen IKKE er over layeret, så skal det lukke.
Avatar billede roenving Novice
11. juli 2003 - 11:00 #3
onmouseout="this.display='none';"

- den vil så ikke konflikte med den anden, det vil bare være en redundans ...
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 11:30 #4
Det forstår jeg ikke helt.

HVIS musen er over et layer, så skal den ikke lukke.
HVIS musen er IKKE er over et layer, så skal den lukke.

Layeret sidder et stykke væk. Det vil sige, at man har 2 sekunder til at nå at få musen over på layeret. Hvis ikke, skal den lukke.

Hmm
Avatar billede roenving Novice
11. juli 2003 - 11:42 #5
Men hvis man nu når at bevæge musen derhen, skal den vel lukkes, hvis man fører musen ud igen ,-)
Avatar billede roenving Novice
11. juli 2003 - 11:45 #6
Og selvfølgelig skal vi lige have denne med:

<div id='navMenu_1' onmouseout="this.display='none';" onmouseover="menuOpen=null;">

function closeMenu(){
if(menuOpen!=null)
menuOpen.style.display = 'none';
}
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 12:24 #7
Jeg ved ikke rigtig om du forstår...

Prøv lige at se det jeg indtil nu har bakset sammen: http://testsiden.dk/test.html

Men det skal så være sådan, at når du ikke ind over layeret i løbet af et par sekunder, skal den lukke igen.
Avatar billede roenving Novice
11. juli 2003 - 12:34 #8
Jeps, jeg tror nok jeg har forstået:

1. Man fører musen over et link, derefter vises den layer ...
2. Layeren har man 2 sek. til at nå ind i, ellers skal den lukke.
3. Når man ind i layeren skal den først lukke hvis man fører musen ud.

Derfor er vi nødt til:

ved 1.: Vise layeren og
ved 2.: sætte en timeout på lukningen ...
ved 3.: NULSTILLE timeouten -- her har jeg gjort det ved at nulstille referencen !-)

Derfor har du funktionen show_navMenu() dertil føjer vi setTimeout, som ligeså godt kan få at vide, hvem den skal reagere overfor.
På layeren bliver vi nødt til at lave mouseouten for at skjule den, og for at stoppe timeout'en må vi også have en mouseover !-)
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 12:51 #9
Ja, men huha, det kan jeg slet ikke overskue :/
Avatar billede roenving Novice
11. juli 2003 - 13:10 #10
Du har det jo næsten !o]

Sådan:

<html>
<head>
<STYLE TYPE="text/css">
.navMenu{position : absolute; display : none; left : 0px; top : 0px; width : 200px; height : 200px; }
</STYLE>
<script language="javascript">
    var menuOpen = null;
    function show_navMenu ( id ) {
      hide_allMenu();
      document.getElementById( id ).style.display = "block";
      menuOpen = document.getElementById( id );
        setTimeout('closeMenu()',3000);
    }
    function closeMenu(){
        if(menuOpen!=null)
        menuOpen.style.display = 'none';
    }
    function hide_navMenu ( id ) {
      document.getElementById( id ).style.display = "none";
    }
        function hide_allMenu () {
      all = document.getElementsByTagName('div')
      for (i=0; i < all.length; i++) {
        if (all[i].id.indexOf('navMenu') > -1) {
          all[i].style.display = "none";
        }
      }
    }
        function moveMenu ( id, x, y) {
      boks = document.getElementById( id );
      boks.style.top = x;
      boks.style.left = y;
    }
</script>
</head>
<body>
<div align="center"><a href="#" onmouseover="show_navMenu('navMenu_1'); moveMenu('navMenu_1', '19', '150');">Vis1</a></div>
<div align="center"><a href="#" onmouseover="show_navMenu('navMenu_2'); moveMenu('navMenu_2', '38', '150');">Vis2</a></div>
<div align="center"><a href="#" onmouseover="show_navMenu('navMenu_3'); moveMenu('navMenu_3', '55', '150');">Vis3</a></div>

<div class='navMenu' id="navMenu_1" onmouseout="this.style.display='none';" onmouseover="menuOpen=null;" style="background-color : red;">
  Navigationsmenu 1<br><br><br><br>
</div>

<div class='navMenu' id="navMenu_2" onmouseout="this.style.display='none';" onmouseover="menuOpen=null;" style="background-color : blue;">
  Navigationsmenu 2<br><br><br><br>
</div>

<div class='navMenu' id="navMenu_3" onmouseout="this.style.display='none';" onmouseover="menuOpen=null;" style="background-color : green;">
  Navigationsmenu 3<br><br><br><br>
</div>
</body>
</html>
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 13:39 #11
svar
Avatar billede roenving Novice
11. juli 2003 - 13:43 #12
Muy bueno '-)
Avatar billede the-gnu.dk Nybegynder
11. juli 2003 - 14:50 #13
Garenteret - og god weekend :)
Avatar billede roenving Novice
11. juli 2003 - 14:55 #14
-- og tak for points ;~}

I lige måde !-)
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
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
24/0811:16 problem med mailbesked Af Pestilensen i Excel
White papers
Flere white papers »