Søg
Avatar billede fragze Juniormester
20. marts 2004 - 20:04 Der er 19 kommentarer og
1 løsning

Position på dropdown

Hej Eksperter.
Nu er jeg ved at flå fjæset af mig selv :)
Jeg kan simpelhen ikke få min dropdown menu til at fungere så de står ens i 2 forskellige opløsninger :) håber i kan hjælpe mig :p

Koden består af :)

Index.php
-----------------------

<html>
<head>
<title>asd</title>
<SCRIPT language=javascript src="index/ypSlideOutMenusC.js"></SCRIPT>
<SCRIPT language=javascript src="index/init.js"></SCRIPT>
<link rel="STYLESHEET" type="text/css" href="default.css">
</head>
<BODY onresize=reCalc(); onload=reCalc();>
<SCRIPT language=JavaScript type=text/JavaScript>
                            var menus = [
                                new ypSlideOutMenu("menu1", "down", 0, 156, 0, 0),
                                new ypSlideOutMenu("menu2", "down", 100, 156, 128, 160),
                                new ypSlideOutMenu("menu3", "down", 200, 156, 128, 160),
                                new ypSlideOutMenu("menu4", "down", 300, 156, 128, 160)
                            ]
                            for (var i = 0; i < menus.length; i++) {
                                menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
                                menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
                            }
</SCRIPT>
<table height=100% border="0" cellpadding="0" cellspacing="0">
<tr>
<td align=left valign=middle>


<table width="750" height=100% border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="10">
            <img src="images/hk_01.gif" width="750" height="115" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/hk_02.gif" width="171" height="21" alt=""></td>
        <td>
<img src="images/forside1.gif" width="45" height="21" alt="" onMouseOver="this.src='images/forside2.gif'; return true;" onMouseOut="this.src='images/forside1.gif'; return true" border=0></td>
<td>
            <DIV id=menu2Container>
            <DIV class=menu id=menu2Content>
            <DIV class=options><A
            href="http://www.visage-cup.dk/index.php?page=info">Generel information</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=regler">Regler</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=struktur">Cup struktur</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=faq">F.A.Q.</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=sponsorer">Sponsorer/Pr&aelig;mier</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=kontakt">Kontaktliste</A><BR>
              </DIV>
            </DIV>
          </DIV>
            <A id=act1
            onmouseover="swapImage('btn2','','images/Omlandsklubben2.gif',1);ypSlideOutMenu.showMenu('menu2')"
            onmouseout="swapImgRestore();ypSlideOutMenu.hideMenu('menu2')"
            href="http://www.visage-cup.dk/#"><IMG
            style="WIDTH: 88px; HEIGHT: 21px"
            src="images/Omlandsklubben1.gif" name=btn2></A></td> 
        <td>
            <DIV id=menu3Container>
            <DIV class=menu id=menu3Content>
            <DIV class=options><A
            href="http://www.visage-cup.dk/index.php?page=info">Generel information</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=regler">Regler</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=struktur">Cup struktur</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=faq">F.A.Q.</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=sponsorer">Sponsorer/Pr&aelig;mier</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=kontakt">Kontaktliste</A><BR>
              </DIV>
            </DIV>
          </DIV>
            <A id=act2
            onmouseover="swapImage('btn3','','images/strategi_vision2.gif',1);ypSlideOutMenu.showMenu('menu3')"
            onmouseout="swapImgRestore();ypSlideOutMenu.hideMenu('menu3')"
            href="http://www.visage-cup.dk/#"><IMG
            style="WIDTH: 82px; HEIGHT: 21px"
            src="images/strategi_vision1.gif" name=btn3></A></td>

        <td>
            <DIV id=menu4Container>
            <DIV class=menu id=menu4Content>
            <DIV class=options><A
            href="http://www.visage-cup.dk/index.php?page=info">Generel information</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=regler">Regler</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=struktur">Cup struktur</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=faq">F.A.Q.</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=sponsorer">Sponsorer/Pr&aelig;mier</A><BR>
                          <A
            href="http://www.visage-cup.dk/index.php?page=kontakt">Kontaktliste</A><BR>
              </DIV>
            </DIV>
          </DIV>
            <A id=act3
            onmouseover="swapImage('btn4','','images/bestyrelse2.gif',1);ypSlideOutMenu.showMenu('menu4')"
            onmouseout="swapImgRestore();ypSlideOutMenu.hideMenu('menu4')"
            href="http://www.visage-cup.dk/#"><IMG
            style="WIDTH: 59px; HEIGHT: 21px"
            src="images/bestyrelse1.gif" name=btn4></A></td>
        <td>
            <img src="images/overenskomster_aftaler1.gif" width="126" height="21" alt=""></td>
        <td>
            <img src="images/aktiviteter1.gif" width="60" height="21" alt=""></td>
        <td>
            <img src="images/kompetenceudvikling1.gif" width="113" height="21" alt=""></td>
        <td>
            <img src="images/hk_10.gif" width="6" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="10">
            <img src="images/hk_11.gif" width="750" height="11" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/hk_12.gif" width="5" height="232" alt=""></td>
        <td background="images/nyheder.gif" width="166" height=100%>
           
<!-- NYHEDER -->
   
</td>
        <td colspan="7" background="images/content.gif" width="573" height=100% align=center valign=top>
           

<!-- CONTENT -->

<table width="530" height=100% border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/content_top.gif" width="530" height="43" alt=""></td>
    </tr>
    <tr>
        <td background="images/content_left.gif" width="10" height=100%>
            </td>
        <td background="images/content_content.gif" width="510" height=100%>
           
<!-- CONTENT_CONTENT -->


</td>
        <td background="images/content_right.gif" width="10" height=>
            </td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/content_bottom.gif" width="530" height="43" alt=""></td>
    </tr>
</table>

</td>
        <td>
            <img src="images/hk_15.gif" width="6" height="232" alt=""></td>
    </tr>
    <tr>
        <td colspan="10">
            <img src="images/hk_16.gif" width="750" height="21" alt=""></td>
    </tr>
</table>

<td>
<td align=left valign=middle bgcolor="#E0EAF5" width=100% background="images/bg.gif">
</td>
</tr>
</table>

</body>
</html>

---------------------------------

init.js
---------------------------------

<!--

// Preload images
preloadImages('/ill/cc_btn_forside_on.gif','/ill/cc_btn_info_on.gif','/ill/cc_btn_hold_on.gif','/ill/cc_btn_forum_on.gif');

// Menu recalculation function
function reCalc() {
  ns4 = (document.layers)? true:false
  ie4 = (document.all)? true:false
  winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (ns4)? window.innerHeight : document.body.offsetHeight
  if (winW>=800){
    mnuX = ((winW-800)/2)+66
  } else {
    mnuX = 66
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX+106;
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+176;
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+279;
}

// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
function swapImgRestore() {
  var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}
function findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function swapImage() {
  var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function showHideLayers() {
  var i,p,v,obj,args=showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style    ; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->

___________________________________



Håber meget det kan fikses... :)
Avatar billede roenving Novice
20. marts 2004 - 20:10 #1
Jeg kan ikke gennemskue om det vil hjælpe, men det er i hvert fald skørt at teste for ns4 og ie4, når ingen af dem vil respondere på udførelsen !-)

// Menu recalculation function
function reCalc() {
  dom = (document.getElementById)? true:false
  ie = (document.all)? true:false
  winW = (!ie)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (!ie)? window.innerHeight : document.body.offsetHeight
  if (winW>=800){
    mnuX = ((winW-800)/2)+66
  } else {
    mnuX = 66
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX+106;
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+176;
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+279;
}

-- og hvordan er fejlen ?-)
Avatar billede fragze Juniormester
20. marts 2004 - 20:15 #2
Fejlen kommer i at på en anden opløsning så kommer menuerne lægnere hen eller kortere... :/
Avatar billede roenving Novice
20. marts 2004 - 20:18 #3
Så er det vel de 66, som er forkert ?-)

-- eller at de værdier, du har i ovenstående (106, 176 og 279) er beregnet forkert !-)
Avatar billede fragze Juniormester
20. marts 2004 - 20:19 #4
Yessir nu skal du se her mate.. :)

function reCalc() {
  dom = (document.getElementById)? true:false
  ie = (document.all)? true:false
  winW = (!ie)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (!ie)? window.innerHeight : document.body.offsetHeight
  if (winW>=1000){
    mnuX = ((winW-1000)/2)+60
  } else {
    mnuX = 60
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX+26;
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+114;
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+196;
}

^^^^^^^^^^^^
Passer perfekt til 1280*1024

men kommer det i 1152*864 eller deromkring !-)

S¨fucker det totalt :)
Avatar billede roenving Novice
20. marts 2004 - 20:30 #5
Prøv at finde ud af, hvilke værdier, som ør det rigtigt, så vil jeg da gerne prøve at hjælpe med at finde de rigtige tal til indsættelse, for der er en eller anden fejl med de tal !-)

Er menu2 f.eks. præcis 88 px bred, og menu3 82 px ?-)
Avatar billede fragze Juniormester
20. marts 2004 - 20:33 #6
mkay, men asso selve billederne er som de er, 88 - 82 osv osv osv... men menuerne skal være "128" brede :) er det til at fixe ?
Avatar billede roenving Novice
20. marts 2004 - 20:40 #7
Næh, du kan bare sådan, f.eks.

<DIV id="menu2Container" class="menuContainer">

-- og så i dit css:

.menuContainer{width:128px;overflow:hidden;}

-- og så skal værdierne i reCalc være med 128px som forskel !-)

BTW har du ikke fået px med, det er ellers obligatorisk:

  oMnu.style.left = mnuX+26 + 'px';
Avatar billede fragze Juniormester
20. marts 2004 - 20:47 #8
hvor skal
oMnu.style.left = mnuX+26 + 'px';

stå i

function reCalc() {
  dom = (document.getElementById)? true:false
  ie = (document.all)? true:false
  winW = (!ie)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (!ie)? window.innerHeight : document.body.offsetHeight
  if (winW>=1000){
    mnuX = ((winW-1000)/2)+60
  } else {
    mnuX = 60
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX+26;
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+114;
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+196;
}
Avatar billede roenving Novice
20. marts 2004 - 20:53 #9
var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX+26 + 'px';
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+114 + 'px';
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+196 + 'px';
}

-- men jeg tror ikke det er det, som er dit problem, medmindre du tester i Mozilla el. lign., for så vil det være et problem !-)

Vi skal bare finde de rigtige værdier, et gæt kunne være:

function reCalc() {
  dom = (document.getElementById)? true:false
  ie = (document.all)? true:false
  winW = (!ie)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (!ie)? window.innerHeight : document.body.offsetHeight
  if (winW>=750){
    mnuX = ((winW-750)/2)+216;
  } else {
    mnuX = 216;
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX + 'px';
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+128 + 'px';
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+256 + 'px';
}
Avatar billede fragze Juniormester
20. marts 2004 - 20:56 #10
Virker sq ikke.. og den er stadig forskellig i opløsningen :)
Avatar billede fragze Juniormester
20. marts 2004 - 20:59 #11
Du kan følge med her :)

http://217.157.233.158/hk/

:)
Avatar billede fragze Juniormester
20. marts 2004 - 21:02 #12
Og menuerne skal starte ved "om landklubben" :)
Avatar billede roenving Novice
20. marts 2004 - 21:06 #13
Ser ud til at der 190 galt, så måske:


function reCalc() {
  dom = (document.getElementById)? true:false
  ie = (document.all)? true:false
  winW = (!ie)? window.innerWidth-16 : document.body.offsetWidth-20
  winH = (!ie)? window.innerHeight : document.body.offsetHeight
  if (winW>=750){
    mnuX = ((winW-750)/2)+26;
  } else {
    mnuX = 26;
  }
  var oMnu = document.getElementById('menu2Container');
  oMnu.style.left = mnuX + 'px';
  var oMnu = document.getElementById('menu3Container');
  oMnu.style.left = mnuX+88 + 'px';
  var oMnu = document.getElementById('menu4Container');
  oMnu.style.left = mnuX+170 + 'px';
}

-- men hvis siden er venstrestillet, er der vel ingen ide i at rekalkulere placeringen ?-)
Avatar billede fragze Juniormester
20. marts 2004 - 21:10 #14
Lol nu passer den i den lave opløsning :)

Men asso jo den er justeret fra venstr e:)
Avatar billede fragze Juniormester
20. marts 2004 - 21:13 #15
Okay, jeg er flov lige nu :|
Avatar billede fragze Juniormester
27. marts 2004 - 23:56 #16
nu har jeg rødmet færdif smider du lige et svar ?
Avatar billede fragze Juniormester
27. marts 2004 - 23:56 #17
tænkte vi kunne dele ? :D
Avatar billede roenving Novice
27. marts 2004 - 23:58 #18
Lyder ganske rimeligt !-)

-- velbekomme '-)
Avatar billede webvizion Nybegynder
26. maj 2004 - 04:47 #19
Jeg har netop siddet og bøvlet med det samme problem. Du har sat din position til at være absolute den skal være relativ i stedet for.

Du kan hente eks. på det her: http://youngpup.net/2001/ypslideoutmenus/project?folder=relativeCSS

Eller indsætte koden:

<script language="javascript">
    var menus = [
        new ypSlideOutMenu("menu1", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu2", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu3", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu4", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu5", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu6", "down", 0, 0, 180, 200),
        new ypSlideOutMenu("menu7", "down", 0, 0, 180, 200)
       
    ]

    for (var i = 0; i < menus.length; i++) {
        menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='hovedmenu';");
        menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='hovedmenu';");
    }
</script>

<style type="text/css">
        .menuActuator a {
            color:#666666;
            font-weight:bold;
            font-size:12px;
            font-family:arial;
        }

        .menu {
            font-family:verdana;
            color:#666666;
            font-size:10px;
            background-color:#cccccc;
            layer-background-color:#cccccc;
        }

    td div {
      /* this makes TDs a container with their own coordinate system.
        absolutely-positioned elements will be offset relative to them */
      position:relative;
      }
    </style>

Lige før dine DIV tags.
Avatar billede roenving Novice
26. maj 2004 - 16:30 #20
-- tak for point ;~}
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 03/05/202613:59
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 går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »