Problemas Com Position + Select + Iframe

Lamenza · Janeiro 15, 2007

Tenho uma página que congrega várias outras dentro de iframes. Num desses iframes, tenho um combo box. O problema ocorre quando aciono o combo e ele é exibido por traz de um iframe, não sendo possível ler suas opções. Já tentei atribuir, na página onde é construído o combo, uma propriedade "z-index", mas não ocorre mudança. Existe alguma maneira de posicionar esse elemento com uma hierarquia superior ao seu parent?

Lamenza · Janeiro 16, 2007

Caro Help,

Obrigado pelo... help! Mas não é esse o meu problema!

Como eu não postei nenhum exemplo, vamos lá! Talvez assim eu me faça entender direito!

Página pai

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>
</head>

<body>
<iframe id="frame1" style="height:20px; width:100%" scrolling="no" src="iframe1.htm"></iframe>
<iframe id="frame1" style="height:120px; width:100%" scrolling="no" src="http://scriptbrasil.com.br/forum/index.php?showtopic=91996&hl=array"></iframe>
</body>

</html>

Página Filho


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>

    <style media="screen" type="text/css">
        body {margin-top:0; margin-left:0; margin-right:0}
        .select{font-family:arial;font-size:8pt;color:#000000;width:98%}
        table {border-collapse: collapse;margin-left: 0; margin-right: 0; margin-top: 0; width: 100%; height: 33px; border-collapse: collapse; background-color: #ABABAB; border: 0 none #111111}
        .list{position:absolute;font-family:arial;font-size:8pt;color:#000000;width:98%;z-index:1}
        #listHolder{position:absolute;border:0;width:90%;z-index:1}
        #Escondido0 {display: inline;  position: absolute;left: 0; top: -200; text-align: left}
        #Escondido1 {display: inline;  position: absolute;left: 0; top: -200; text-align: left}
    </style>

<script type="text/javascript" language="javascript">
var ArrayPesquisa = new Array([0,"leandro"], [1,"ligia"], [2,"lucas"]);
var teclapress;

            function ComboBuscaDados(campo,texto){
                CampoPesquisa = campo;
                teclapress = event.keyCode;
                //ArrayPesquisa = teste;
                 ComboCriacao(CampoPesquisa,ArrayPesquisa);
                }

            //Função criadora do combo, chamada por ComboBuscaDados()
            //Esta função cria um combobox associado ao [obj], com as opções do array [aArrayPesquisa]
            function ComboCriacao(obj,aArrayOpcoes) {
                var selecionados = aArrayOpcoes.length;
                var k = teclapress;
                var T = BuscaPosY(obj); //top
                var L = BuscaPosX(obj); //left
                var list = document.getElementById('listHolder');
                if(!list) {
                    var list = document.createElement('DIV');
                    list.id = 'listHolder';
                    document.body.appendChild(list);
                    }
                list.style.width = (document.body.offsetWidth-10);
                list.style.top=(T+obj.offsetHeight);
                list.style.left=L;
                list.style.display='none';

                var txt=obj.value;

                if (txt) {
                    var str='<select style="z-index:600" class="list"'+
                            'onclick="ComboDevolveValor(\''+'CampoA'+'\',this.options[this.selectedIndex].value,\''+obj.id+'\',this.options[this.selectedIndex].text);"'+
                            'onkeyup="if(event.keyCode==13){ComboDevolveValor(\''+'CampoA'+'\',this.options[this.selectedIndex].value,\''+obj.id+'\',this.options[this.selectedIndex].text);};if(event.keyCode==27){'+
                            'document.getElementById(\'listHolder\').style.display=\'none\';'+
                            'document.getElementById(\''+obj.id+'\').focus()};" id="selector" size="6">'
                    var match=true

                    for(a=0;a<aArrayOpcoes.length;a++){
                        //str+=('<option value="'+aArrayOpcoes[a][0].replace(/\'/gi,'’')+'">'+aArrayOpcoes[a][1]+'</option>');
                        //Linha com erro
                        }
                
                    str+='</select>'
                    if(match){
                        list.innerHTML=str
                        list.style.display='block'
                        var sel=document.getElementById('selector')

                        // Seta abaixo
                        if(k=='40') {
                           sel.focus()
                            }
                        // Enter
                        if(k=='13'){
                           document.getElementById('listHolder').style.display='none'
                            }
                        }
                    }
                }

            function ComboDevolveValor(obj,val,obj1,val1){
                var obj=document.getElementById(obj);
                var obj1=document.getElementById(obj1);
                //var tabelapesquisa = document.getElementById("TelaPesquisa");
                obj.value=val;
                obj.focus();
                obj1.value = val1;
                document.getElementById('listHolder').style.display='none';
                //tabelapesquisa.style.display = "none";
                //JanelaMenuInt1.FormMenu.valor_link.value=val;
                PesquisaComResultados(val);
                }

            //Chamada pela função criadora do combo, serve para identificar o campo de ancoragem e fixar sua posição X
            function BuscaPosX(obj){
                var curleft=0;
                if(obj.offsetParent) {
                
                    while(obj.offsetParent){
                        curleft+=obj.offsetLeft
                        obj=obj.offsetParent;
                        }
                    } 
                else if(obj.x)
                    curleft+=obj.x;
                    return curleft;
                }

            //Chamada pela função criadora do combo, serve para identificar o campo de ancoragem e fixar sua posição Y
            function BuscaPosY(obj){
                var curtop=0;
                if(obj.offsetParent){
                    while(obj.offsetParent){
                        curtop+=obj.offsetTop
                        obj=obj.offsetParent;
                        }
                    } 
                else if(obj.y)
                    curtop+=obj.y;
                    return curtop;
                }

    </script>


</head>

<body>
        <div id="Escondido1">
        <input id="CampoA" name="CampoA" type="text" value="" />
        <input id="CampoB" name="CampoB" type="text" value="" />
        </div>
<input type="text" id="listapessoas" name="listapessoas" value="" onkeyup="ComboBuscaDados(this,this.value);" size="20" style="font-family: arial; font-size: 9pt; width: 100%"/>
</body>

</html>

Na página filho há um erro que não interfere no que eu estou perguntando. Nessa página há um campo de texto que, com o evento onkeyup chama uma função

ComboBuscaDados(this,this.value);"

. Esta função simula um campo do tipo select que vai tendo suas opções preenchidas à medida em que encontra equivalência com o conteúdo de um array.

Um campo select criado diretamente na página seria exibido corretamente. Este select criado pela função, por sua vez, fica oculto pelo outro iframe. É essa a minha dúvida: como fazer para que esse campo select seja exibido corretamente.

Quanto ao erro que mencionei, as linhas estão desabilitadas com "//". Não é um problema, pois quiz adaptar meu problemar num exemplo mais simples e não deu de todo certo. Na prática, eu coleto dados de um banco de dados.

Espero que tenha sido claro agora.

Obrigado,

Lamenza

Lamenza · Janeiro 18, 2007

Caros,

O select a que me refiro, é criado por uma função. Ele não é um elemento da página. É um select do tipo auto-completar, que vai tendo suas opções preenchidas conforme o texto digitado pelo usuário Ele é criado dentro de uma div. Mesmo assim, fica por traz de um iframe localizado logo abaixo dele. Já alterei as propriedades CSS position e z-index, mas não dá certo. Já me referi as mesmas propriedades, na função criadora, com a propriedade parent, tentando dar-lhe uma hierarquia inferior. Também não dá certo! Se alguém tiver um pouco de paciência, copie e cole o código das páginas e veja o que ocorre. Desconsidere o erro que mecionei acima, pois ele não interfere no que pretendo demonstrar como sendo a solução que busco.

Grato,

Lamenza

Entrar

Problemas Com Position + Select + Iframe

Pergunta

Lamenza

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Lamenza

Link para o comentário

Compartilhar em outros sites

Lamenza

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades