Avatar billede sonysan Nybegynder
04. december 2004 - 23:06 Der er 13 kommentarer

Hjælp til at vende en menus retning

Hej jeg håber at der er nogle der kan hjælpe mig, jeg har lånt noget kode til en menubar, som består af nogle <div> tags der manipulers rundt på skærmen ved hjælp af noget "style.pixelLeft".
Problemmet er nu at jeg meget gerne skulle ha denne menu til at bevæge sig fra højre mod venstre altså modsat nu.
På forhånd tak for hjælpen der er maksimum point til den der kan hjælpe mig, min kode ser ud som følgende:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="style.css" type=text/css rel=stylesheet>

<SCRIPT language=javascript type=text/javascript>
<!--

/*  function show(lag) { document.all[lag].style.visibility = 'visible'; }

    function hide(lag) { document.all[lag].style.visibility = 'hidden'; }


  function correct()
  {
  width = (document.body.offsetWidth)-182;
  document.all['mr'].style.pixelLeft = width;
  document.all['mr'].style.visibility = 'visible';
  }
*/
  function backslide1()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft > 210) { document.getElementById('menu05').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft > 160) { document.getElementById('menu04').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft > 110) { document.getElementById('menu03').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft > 60)  { document.getElementById('menu02').style.posLeft -= 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('backslide1()',1) }
  else { window.setTimeout('menu1()',1); }
  }

  function menu1()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft < 450) { document.getElementById('menu05').style.posLeft += 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft < 400) { document.getElementById('menu04').style.posLeft += 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft < 350) { document.getElementById('menu03').style.posLeft += 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft < 300) { document.getElementById('menu02').style.posLeft += 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('menu1()',1) }
  }

  function backslide2()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft > 210) { document.getElementById('menu05').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft > 160) { document.getElementById('menu04').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft > 110) { document.getElementById('menu03').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft > 60)  { document.getElementById('menu02').style.posLeft -= 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('backslide2()',1) }
  else { window.setTimeout('menu2()',1); }
  }

  function menu2()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft < 450) { document.getElementById('menu05').style.posLeft += 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft < 400) { document.getElementById('menu04').style.posLeft += 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft < 350) { document.getElementById('menu03').style.posLeft += 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('menu2()',1) }
  }

  function backslide3()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft > 210) { document.getElementById('menu05').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft > 160) { document.getElementById('menu04').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft > 110)  { document.getElementById('menu03').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft > 60)  { document.getElementById('menu02').style.posLeft -= 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('backslide3()',1) }
  else { window.setTimeout('menu3()',1); }
  }

  function menu3()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft < 450) { document.getElementById('menu05').style.posLeft += 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft < 400) { document.getElementById('menu04').style.posLeft += 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('menu3()',1) }
  }

  function backslide4()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft > 210) { document.getElementById('menu05').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft > 160) { document.getElementById('menu04').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft > 110)  { document.getElementById('menu03').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft > 60)  { document.getElementById('menu02').style.posLeft -= 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('backslide4()',1) }
  else { window.setTimeout('menu4()',1); }
  }

  function menu4()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft < 450) { document.getElementById('menu05').style.posLeft += 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('menu4()',1) }
  }

function backslide5()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft > 210) { document.getElementById('menu05').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu04'].style.pixelLeft > 160) { document.getElementById('menu04').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu03'].style.pixelLeft > 110)  { document.getElementById('menu03').style.posLeft -= 4; rerun = 1; }
  if(document.all['menu02'].style.pixelLeft > 60)  { document.getElementById('menu02').style.posLeft -= 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('backslide5()',1) }
  else { window.setTimeout('menu5()',1); }
  }

  function menu5()
  {
  rerun = 0;
  if(document.all['menu05'].style.pixelLeft < 0) { document.getElementById('menu05').style.posLeft += 4; rerun = 1; }
  if(rerun == 1) { window.setTimeout('menu4()',1) }
  }
-->
</SCRIPT>
</head>

<div id="menu01" onClick=backslide1()>
menu1
</div>

<div id="menu02" onClick=backslide2()>
menu2
</div>

<div id="menu03" onClick=backslide3()>
menu3
</div>

<div id="menu04" onClick=backslide4()>
menu4
</div>

<div id="menu05" onClick=backslide5()>
menu5
</div>

<body>
</body>
</html>
Avatar billede mcgoat Nybegynder
04. december 2004 - 23:29 #1
hvor har du fundet den menu henne? for hvis jeg copy paster det her så er der da intet der virker... den skriver bare:

menu1
menu2
menu3
menu4
menu5

på siden uden man kan trykke på dem eller noget....
Avatar billede sonysan Nybegynder
04. december 2004 - 23:40 #2
Den køre fint i I.E version 6 som er det eneste jeg har testet den i.
Det er megningen at de 5 menupunkter skal stå på en line, når det så trykkes på menu3 skuber den menu4 og 5 frem så der opstår noget ledigt plads imellem menu3 og 4.
Avatar billede mcgoat Nybegynder
04. december 2004 - 23:45 #3
ehm... virker altså ikke her....

ville gerne lave det hvis jeg altså kunne få det til at virke... hehe... du har det ikke liggende på en webserver?
Avatar billede mcgoat Nybegynder
04. december 2004 - 23:48 #4
http://www.jksoftware.dk/exp/menu.htm    <<< det er den kode du har skrevet som jeg har her... virker den på dette link?
Avatar billede mcgoat Nybegynder
04. december 2004 - 23:49 #5
hvordan ser din style.css fil ud?
Avatar billede sonysan Nybegynder
04. december 2004 - 23:50 #6
Jeg har lånt koden af en af mine venner (som selvfølelig er ude at rejse) her: http://www.networkingcamp.dk/viscoso/index/ (menuen i toppen)

Jeg skal bare have den til at start ca. midt på siden og køre den modsatte ven (mod højre)
Avatar billede sonysan Nybegynder
04. december 2004 - 23:52 #7
ah selvfølelig det er fordi min style.css mangler den ser sådan her ud:

/* CSS Document */

/* grundlægende*/
body {background-color: #FFFFFF;}
a:link {font-family: verdana; font-size: 11px; font-weight: bold;letter-spacing: 1px; color:#494949;}
a:visited {font-family: verdana; font-size: 11px; font-weight: bold;letter-spacing: 1px; color:#494949;}
a:hover {font-family: verdana; font-size: 11px; font-weight: bold;letter-spacing: 1px; color:#494949;}
a {text-decoration:none;}


/*Opsætning af skrift*/
#brodtekst1 {font-family: verdana; font-size: 10px;  font-weight: bold; color:#363636; letter-spacing: 0px;}
#brodtekst2 {font-family: verdana; font-size: 10px; color:#363636; letter-spacing: 0px;}
#intro {font-family: verdana; letter-spacing: 2px; font-size: 20px; font-weight: bold; color:#ffffff; position:absolute; top: 190px; left:125px;}
#kontakt {font-family: verdana; letter-spacing: 2px; font-size: 9px; font-weight: bold;text-transform: uppercase; color:#8D8D8D}
#overskrift {font-family: verdana; font-size: 11px; font-weight: bold;}
#menupunkt1 {font-family: verdana; font-size: 11px; font-weight: bold;letter-spacing: 1px; text-transform: uppercase; color:#494949;}
#menupunkt2 {font-family: verdana; font-size: 11px; font-weight: bold;letter-spacing: 1px; color:#494949;}
#menupunkt3 {font-family: verdana; font-size: 10px; color:#494949; letter-spacing: 0px;}


/*placering af elementer*/
#menu01 {position:absolute; top: 10px; Left: 10px;}
#menu02 {position:absolute; top: 10px; Left: 60px;}
#menu03 {position:absolute; top: 10px; Left: 110px;}
#menu04 {position:absolute; top: 10px; Left: 160px;}
#menu05 {position:absolute; top: 10px; Left: 210px;}
Avatar billede mcgoat Nybegynder
04. december 2004 - 23:56 #8
ahhh ok.. prøver lige at kigge på det, men vil ikke love noget... hehe
Avatar billede sonysan Nybegynder
04. december 2004 - 23:57 #9
Lyder rigtig godt - takker mange
Avatar billede mcgoat Nybegynder
05. december 2004 - 00:07 #10
Bliver "Meget" besværligt at lave den om.. kunne være du skulle kigge dig om efter en anden som måske er mere handy , eller du måske bedre kan lide?

Du kan prøve at kigge her:
http://www.google.dk/search?hl=da&q=HTML+javascript+menu&meta=

Der er en masse gode sider med menuer... held og lykke med det :)
Avatar billede sonysan Nybegynder
05. december 2004 - 00:09 #11
tak for forsøget, jeg prøver
Avatar billede mcgoat Nybegynder
07. december 2004 - 12:29 #12
okaj... bare luk... :)
Avatar billede sonysan Nybegynder
07. december 2004 - 12:34 #13
ok jeg lukker spørgsmålet
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