#Tentar# Alinhar menu javascript ao centro!

[The Lavigne]

Boa Noite.
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 à esquerda. Estou farto de tentar alinha-lo ao centro e nada. Nem com tabelas ele vai lá.

Alguém poderia me ajudar?


Abraço!

[Kayvlim]

margin:auto não ajuda? Resultou comigo no IE7.

[The Lavigne]

margin:auto não ajuda? Resultou comigo no IE7.

Resultou? Tentei tudo e não consegui.

Tas a falar para meter margin auto em que ficheiro?

[Kayvlim]

Não sei. É onde está declarada a classe do CSS "jsdomenudiv" ou o id "staticMenu".
Usei o IE Developer Toolbar. Onde diz "<div class=jsdomenudiv id=staticMenu>", acrescentei um style="margin: auto" e aquilo ficou centrado.

Experimenta acrescentar este style à div que mostra o menu principal.

[The Lavigne]

Não sei. É onde está declarada a classe do CSS "jsdomenudiv" ou o id "staticMenu".
Usei o IE Developer Toolbar. Onde diz "<div class=jsdomenudiv id=staticMenu>", acrescentei um style="margin: auto" e aquilo ficou centrado.

Experimenta acrescentar este style à div que mostra o menu principal.

Estás a falar do ficheiro 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: center; /* 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: center; /* 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: center; /* 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: center; /* 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: center; /* 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: center; /* Do not alter this line! */
    visibility: hidden;
    z-index: 10;
    margin: auto;
}

.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: center; /* 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: center; /* Do not alter this line! */
}

.jsdomenusep {
}

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

Meti o margin auto, penso que no sitio certo, e nada ficou igual. Por favor sê mais especifico sff

[Kayvlim]

Realmente, depois de sacar o ficheiro, em vez de o editar, já não resultou tão bem.

Decidi fazer uma pequena pesquisa, e isto parece-me uma possível solução:

Acrescenta ao Javascript no início do js (no meu caso, pus no início do demo2.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;
}

Fonte: http://www.softcomplex.com/docs/get_..._position.html

A função f_clientWidth() retorna o tamanho da janela do browser disponível.

A seguir, onde fores criar o menu, usas a matemática
Experimentei com sucesso no demo2.inc.js:
Na função createjsDOMenu(), troca o moveTo para isto:

moveTo((f_clientWidth() - 120)/2, 110);

120 é o width do menu. Se o modificares, modifica aí também.

Espero ter-me feito compreender

edit - se surgirem dúvidas, troca inteiramente o demo2.inc.js por isto:

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(120, "absolute", "", true);
  with (absoluteMenu1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "item2", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "item5", "blank.htm"));
    moveTo((f_clientWidth() - 120)/2, 110);
    show();
  }
  
  absoluteMenu1_1 = new jsDOMenu(130, "absolute");
  with (absoluteMenu1_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 3", "item3", "blank.htm"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
  }
  
  absoluteMenu1_2 = new jsDOMenu(120, "absolute");
  with (absoluteMenu1_2) {
    addMenuItem(new menuItem("Item 1", "item1", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "item3", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
  }
  
  absoluteMenu1_1_1 = new jsDOMenu(150, "absolute");
  with (absoluteMenu1_1_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "", "blank.htm"));
  }
  
  absoluteMenu1_2_1 = new jsDOMenu(140, "absolute");
  with (absoluteMenu1_2_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
  }
  
  absoluteMenu1_2_2 = new jsDOMenu(150, "absolute");
  with (absoluteMenu1_2_2) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "", "blank.htm"));
  }
  
  absoluteMenu1.items.item2.setSubMenu(absoluteMenu1_1);
  absoluteMenu1.items.item5.setSubMenu(absoluteMenu1_2);
  absoluteMenu1_1.items.item3.setSubMenu(absoluteMenu1_1_1);
  absoluteMenu1_2.items.item1.setSubMenu(absoluteMenu1_2_1);
  absoluteMenu1_2.items.item3.setSubMenu(absoluteMenu1_2_2);
}

E abre um dos HTMs disponíveis do demo2 (demo2_quirks ou strict_classic ou office_xp)

[The Lavigne]

Sim no demo2 já alinha ao centro e era isso mesmo que eu queria.

Problema é que o meu site usa o "estilo" do demo3 xD

Tipo seguindo esse método ele alinha à direita xD

Já estamos a fazer progressos passou da esquerda para a direita

Just kidding. Será que me podias ajudar com o demo3.inc.js ?

[Kayvlim]

Era só pensares um pouco

Acrescenta as duas funções ao demo3.inc.js na mesma.

No final, muda o moveTo para isto:
moveTo((f_clientWidth()-document.getElementById("DOMenuBar1").style.width)/2, 130);
O problema é que isto não me parece estar completamente bem (no meu browser, fica ligeiramente mais para a direita), mas agora vou dormir :x

Serve pelo menos de ponto de partida.

[The Lavigne]

Era só pensares um pouco

Acrescenta as duas funções ao demo3.inc.js na mesma.

No final, muda o moveTo para isto:
moveTo((f_clientWidth()-document.getElementById("DOMenuBar1").style.width)/2, 130);
O problema é que isto não me parece estar completamente bem (no meu browser, fica ligeiramente mais para a direita), mas agora vou dormir :x

Serve pelo menos de ponto de partida.

Ok fazes bem, eu daqui a pouco também

Mas não está a funcionar... :X

cumps

[Kayvlim]

Não está a funcionar?

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(120, "absolute");
  with (absoluteMenu1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "item2", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "", "blank.htm"));
  }
  
  absoluteMenu1_1 = new jsDOMenu(130, "absolute");
  with (absoluteMenu1_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
  }
  
  absoluteMenu2 = new jsDOMenu(120, "absolute");
  with (absoluteMenu2) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "item4", "blank.htm"));
  }
  
  absoluteMenu2_1 = new jsDOMenu(150, "absolute");
  with (absoluteMenu2_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "", "blank.htm"));
  }
  
  absoluteMenu3 = new jsDOMenu(140, "absolute");
  with (absoluteMenu3) {
    addMenuItem(new menuItem("Item 1", "item1", "blank.htm"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
  }
  
  absoluteMenu3_1 = new jsDOMenu(150, "absolute");
  with (absoluteMenu3_1) {
    addMenuItem(new menuItem("Item 1", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 2", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 3", "", "blank.htm"));
    addMenuItem(new menuItem("-"));
    addMenuItem(new menuItem("Item 4", "", "blank.htm"));
    addMenuItem(new menuItem("Item 5", "", "blank.htm"));
  }
  
  absoluteMenu1.items.item2.setSubMenu(absoluteMenu1_1);
  absoluteMenu2.items.item4.setSubMenu(absoluteMenu2_1);
  absoluteMenu3.items.item1.setSubMenu(absoluteMenu3_1);
  
  absoluteMenuBar = new jsDOMenuBar("absolute", "", true);
  with (absoluteMenuBar) {
    addMenuBarItem(new menuBarItem("Item 1", absoluteMenu1));
    addMenuBarItem(new menuBarItem("Item 2", absoluteMenu2));
    addMenuBarItem(new menuBarItem("Item 3", absoluteMenu3));
    moveTo((f_clientWidth()-document.getElementById("DOMenuBar1").style.width)/2, 130);
  }
}

IE7. Não testei em mais nenhum browser, para já.

[The Lavigne]

Funcionar tá. Mas não alinha ao centro, está alinhar à esquerda

[Kayvlim]

Não sei mesmo do que será, mas aposto que seja problema de browser. Aqui está um pouco mal, mas não está muuuito desviado do centro. Definitivamente, não está alinhado à esquerda.

Amanhã ou depois devo ver isso melhor, especialmente porque obter o client width da janela em qualquer browser não é tarefa fácil, e estou a confiar cegamente naquela função.
Quando conseguir calcular de forma fiável o width do menu, teremos o problema resolvido, porque a posição X onde ele tem de começar é = (largura da janela - largura da barra de menu)/2

[The Lavigne]

Não sei mesmo do que será, mas aposto que seja problema de browser. Aqui está um pouco mal, mas não está muuuito desviado do centro. Definitivamente, não está alinhado à esquerda.

Amanhã ou depois devo ver isso melhor, especialmente porque obter o client width da janela em qualquer browser não é tarefa fácil, e estou a confiar cegamente naquela função.
Quando conseguir calcular de forma fiável o width do menu, teremos o problema resolvido, porque a posição X onde ele tem de começar é = (largura da janela - largura da barra de menu)/2

Thanks pela ajuda!


Eu vou ver se descobre como meter isto no centro, essa função que destes ajudou. Mas como estou com uma resolução 1400 * 900 é dificel meter isto bem no centro.

Mas vou tentar

Fica bem, até amanhã!

[The Lavigne]

Encontrei esta função, num fórum diziam que alinha, mas não alinha ou eu estou a fazer mal.
A função é:

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}

[Kayvlim]

Não, se reparares, essa função só te dá as variáveis do query. Ou seja, trocando por miúdos, dá-te cada par variável-valor do $_GET por Javascript
Não faz nada que tenha a ver com alinhar.

[The Lavigne]

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

[The Lavigne]

Depois de muito pensar, conclui que está "técnica" nunca irá dar certo, pois a função move to não funciona em todas as resoluções, logo para algumas resoluções até pode ficar ao centro mas para outras não ficará.

Ou seja.. voltei ao ponto Zero


Help plz

[The Lavigne]

Foi esquecido?
Ou o que pretendo é impossível?