Alinhar menu Javascript

[Cheaster]

Boas pessoal! Precisava de uma pequena ajuda vossa :)

Estava a tentar implementar este drop menu em javscript no meu site: http://www.dynamicdrive.com/dynamici...menu/index.htm

O problema é que este vem alinhado ao à esquerda. Estou farto de tentar alinha-lo ao centro e nada. Nem com tabelas ele vai lá.

Alguém poderia me ajudar?

Nota: Estou a tentar a implementar o demo3

Abraço!

[fercosmig]

posta o código ae

[Cheaster]

demo3.inc.js

function f_clientWidth() {
 return f_filterResults (
  window.innerWidth ? window.innerWidth : 0,
  document.documentElement ? document.documentElement.clientWidth : 0,
  document.body ? document.body.clientWidth : 0
 );
}
function f_filterResults(n_win, n_docel, n_body) {
 var n_result = n_win ? n_win : 0;
 if (n_docel && (!n_result || (n_result > n_docel)))
  n_result = n_docel;
 return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function createjsDOMenu() {
  absoluteMenu1 = new jsDOMenu(100, "", "absolute");
  with (absoluteMenu1) {
    addMenuItem(new menuItem("Hoje", "", "?a=5&c=aaaaba"));
    addMenuItem(new menuItem("Ontem", "", "?a=5&c=abaaba"));
  }

  
    addMenuBarItem(new menuBarItem("Música", absoluteMenu1));
    moveTo((f_clientWidth() - 770)/2, 390);
    
  }
}

Penso que é nesse ficheiro que ele faz o alinhamento, eu até já acrescentei uma função:

function f_clientWidth() {
 return f_filterResults (
  window.innerWidth ? window.innerWidth : 0,
  document.documentElement ? document.documentElement.clientWidth : 0,
  document.body ? document.body.clientWidth : 0
 );
}
function f_filterResults(n_win, n_docel, n_body) {
 var n_result = n_win ? n_win : 0;
 if (n_docel && (!n_result || (n_result > n_docel)))
  n_result = n_docel;
 return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Mas mesmo assim ainda não alinha ao centro... Eu deixei o link do menu no primeiro post. Não tenho a certeza se estou a fazer isto bem :X

Só queria alinhar o menu ao centro pois ele vem à esquerda por defeito :(

Ninguém sabe como alinhar ao centro..? Eu já desisti :/

Editado Julho 4, 2008 por Cheaster

[KaKarotto]

Nenhum menu é em javascript pra falar a verdade. O javascript pode criar ou modificar, mas um menu é sempre html.

Se ele é html para formatar sua forma, sua posição, deve utilizar Css. Se você deu um id para esse menu, basta mudar seu posicionamento através de Css.

[Cheaster]

É que eu já tentei editar o css do menu mas sem sucesso :(

Será que você me podia ajudar? É que eu já tentei tudo o que sabia e nada :(

Classic.css

.jsdomenubardiv {
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    border: 0px outset;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-top-color: #FFFFFF;
    cursor: default;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    position: absolute; /* Do not alter this line! */
    visibility: visible;
}

.jsdomenubardragdiv {
    cursor: move;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    position: relative; /* Do not alter this line! */
    visibility: hidden;
    width: 9px;
}

.jsdomenubaritem {
    background-color: #E9E9E9;
    border: 1px outset;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-top-color: #CCCCCC;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenubaritemclick {
    background-color: #E9E9E9;
    border: 1px outset;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenubaritemover {
    background-color: #FFFFFF;
    border: 1px outset;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenudiv {
    background-color: #FFFFFF;
    border: 1px outset;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-top-color: #CCCCCC;
    cursor: default;
    position: absolute; /* Do not alter this line! */
    visibility: hidden;
    z-index: 10;
}

.jsdomenuitem {
    background-color: transparent;
    border: none;
    color: #000000;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenuitemover {
    background-color: #666666;
    border: none;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenusep {
}

.jsdomenusep hr {
    text-align: center;
    width: 95%;
}

demo.css --> penso que seja do texto este

body {
    background-color: #F3F3F3;
    font-family: Georgia, Verdana, Arial, sans-serif;
    font-size: small;
    text-align: center;
}

code {
    background-color: #E5E5E5;
    border: 1px dashed #009966;
    display: block;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}

h1 {
    border-bottom: 1px solid #990000;
    color: #CCCC33;
    font-family: Georgia, Arial, Helvetica, sans-serif;
    font-size: 200%;
    text-align: right;
    text-align: center;
}

Valeu a todos pela atenção. Abraço ;)

[lenowds]

É que eu já tentei editar o css do menu mas sem sucesso :(

Será que você me podia ajudar? É que eu já tentei tudo o que sabia e nada :(

Classic.css

.jsdomenubardiv {
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    border: 0px outset;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-top-color: #FFFFFF;
    cursor: default;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    position: absolute; /* Do not alter this line! */
    visibility: visible;
}

.jsdomenubardragdiv {
    cursor: move;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    position: relative; /* Do not alter this line! */
    visibility: hidden;
    width: 9px;
}

.jsdomenubaritem {
    background-color: #E9E9E9;
    border: 1px outset;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-top-color: #CCCCCC;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenubaritemclick {
    background-color: #E9E9E9;
    border: 1px outset;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenubaritemover {
    background-color: #FFFFFF;
    border: 1px outset;
    color: #000000;
    display: inline;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenudiv {
    background-color: #FFFFFF;
    border: 1px outset;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-top-color: #CCCCCC;
    cursor: default;
    position: absolute; /* Do not alter this line! */
    visibility: hidden;
    z-index: 10;
}

.jsdomenuitem {
    background-color: transparent;
    border: none;
    color: #000000;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenuitemover {
    background-color: #666666;
    border: none;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 700;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 1px;
    position: relative; /* Do not alter this line! */
}

.jsdomenusep {
}

.jsdomenusep hr {
    text-align: center;
    width: 95%;
}

demo.css --> penso que seja do texto este

body {
    background-color: #F3F3F3;
    font-family: Georgia, Verdana, Arial, sans-serif;
    font-size: small;
    text-align: center;
}

code {
    background-color: #E5E5E5;
    border: 1px dashed #009966;
    display: block;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}

h1 {
    border-bottom: 1px solid #990000;
    color: #CCCC33;
    font-family: Georgia, Arial, Helvetica, sans-serif;
    font-size: 200%;
    text-align: right;
    text-align: center;
}

Valeu a todos pela atenção. Abraço ;)

Cheaster,

Cara posta seu codigo .html, pelo que eu vi ai só tem javascript e css, posta seu codigo, ai..

falou

[Cheaster]

lenowds O código HTML é esse:

<html>
<head>
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="classic.css" />
<script type="text/javascript" src="jsdomenu.js"></script>
<script type="text/javascript" src="jsdomenubar.js"></script>
<script type="text/javascript" src="demo3.inc.js"></script>
</head>
<body onload="initjsDOMenu()">
</body>
</html>

Thanks ;)

[KaKarotto]

Infelizmente ta faltando código js aí e além disso o link que passou não está certo, então, não dá pra eu reproduzir em casa apenas com esses códigos que passou....

Então vai ser no chutômetro, tente usar um atributo do css no .jsdomenudiv.

Tenta:

.jsdomenudiv{
 left:200px;
}

Vê se ele muda de posição. Não dá pra eu saber como está feito esse menu, então minha tentativa tem uns 90% de dar errado.

Eu ainda acho que o menu está em posição absoluta...eu acho mais fácil centralizar algo que está em posição relativa, pois dá pra você colocar margin-left e margin-right em auto. Não sei se dá pra colocar algo do tipo: left:auto, right:auto.

Enfim, teste aí. Tente consertar o link de onde pegou esse menu.

E pra terminar....pra fazer menu, efeitos....use jquery.

[Cheaster]

Infelizmente ta faltando código js aí e além disso o link que passou não está certo, então, não dá pra eu reproduzir em casa apenas com esses códigos que passou....

Então vai ser no chutômetro, tente usar um atributo do css no .jsdomenudiv.

Tenta:

.jsdomenudiv{
 left:200px;
}

Vê se ele muda de posição. Não dá pra eu saber como está feito esse menu, então minha tentativa tem uns 90% de dar errado.

Eu ainda acho que o menu está em posição absoluta...eu acho mais fácil centralizar algo que está em posição relativa, pois dá pra você colocar margin-left e margin-right em auto. Não sei se dá pra colocar algo do tipo: left:auto, right:auto.

Enfim, teste aí. Tente consertar o link de onde pegou esse menu.

E pra terminar....pra fazer menu, efeitos....use jquery.

O link certo do menu: download

Eu já tentei meter em vez de absolute , center mas n deu!

[KaKarotto]

Cara, não existe um center em posicionamento usando Css. Ponha isso na sua cabeça.

Geralmente, se usa o margin:0 auto; em algum seletor. Você vai precisar descobrir qual é o seletor do menu. Eu to meio sem tempo pra baixar o arquivo e testar.

Você vai precisar ir mudando alguns valores de seletores pra saber qual é o que corresponde ao menu.

Aquele abraço.

[Cheaster]

Pelo o que eu percebi deste script ele faz "output" através disto: <body onload="initjsDOMenu()">

certo? Está "função" está presente neste ficheiro: jsdomenu.js

Mas reparei noutra coisa mais interessante ele tem uma "função" que alinha à esquerda, que está presente no ficheiro: jsdomenubar.js

Get the left position of the menu bar menu.
*/
function getMainMenuBarMenuLeftPos(menuBarObj, menuBarItemObj, menuObj, x) { // Private method
  if (x + menuObj.offsetWidth <= getClientWidth()) {
    return x;
  }
  else {
    return x + menuBarItemObj.offsetWidth - menuObj.offsetWidth + getPropIntVal(menuObj, blw) + getPropIntVal(menuObj, brw);
  }
}

/*
Get the top position of the menu bar menu.
*/
function getMainMenuBarMenuTopPos(menuBarObj, menuBarItemObj, menuObj, y) { // Private method
  if (y + menuObj.offsetHeight <= getClientHeight()) {
    return y;
  }
  else {
    if ((ie55 || ie6) && menuBarObj.mode == "static" && pageMode == 0) {
      y = menuBarObj.offsetTop + menuBarObj.offsetHeight - getScrollTop();
    }
    if ((ie55 || ie6) && menuBarObj.mode == "static" && pageMode == 1) {
      return menuBarItemObj.offsetTop
           - menuObj.offsetHeight
           - getPropIntVal(menuBarObj, pt)
           - getPropIntVal(menuBarObj, btw)
           + getPropIntVal(menuBarItemObj, pt)
           + getPropIntVal(menuBarItemObj, btw)
           - getScrollTop();
    }
    else {
      return y - menuObj.offsetHeight - menuBarObj.offsetHeight;
    }
  }
}

/*
Pop up the menu bar menu.
*/
function popUpMenuBarMenu(menuBarObj, menuBarItemObj, menuObj) { // Private method
  var x;
  var y;
  if (menuBarObj.style.position == "fixed") {
    x = menuBarObj.offsetLeft + menuBarItemObj.offsetLeft + getPropIntVal(menuBarObj, blw) - getPropIntVal(menuObj, blw);
    y = menuBarObj.offsetTop + menuBarObj.offsetHeight;
    if (opera || safari) {
      x -= getPropIntVal(menuBarObj, blw);
    }
    menuObj.style.position = "absolute";
    menuObj.style.left = getMainMenuBarMenuLeftPos(menuBarObj, menuBarItemObj, menuObj, x) + px;
    menuObj.style.top = getMainMenuBarMenuTopPos(menuBarObj, menuBarItemObj, menuObj, y) + px;
    menuObj.style.position = "fixed";
  }
  else {
    if (menuBarObj.mode == "static") {
      x = menuBarItemObj.offsetLeft - getPropIntVal(menuObj, blw) - getScrollLeft();
      y = menuBarObj.offsetTop + menuBarObj.offsetHeight - getScrollTop();
      if (ie55 || ie6) {
        y = menuBarItemObj.offsetTop + menuBarItemObj.offsetHeight
          + getPropIntVal(menuBarObj, bbw)
          + getPropIntVal(menuBarObj, pb)
          - getPropIntVal(menuBarItemObj, pb)
          - getPropIntVal(menuBarItemObj, bbw)
          - getScrollTop();
      }
      if (safari) {
        x += 8;
        y += 13;
      }
      menuObj.style.left = (getMainMenuBarMenuLeftPos(menuBarObj, menuBarItemObj, menuObj, x) + getScrollLeft()) + px;
      menuObj.style.top = (getMainMenuBarMenuTopPos(menuBarObj, menuBarItemObj, menuObj, y) + getScrollTop()) + px;
    }
    else {
      x = menuBarObj.offsetLeft + menuBarItemObj.offsetLeft + getPropIntVal(menuBarObj, blw) - getPropIntVal(menuObj, blw) - getScrollLeft();
      y = menuBarObj.offsetTop + menuBarObj.offsetHeight - getScrollTop();
      if (opera || safari) {
        x -= getPropIntVal(menuBarObj, blw);
      }
      menuObj.style.left = (getMainMenuBarMenuLeftPos(menuBarObj, menuBarItemObj, menuObj, x) + getScrollLeft()) + px;
      menuObj.style.top = (getMainMenuBarMenuTopPos(menuBarObj, menuBarItemObj, menuObj, y) + getScrollTop()) + px;
    }
  }
  if (ie && menuObj.mode == "fixed") {
    menuObj.initialLeft = parseInt(menuObj.style.left) - getScrollLeft();
    menuObj.initialTop = parseInt(menuObj.style.top) - getScrollTop();
  }
  menuObj.style.visibility = "visible";
}

Ou seja isto é que vai definir a posição inicial do menu, existe como alterar o tal "get left" para "get center" ?

Cumps

[Cheaster]

Ainda não consegui alinhar o menu ao centro, alguém me poderia ajudar=?

Muito obrigado Galera pela vossa atenção!