1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

#Tentar# Alinhar menu javascript ao centro!

Discussão em 'Web Development' iniciada por The Lavigne, 3 de Julho de 2008. (Respostas: 17; Visualizações: 3823)

  1. The Lavigne

    The Lavigne Banido

    Boa Noite.
    Estava a tentar implementar este drop menu em javscript no meu site: http://www.dynamicdrive.com/dynamicindex1/jsdomenu/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!
     
    Última edição: 4 de Julho de 2008
  2. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

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

    The Lavigne Banido

    Resultou? Tentei tudo e não consegui.

    Tas a falar para meter margin auto em que ficheiro?
     
  4. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    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.
     
  5. The Lavigne

    The Lavigne Banido

    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:(
     
  6. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    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) :)
     
  7. The Lavigne

    The Lavigne Banido

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

    Kayvlim Undefined Moderator
    Staff Member

    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.
     
  9. The Lavigne

    The Lavigne Banido

    Ok fazes bem, eu daqui a pouco também :P

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

    cumps
     
  10. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    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á.
     
  11. The Lavigne

    The Lavigne Banido

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

    Kayvlim Undefined Moderator
    Staff Member

    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 ;)
     
  13. The Lavigne

    The Lavigne Banido


    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ã!
     
  14. The Lavigne

    The Lavigne Banido

    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];
        }
      } 
    }
    
     
  15. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    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.
     
  16. The Lavigne

    The Lavigne Banido

    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
     
  17. The Lavigne

    The Lavigne Banido

    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 :)
     
  18. The Lavigne

    The Lavigne Banido

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

Partilhar esta Página