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

Javascript div height

Discussão em 'Web Development' iniciada por unsilent, 10 de Fevereiro de 2009. (Respostas: 6; Visualizações: 3901)

  1. unsilent

    unsilent Power Member

    Boas venho aqui apelar aos vossos conhecimentos de javascript:
    A minha ideia é ter uma div parcialmente visível-digamos inicial height=200px- e que com um click num link ela aumente de tamanho até que todo o o seu conteúdo seja visível.

    O script mais parecido com isto que encontrei é este do dynamic drive. O problema é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo a que pudesse definir a altura inicial (diferente de 0).
    Não percebo muito de javascript(consigo seguir o código e perceber, vagamente, o que ele faz).
    Este script em particular acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde todo o conteudo enquanto a div colapsa.

    Não sei se me estou a explicar bem.

    Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente das dimensoões da div. Por exmplo este.

    Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
    cumps
     
  2. CrazyBomber

    CrazyBomber Power Member

    Ainda não experimentei fazer isso em especial, mas podes ver o Mootools.
    Acho que funciona bastante bem :)
     
  3. unsilent

    unsilent Power Member

    Obrigado pela resposta, encontrei um demo no mootools que, sim senhor, funciona bastante bem. Permite-me fazer 'toggle' entre dois valores diferentes e é fácil de personalizar.
    Agora o meu problema é que queria que ele me permitisse passar um valor em que o valor da altura não estivesse definido- para que a div se adapte automaticamente consoante o conteudo.

    Ou seja:

    Código:
    // We add the "invoke"-Method to Arrays
    Array.implement({
        
        invoke: function(fn, args){
            var result = [];
            
            for (var i = 0, l = this.length; i < l; i++){
                if(this[i] && this[i][fn])
                    result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
            }
            return result;
        }
        
    });
    
    
    window.addEvent('domready', function(){
        
        var els = $$('div.element');
        
        var myArray = [
            new Fx.Tween(els[0]),
            new Fx.Tween(els[1]),
            new Fx.Tween(els[2]),
            new Fx.Tween(els[3]),
        ];
        
        var i = false;
        
        $('link').addEvent('click', function(e){
            e.stop();
            
            i = !i;
           [COLOR=White] [/COLOR][COLOR=White]myArray.invoke('start', ['height', i ? [COLOR=DarkOrange]'120px'[/COLOR] : [COLOR=DarkOrange]'50px'[/COLOR]]);[/COLOR]
        });
    });
    Em vez de 50px queria que fosse auto, mas auto não é um argumento válido...:Sad_anim:

    Alguém?...

    ps : acham que tenho mais sorte se postar isto em Programação?
     
  4. p3dro

    p3dro Power Member


    Pelo que percebi queres ter 1 div que tem uma altura inicial e depois poder expandi-lo para abranger todo o tamanho do texto, vê se este exemplo te ajuda em alguma coisa:

    Código:
    <html>
    <head>
        <style type="text/css">
            div#auto_box{height: 200px; width: 300px; border: solid 1px #900; overflow: hidden;}
        </style>
    
        <script type="text/javascript">
            AutoBox = function(){
              var el=document.getElementById("auto_box");
              el.style.height=(el.style.height=="auto")?"200px":"auto";
            }
        </script>
    </head>
    <body>
      <div id="auto_box">
        Boas venho aqui apelar aos vossos conhecimentos de javascript:
        A minha ideia é ter uma div parcialmente visível-digamos inicial height=200px- e que com um click num link ela aumente de tamanho até que todo o o seu conteúdo seja visível.
        <br /><br />
        O script mais parecido com isto que encontrei é este do dynamic drive. O problema é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo a que pudesse definir a altura inicial (diferente de 0).
        Não percebo muito de javascript(consigo seguir o código e perceber, vagamente, o que ele faz).
        Este script em particular acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde todo o conteudo enquanto a div colapsa.
        <br /><br />
        Não sei se me estou a explicar bem.
        <br /><br />
        Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente das dimensoões da div. Por exmplo este.
        <br /><br />
        Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
        cumps 
      </div>
      <a href="javascript:void(0);" onclick="AutoBox();">Toggle ...</a>
    </body>
    </html>
    Basicamente recorres a CSS e Javascript, é um exemplo simples, não sei como se comportará se a página tiver múltiplos elementos e este div se sobrepor a algum...

    edit: Afinal parece que já tinhas encontrado uma solução :p
     
  5. unsilent

    unsilent Power Member

    Epááá és o maior:) É precisamente isso, obrigado.

    Tinha encontrado um parecido e estava a tentar adapta-lo, mas sinceramente percebo mesmo muito pouco disto.
    Já agora se não for pedir muito será que me podes dizer como definir um Timeout, para que a transição seja gradual?

    Tentei martelar isto lá para dentro:

    <script type="text/javascript">
    var t;
    AutoBox = function(){
    var el=document.getElementById("auto_box");
    el.style.height=(el.style.height=="auto")?"200px":"auto";
    t=setTimeout("AutoBox();",0);
    }
    </script>


    E o resultado foi a div comecar a comportar-se como este boneco:009:...

    edit: sim sei que o 0, de qualquer maneira, não seria uma boa opção...
     
    Última edição: 11 de Fevereiro de 2009
  6. p3dro

    p3dro Power Member

    Acho que o "problema" é que o conteúdo desse teu Div é variável, ou seja nunca vais saber qual vai ser o tamanho depois de expandido, uma possível solução seria usares 2 Divs "encadeados", o Div exterior tem uma altura inicial e esconde o que passar desse tamanho "overflow: hidden;", dentro desse Div fica então outro Div com o texto que pretenderes.

    Aquando do click, para expandir, mudas o style.height, para "auto", ao Div que tem o conteúdo, esse Div irá adaptar-se ao conteúdo e nessa altura podes obter o offsetHeight, e sabendo esse valor dás a animação ao Div exterior, para que vá aumentando, gradualmente, a altura, até chegar ao tamanho do Div do texto :wow: ... confuso, mas não consigo explicar melhor :007: Quando carregares a 2ª vez no link, os Div's "recolhem".


    Fica aqui um exemplo, não experimentei em todos os browsers, mas pelo menos o FF2 e FF3 deu bem, nem o código está optimizado, talvez o mais recomendado é usares mesmo uma biblioteca já própria para isto, já falaram no Mootools, tens também o JQuery que é muito bom.



    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style type="text/css">
        div#scroll_box{height: 200px;width: 400px;overflow: hidden;background-color: #FFFFBD;}
      </style>
    
      <script type="text/javascript">
        SliderBox = function() {
    
          var _o = {
            content: document.getElementById("content_box"),
            scroll: document.getElementById("scroll_box"),
            start_at: 0,
            end_at: 0,
            cur_pos: 0,
            timer: 1,
            interval: null
          }
    
          _o.start_at = _o.cur_pos = _o.scroll.offsetHeight;
    
          this.Animate = function() {
            if (_o.content.style.height == "auto") {
              _o.content.style.height = _o.start_at + 'px';
              _o.end_at = _o.start_at;
            }
            else {
              _o.content.style.height = "auto";
              _o.end_at = _o.content.offsetHeight;
            }
    
            _o.interval = setInterval(function(){_Slide();}, _o.timer);
          }
    
          var _Slide = function() {
            if (_o.cur_pos == _o.end_at) { clearInterval(_o.interval); }
            _o.cur_pos += (_o.cur_pos < _o.end_at) ? 1 : -1;
            _o.scroll.style.height = _o.cur_pos + 'px';
          }
        } //end SliderBox
    
        addEvent = function(obj, type, fn) {
          if (obj.addEventListener) { obj.addEventListener(type, fn, false);}
          else {
            if (obj.attachEvent) {
              obj["e" + type + fn] = fn;
              obj[type + fn] = function(){obj["e" + type + fn](window.event);}
              obj.attachEvent("on" + type, obj[type + fn]);
            }
          }
        }
    
        Init = function() {
          var s = new SliderBox();
          addEvent(document.getElementById("bt_toggle"), "click", function(){s.Animate();});
        }
    
        addEvent(window, "load", Init);
      </script>
    
    </head>
    <body>
      <div id="scroll_box">
        <div id="content_box">
          Boas venho aqui apelar aos vossos conhecimentos de javascript: A minha ideia é ter
          uma div parcialmente visível-digamos inicial height=200px- e que com um click num
          link ela aumente de tamanho até que todo o o seu conteúdo seja visível.
          <br /><br />
          O script mais parecido com isto que encontrei é este do dynamic drive. O problema
          é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo
          a que pudesse definir a altura inicial (diferente de 0). Não percebo muito de javascript(consigo
          seguir o código e perceber, vagamente, o que ele faz). Este script em particular
          acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde
          todo o conteudo enquanto a div colapsa.
          Não sei se me estou a explicar bem.
          <br /><br />
          Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente 
          das dimensoões da div. Por exmplo este.
          <br /><br />
          Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
          <br /><br />
          cumps      
        </div>
      </div>
      <a id="bt_toggle" href="javascript:void(0);">Toggle ...</a>
    </body>
    </html>

    Boa sorte
     
  7. unsilent

    unsilent Power Member

    Já me tinha deparado com esse problema-o facto de estar alternar entre um valor definido e outro dependente do conteúdo-, e estava a tentar utilizar o clientHeight( pelo que percebi é parecido com o offSetheight ?). Mas acabaste de me estragar uma tarde de trabalho:)
    Mais uma vez obrigado.
     

Partilhar esta Página