Avatar billede tingholm Mester
06. oktober 2002 - 15:51 Der er 13 kommentarer og
1 løsning

kan der laves en "time out" ??

fik denne dropdown-menu af t_kriss, og det er fint nok, men kan man ikke gøre sådan at hvis musen gøres over og væk igen så forsvinder dropdown'en ?? nu skal man klikke uden for menuen for at få det væk !!

kode:

<HTML><HEAD>
<script language="JavaScript" type="text/javascript">
// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
//
// ************************
// layer utility routines *
// ************************

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
    styleObject.visibility = newVisibility;
    return true;
    } else {
    // we couldn't find the object, so we can't change its visibility
    return false;
    }
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
    styleObject.left = newXCoordinate;
    styleObject.top = newYCoordinate;
    return true;
    } else {
    // we couldn't find the object, so we can't very well move it
    return false;
    }
} // moveObject





<!--

// ********************************
// application-specific functions *
// ********************************

function showMenu(menuNumber, eventObj) {
    //    alert(eventObj);
    hideAllMenus();
    var menuId = 'menu' + menuNumber;
    if(changeObjectVisibility(menuId, 'visible')) {
    var menuTitle = getStyleObject('menuTitle' + menuNumber);
    menuTitle.backgroundColor = '#ff9900';
    eventObj.cancelBubble = true;
    return true;
    } else {
    return false;
    }
}

var numMenus = 2;

function hideAllMenus() {
    for(counter = 1; counter <= numMenus; counter++) {
    changeObjectVisibility('menu' + counter, 'hidden');
    var menuTitle = getStyleObject('menuTitle' + counter);
    menuTitle.backgroundColor = '#000000';
    }
}

document.onclick = hideAllMenus;


// -->
</SCRIPT>

 

<STYLE>
.menu { POSITION: absolute; VISIBILITY: hidden; BACKGROUND-COLOR: #999999; LAYER-BACKGROUND-COLOR: #999999; BORDER-LEFT: 1px solid black; BORDER-TOP: 1px solid black; BORDER-BOTTOM: 3px solid black; BORDER-RIGHT: 3px solid black; PADDING: 3px; z-index: 10; width: 100 }

.menuTitle { width: 35; BORDER-LEFT: 1px solid black; BORDER-TOP: 1px solid black; BORDER-BOTTOM: 1px solid black; BORDER-RIGHT: 1px solid black; PADDING: 3px; BACKGROUND-COLOR: #000000 }

.menuBarLink { text-decoration: none; font-style: bold; color: #ffffff; font-family: helvetica,arial; outline: none }

.menuLink { text-decoration: none; font-style: bold; color: #000000; outline: none }
a:hover.menuLink { text-decoration: none; font-style: bold; color: #ffffff }

#menuTitle1 { position: absolute; left: 10; top: 10; font-size: 14px }
#menuTitle2 { position: absolute; left: 50; top: 10; font-size: 14px }

#menu1 { position: absolute; left: 13; top: 29; font-size: 14px }
#menu2 { position: absolute; left: 53; top: 29; font-size: 14px }

#contentDiv { position: absolute; left: 10; top: 40; font-size: 14px }

</STYLE>

<BODY bgcolor="white">

<div id=menu1 class=menu onclick=event.cancelBubble = true;"><a href="#" class=menuLink>Home page</a><br>
<a href="#" class=menuLink>Fun</a><br>
<a href="#" class=menuLink>Serious</a></div>

<div id=menu2 class=menu onclick="event.cancelBubble = true;"><a href="#" class=menuLink>FAQ</a><br>
<a href="#" class=menuLink>Contact</a><br>
<a href="#" class=menuLink>About...</a></div>

<div id=menuTitle1 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('1', event);" class=menuBarLink>Go</a></div>
<div id=menuTitle2 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('2', event);" class=menuBarLink>Help</a></div>

<div id=contentDiv>

Select an option from the menu above.

</div>
</BODY></HTML>
Avatar billede oskar Nybegynder
06. oktober 2002 - 16:05 #1
Linien
document.onclick = hideAllMenus;
ændres til:
document.onmouseover = hideAllMenus;

Og så mangler du </head> lige foran <body>
Avatar billede oskar Nybegynder
06. oktober 2002 - 16:06 #2
Glem venligst det jeg lige har sendt. Det dur ikke for underpunkter forsvinder når man forsøger at ramme dem.
Avatar billede tingholm Mester
06. oktober 2002 - 16:13 #3
kan man ikka lave
document.onclick = hideAllMenus;
til
document.efter 15 sekunder passiv = hideAllMenus;
??
nok ikke lige med de ord men.....
Avatar billede freakofnature Nybegynder
06. oktober 2002 - 22:24 #4
<HTML><HEAD>
<script language="JavaScript" type="text/javascript">
// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
//
// ************************
// layer utility routines *
// ************************

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
    styleObject.visibility = newVisibility;
    return true;
    } else {
    // we couldn't find the object, so we can't change its visibility
    return false;
    }
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
    styleObject.left = newXCoordinate;
    styleObject.top = newYCoordinate;
    return true;
    } else {
    // we couldn't find the object, so we can't very well move it
    return false;
    }
} // moveObject





<!--

// ********************************
// application-specific functions *
// ********************************

function showMenu(menuNumber, eventObj) {
    //    alert(eventObj);
    hideAllMenus();
    var menuId = 'menu' + menuNumber;
    if(changeObjectVisibility(menuId, 'visible')) {
    var menuTitle = getStyleObject('menuTitle' + menuNumber);
    menuTitle.backgroundColor = '#ff9900';
    eventObj.cancelBubble = true;
    return true;
    } else {
    return false;
    }
}

var numMenus = 2;

function hideAllMenus() {
    for(counter = 1; counter <= numMenus; counter++) {
    changeObjectVisibility('menu' + counter, 'hidden');
    var menuTitle = getStyleObject('menuTitle' + counter);
    menuTitle.backgroundColor = '#000000';
    }
}

document.onclick = hideAllMenus;

// jeg har tilføjet denne function, du kan selv udvide den efter behov

function stay(obj){

    document.getElementById(obj).style.visibility = "visible"

}
       

// HUSK AT TILFØJE ONMOUSEOVER OG ONMOUSEOUT VED MENUERNE

// -->
</SCRIPT>

 

<STYLE>
.menu { POSITION: absolute; VISIBILITY: hidden; BACKGROUND-COLOR: #999999; LAYER-BACKGROUND-COLOR: #999999; BORDER-LEFT: 1px solid black; BORDER-TOP: 1px solid black; BORDER-BOTTOM: 3px solid black; BORDER-RIGHT: 3px solid black; PADDING: 3px; z-index: 10; width: 100 }

.menuTitle { width: 35; BORDER-LEFT: 1px solid black; BORDER-TOP: 1px solid black; BORDER-BOTTOM: 1px solid black; BORDER-RIGHT: 1px solid black; PADDING: 3px; BACKGROUND-COLOR: #000000 }

.menuBarLink { text-decoration: none; font-style: bold; color: #ffffff; font-family: helvetica,arial; outline: none }

.menuLink { text-decoration: none; font-style: bold; color: #000000; outline: none }
a:hover.menuLink { text-decoration: none; font-style: bold; color: #ffffff }

#menuTitle1 { position: absolute; left: 10; top: 10; font-size: 14px }
#menuTitle2 { position: absolute; left: 50; top: 10; font-size: 14px }

#menu1 { position: absolute; left: 13; top: 29; font-size: 14px }
#menu2 { position: absolute; left: 53; top: 29; font-size: 14px }

#contentDiv { position: absolute; left: 10; top: 40; font-size: 14px }

</STYLE>

<BODY bgcolor="white">

<div id=menu1 class=menu onclick=event.cancelBubble = true;" onmouseout="hideAllMenus()" onmouseover="stay('menu1')"><a href="#" class=menuLink>Home page</a><br>
<a href="#" class=menuLink>Fun</a><br>
<a href="#" class=menuLink>Serious</a></div>

<div id=menu2 class=menu onclick="event.cancelBubble = true;"onmouseout="hideAllMenus()" onmouseover="stay('menu2')"><a href="#" class=menuLink>FAQ</a><br>
<a href="#" class=menuLink>Contact</a><br>
<a href="#" class=menuLink>About...</a></div>

<div id=menuTitle1 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('1', event);" class=menuBarLink>Go</a></div>
<div id=menuTitle2 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('2', event);" class=menuBarLink>Help</a></div>

<div id=contentDiv>

Select an option from the menu above.

</div>
</BODY></HTML>
Avatar billede freakofnature Nybegynder
06. oktober 2002 - 22:26 #5
simplet hen har jeg bare fået menuer til at fjerne sig når musen går væk fra dem, men hvis den kommer over en af menuer bliver den alligevel (functionen stay()). Håber det virker eller så bare skriv igen.
Avatar billede tingholm Mester
07. oktober 2002 - 22:04 #6
det fatter jeg ikke en meter af det der !!
hvad skal skiftes ud med hvad ??
Avatar billede freakofnature Nybegynder
07. oktober 2002 - 22:38 #7
bare brug det jeg har lavet!

du skal sætte

onmouseout="hideAllMenus()" onmouseover="stay()"

i divsne på menuerne, men husk at kopiere functionen stay() som jeg lavede.
Avatar billede tingholm Mester
07. oktober 2002 - 23:06 #8
jeg tror bare at jeg lader det være ved at man skal klikke....
men det skal da nok virke, det du skrev freakofnature så du får poinz
Avatar billede oskar Nybegynder
08. oktober 2002 - 08:10 #9
Ikke for noget,  men hvis du kopierer hele freakofnatures indlæg kan du jo se at det virker upåklageligt.
Avatar billede freakofnature Nybegynder
08. oktober 2002 - 13:26 #10
tak for pointene, men for at gøre det helt simpelt, skal du bare kopiere min funktion stay() og putte den på din side.

Derefter skriver du i hver menu onmouseover="stay()" onmouseout="hideAllMenus()"
Avatar billede tingholm Mester
08. oktober 2002 - 14:29 #11
ja ok, det har jeg nu, men hvis ikke musen kommer ned i dropdown'en forsvinder den ikke !! hvis du kører musen op over menupunktet bliver dropdown'en på sin plads !!
Avatar billede freakofnature Nybegynder
08. oktober 2002 - 19:52 #12
så skal du også sætte onmouseout="hideAllMenus()" i linket, du kører musen over for at få menu frem, du ved - menupunkterne i toppen af siden
Avatar billede tingholm Mester
08. oktober 2002 - 22:41 #13
what ?? gidder du ikke skrive hvilken linie jeg skal bytte ud med hvad ?? hvis bare du laver den første kan jeg selv rette den til, til de andre !!
Avatar billede freakofnature Nybegynder
09. oktober 2002 - 16:36 #14
<div id=menuTitle1 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('1', event);" class=menuBarLink>Go</a></div>

byttes ud med

<div id=menuTitle1 class=menuTitle><a href="http://www.giantant.com/" onmouseover="return !showMenu('1', event);" onmouseout="hideAllMenus()" class=menuBarLink>Go</a></div>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester