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

fixar scroll bar após submit

Discussão em 'Web Development' iniciada por zoidberg, 6 de Março de 2009. (Respostas: 8; Visualizações: 2185)

  1. zoidberg

    zoidberg Folding Member

    Boas,


    Ando aqui a tentar fixar a posição da scroll bar após o submit e não encontro nada no google que me ajude :(

    Basicamente tenho um select de tamanho 20 e que tem cerca de 80 options.

    PHP:


    <select name='pa_lista' onclick='this.form.submit();' size='20' readonly STYLE='width: 197px'>

    $lista_pa_option
    </select>


    precisava de saber como fixar a posição da barra de scroll depois de fazer o submit

    Alguém faz ideia?
     
  2. geoblast

    geoblast Power Member

    Experimenta uma função de javascript que passe o overflow do html ou do body para hidden, aquando da submissão do form.
     
  3. zoidberg

    zoidberg Folding Member

    não percebi o que queres dizer ... eu tenho outras divs na pagina com overflow, essas não me importo que mudem para cima quando a pagina faz refresh
     
  4. geoblast

    geoblast Power Member

    Então não percebi bem o que pretendes. Queres um um div específico fique sem scroll e fixo numa determinada posição após o submit do form??

    Com um submit normal não vais lá, porque ele vai forçar o reload da página. Podes, criar uma função que receba um parâmetro e que no load da página posicione o div onde quiseres.

    A outra solução é usares ajax. No submit do form, nada altera e podes posicionar o teu div como quiseres.

    Mas agradecia que explicasses melhor o que pretendes, pois parece-me que não estou a compreender....
     
  5. zoidberg

    zoidberg Folding Member

    boas,

    A scroll bar que eu quero que se mantenha no sitio é a do <select>, não tem nada a ver com Divs

    podes ver aqui um exemplo de um select com scroll :)
     
  6. geoblast

    geoblast Power Member

    Experimenta o seguinte:

    No submit recolhes o index da primeira opção seleccionada. Passas esse índice como parâmetro no reload, carregando o select com a opção selected no indíce em causa.

    Não testei, por isso não vi se irá resultar...
     
  7. zoidberg

    zoidberg Folding Member

    hmm é uma boa ideia mas não estou a ver como fazer :S
     
  8. geoblast

    geoblast Power Member

    Olá,

    Aqui tens um exemplo de como o fazer (este exemplo vai de borla e por conta do Euromilhões que vou ganhar daqui a pouco!!!)

    Aqui submeti no «self», basta seguires a filosofia no teu script de processamento dos dados.

    PHP:
    <?php

        $indexPos 
    $_POST['droppos'];
        
        if(
    $indexPos == null || $indexPos == ''){
            
    $indexPos 0;
        }
    ?>
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
        function $(obj){
            return document.getElementById(obj);    
        }
        
        function submitForm(){
            $('droppos').value = $('multicombo').selectedIndex;
            $('dropform').submit();
        }
        
        function loadDrop(indexPos){
            $('multicombo').selectedIndex = indexPos;
        }
    </script>
    </head>

    <body onload="loadDrop(<?php echo $indexPos;?>);">

    <form id="dropform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <input type="hidden" name="droppos" id="droppos" />
        <select multiple="multiple" size="5" id="multicombo" onchange="">
            <option id="a">a</option>
            <option id="b">b</option>
            <option id="c">c</option>
            <option id="d">d</option>
            <option id="e">e</option>
            <option id="f">f</option>
            <option id="g">g</option>
            <option id="h">h</option>
            <option id="i">i</option>
            <option id="j">j</option>
        </select>
        <input type="button" value="Teste" onclick="submitForm()"></button>
    </form>
    </body>
    </html>

     
  9. zoidberg

    zoidberg Folding Member

    hmm não tem o funcionamento que preciso, mas acabei por me desenrascar de outra forma :D já agora deixo aqui o código para quem necessite saber ( usei cookies ) e funciona para fixar a barra de scroll tanto para divs como para selects:




    No código da div ou do select, colocar:

    <div id='pa_ing_ing_div' onscroll='SetDivPosition(this.id)' >
    <select id='pa_ing_ing_div' onscroll='SetDivPosition(this.id)' >


    na página index.php
    PHP:

    <?php
    //definir quais são os selects e / ou divs que vão ser fixados

        
    $div[0]='select_exemplo'//exemplo select
        
    $div[1]='pa_ing_ing_div_exemplo'// exemplo div
    ?>



    <script type="text/javascript">
          window.onload = function LoadDivPosition(){
            var strCook = document.cookie;
            <?php 
            
    foreach($div as $sc_div)
            echo 
    "
            var name = \""
    .$sc_div."\";
            var size = name.length+1;
            if(strCook.indexOf(name)!=\"-1\"){
                var intS = strCook.indexOf(name+\"=\");
                var intE = strCook.indexOf(\"!\"+name);
              var strPos = strCook.substring(intS+size,intE);
              document.getElementById(name).scrollTop = strPos;
             }
            "
    ;
            
    ?>
          }


          function SetDivPosition(name){
            var intY = document.getElementById(name).scrollTop;
            document.cookie = name+"=" + intY + "!"+name;
          }
        </script>













     

Partilhar esta Página