#Tentar# Alinhar menu javascript ao centro!

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.
 
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?

Código:
.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:(
 
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):

Código:
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_window_size_and_scrollbar_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 :P
Experimentei com sucesso no demo2.inc.js:
Na função createjsDOMenu(), troca o moveTo para isto:
Código:
moveTo((f_clientWidth() - 120)/2, 110);
120 é o width do menu. Se o modificares, modifica aí também.

Espero ter-me feito compreender :P

edit - se surgirem dúvidas, troca inteiramente o demo2.inc.js por isto:
Código:
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) :)
 
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 :lol:

Just kidding. Será que me podias ajudar com o demo3.inc.js ?
 
Era só pensares um pouco :P

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.
 
Era só pensares um pouco :P

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 :P

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

cumps
 
Não está a funcionar?

Código:
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á.
 
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 ;)
 
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 :P

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

Código:
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];
    }
  } 
}
 
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 :P
Não faz nada que tenha a ver com alinhar.
 
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

Código:
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
 
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 :)
 
Back
Topo