CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jokum78 Nybegynder

18. juli 2005 - 23:18 Der er 9 kommentarer

Menu ala userlist på fx netdate

Jeg har forsøgt at lave en menu tilsvarende den der er på fx netdate.dk i chatten. Hvor en menu kommer frem ved mousedown og man så kører musen over på et menupunkt og slipper knappen igen. Har problemer med fx ondrag() ikke virker i firefox og en masse andre ting.

Så mit spørgsmål er, om nogle kender en (opensource)menu tilsvarende den i userlisten på netdate.dk's chat, men som er crossbrowser?

På forhånd tak. Det haster lidt, derfor de mange points.

Synes godt om

olebole Juniormester

19. juli 2005 - 01:51 #1

<ole>

Prøv at forklare, hvordan den fungerer. Hvad er det, du ønsker?

/mvh
</bole>

Synes godt om

olebole Juniormester

19. juli 2005 - 01:51 #2

- og nej ... jeg opretter ikke en bruger på netdate.dk :)

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 18:37 #3

log ind med exptest // test.

Benyt IE da, det som sagt kun virker deri.

Men kan prøve at forklare hvis du nægter at logge ind :-)

Forestil dig man har en masse links over hinanden. Når man holder venstre eller højre knap i bund på et af disse (onmousedown) skal en menu fremkomme under det link eventet startede på. Herefter kører man musen ned (mens man stadig holder knappen i bund) over et link i den menu der kommer frem, og slipper knappen på et menupunkt, som så aktiveres. Skal være crossbrowser. Kan kun få det til at virke i IE.

Synes godt om

olebole Juniormester

19. juli 2005 - 21:15 #4

Prøv det her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#menu {
position: relative;
width: 120px;
height: 200px;
border: 1px solid red;
margin: 40px;
}
#menu a, #menu a:visited {
width: 100px;
padding: 1px 10px;
font: 12px tahoma, sans serif;
text-decoration: none;
color: #666666;
display: block;
}
#menu a:hover {
text-decoration: none;
color: #666666;
}

#popMenu {
position: absolute;
width: 120px;
left: 5px;
border: 1px solid red;
display: none;
z-index: 2;
}
#popMenu a, #popMenu a:visited {
width: 100px;
padding: 1px 10px;
font: 12px tahoma, sans serif;
text-decoration: none;
background-color: yellow;
color: red;
display: block;
}
#popMenu a:hover {
text-decoration: none;
background-color: red;
color: yellow;
}

</style>
<script type="text/JavaScript">
function menDown(e) {
var css = oPopMenu.style;
oPopMenu.setAttribute("activeID", this.id);
css.top = (this.offsetTop+this.offsetHeight) + "px";
css.display = "block";
if (!window.event) {
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
}
}
function mUp(e) {
var id, srcElm = window.event? window.event.srcElement : e.target;
if (srcElm.id && srcElm.id.indexOf("popLink_")!=-1) {
id = oPopMenu.getAttribute("activeID");
switch ( parseInt(srcElm.id.split("popLink_")[1]) ) {
case 0:
alert("Du klikkede på nummer 0.\nDet aktive menulinks id: " + id);
break;
case 1:
alert("Du klikkede på nummer 1.\nDet aktive menulinks id: " + id);
break;
case 2:
alert("Du klikkede på nummer 2.\nDet aktive menulinks id: " + id);
break;
case 3:
alert("Du klikkede på nummer 3.\nDet aktive menulinks id: " + id);
break;
}
}
oPopMenu.style.display = "none";
}
var oPopMenu = null;
window.onload = function() {
var aA = document.getElementById("menu").getElementsByTagName("a");
oPopMenu = document.getElementById("popMenu");
for (var i=0,j=aA.length; i<j; i++) {
aA[i].ondragstart = function(){return false};
aA[i].onmousedown = menDown;
}
document.onmouseup = mUp;
}
</script>
</head>
<body>

<div id="menu">
<a id="link_0" href="#">Link 0</a>
<a id="link_1" href="#">Link 1</a>
<a id="link_2" href="#">Link 2</a>
<a id="link_3" href="#">Link 3</a>

<div id="popMenu">
<a id="popLink_0" href="#">PopLink 0</a>
<a id="popLink_1" href="#">PopLink 1</a>
<a id="popLink_2" href="#">PopLink 2</a>
<a id="popLink_3" href="#">PopLink 3</a>
</div>
</div>

</body>
</html>

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 21:39 #5

Hold da kæft du er genial. Kunne jo ikke virke bedre :) Mange tak.

Læg et svar.

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 22:22 #6

Lige en ting...min struktur er således:

<div id="menu">
<table>
<tr>
<td>noget</td>
<td><a href="#">menulink</a></td>
<td>noget</td>
<tr>
</tr>
</table>

<div id="popMenu">
foo
</div>
</div>

Popmenuen kommer ikke under det man trykker på - jeg gætter på at det er
var aA = document.getElementById("menu").getElementsByTagName("a");

der ikke kan finde anchors fordi de står i td's, right?

Hvordan fixer jeg dette? :)

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 22:23 #7

lige en <tr> for meget...

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 22:29 #8

har prøvet at give tabellen et id og bruge det id i stedet for menu...

Synes godt om

jokum78 Nybegynder

19. juli 2005 - 23:17 #9

ellers er det måske et css problem? men har prøvet at give denne tabel menu id'et i stedet og fjernet det fra div'et. Men det har samme resultat. Menuen kommer frem under første anchor uanset hvilket man trykker på.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS