Ir para conteúdo
Fórum Script Brasil
  • 0

Problema com jQuery no IE

Victor Hugo Marques

Perguntado por Victor Hugo Marques,

 Share

Pergunta

Victor Hugo Marques

Victor Hugo Marques

Postado
Postado

Eu criei uma div, que contém 3 mapas do google maps que são a localização de 3 franquias de uma empresa em lugares diferentes.

Eu fiz a exibição e a alternação dos mapas com jQuery, no Firefox funciona exepcionalmente mais no IE a div nem aparece. segue o codigo abaixo:

<script type="text/javascript">
               $(document).ready(function(){
      
                 $('#conteudo').hide();
   
                  $('a#exibir').click(function(){
                    $('#conteudo').show('slow');
                      });
   
                  $('a#ocultar').click(function(){
                       $('#conteudo').hide('slow');
                  })
   
            });
            
               $(document).ready(function(){
      
                 $('#main_map').show();
                $('#tk_text').css("color", "white");
                
                  $('a#tk_link').click(function(){
                    $('#tk_text').css("color", "white");
                    $('#eb_text').css({ color: "#695050" });
                    $('#sg_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#eb_map').hide('slow');
                    $('#sg_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#main_map').show('slow');
                      });                
   
                  $('a#eb_link').click(function(){
                    $('#eb_text').css("color", "white");
                    $('#tk_text').css({ color: "#695050" });
                    $('#sg_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#main_map').hide('slow');
                    $('#sg_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#eb_map').show('slow');
                      });
                
                  $('a#sg_link').click(function(){
                    $('#sg_text').css("color", "white");
                    $('#tk_text').css({ color: "#695050" });
                    $('#eb_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#eb_map').hide('slow');
                    $('#main_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#sg_map').show('slow');
                      });
                
                  $('a#sesi_link').click(function(){
                    $('#sesi_text').css("color", "white");
                    $('#sg_text').css({ color: "#695050" });
                    $('#eb_text').css({ color: "#695050" });
                    $('#tk_text').css({ color: "#695050" });
                    $('#sg_map').hide('slow');
                    $('#eb_map').hide('slow');
                    $('#main_map').hide('slow');
                    $('#sesi_map').show('slow');
                      });
   
            });
        </script>

se alguém souber ajudar muito obrigado !

até mais

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
Victor Hugo Marques

Victor Hugo Marques

Postado
  • Autor
Postado (editado)

Cara segue o codigo da pagina toda, desculpa pela extenção do codigo

<!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>
        <title>Toko Tattoo | Studio Professional de Tatuagem</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="robots" content="index,follow,noodp,noydir" />
        <meta name="Descripton" content="Studio Professional de Tatuagem">
        <meta name="Keywords" content="Toko Tattoo,Toko,Toko Tatuagem,Toko Tatuagens,studio professional de tatuagem,studio de         tatuagem,tatuagens,tatuagem,tatuador,tattoo,tatuagem toko,tatuagem no peito,tatuagem na perna,tatuagem no braço,tatuagem nas costas">
        <link rel="shortcut icon" href="file:///C|/Users/Victor Hugo/Documents/Sites/Toko Tattoo/icon/favico.ico" />
        <link rel="icon" type="image/gif" href="file:///C|/Users/Victor Hugo/Documents/Sites/Toko Tattoo/img/skull_icon.gif" />
        
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript">
               $(document).ready(function(){
      
                 $('#conteudo').hide();
   
                  $('a#exibir').click(function(){
                    $('#conteudo').show('slow');
                      });
   
                  $('a#ocultar').click(function(){
                       $('#conteudo').hide('slow');
                  })
   
            });
            
               $(document).ready(function(){
      
                 $('#main_map').show();
                $('#tk_text').css("color", "white");
                
                  $('a#tk_link').click(function(){
                    $('#tk_text').css("color", "white");
                    $('#eb_text').css({ color: "#695050" });
                    $('#sg_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#eb_map').hide('slow');
                    $('#sg_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#main_map').show('slow');
                      });                
   
                  $('a#eb_link').click(function(){
                    $('#eb_text').css("color", "white");
                    $('#tk_text').css({ color: "#695050" });
                    $('#sg_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#main_map').hide('slow');
                    $('#sg_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#eb_map').show('slow');
                      });
                
                  $('a#sg_link').click(function(){
                    $('#sg_text').css("color", "white");
                    $('#tk_text').css({ color: "#695050" });
                    $('#eb_text').css({ color: "#695050" });
                    $('#sesi_text').css({ color: "#695050" });
                    $('#eb_map').hide('slow');
                    $('#main_map').hide('slow');
                    $('#sesi_map').hide('slow');
                    $('#sg_map').show('slow');
                      });
                
                  $('a#sesi_link').click(function(){
                    $('#sesi_text').css("color", "white");
                    $('#sg_text').css({ color: "#695050" });
                    $('#eb_text').css({ color: "#695050" });
                    $('#tk_text').css({ color: "#695050" });
                    $('#sg_map').hide('slow');
                    $('#eb_map').hide('slow');
                    $('#main_map').hide('slow');
                    $('#sesi_map').show('slow');
                      });
   
            });
        </script>
        
        <style type="text/css">
        
            body {
                background-color: #280b0d;
                min-height: 100%;
            }
            
            a, a:link, a:visited, a:active {
                text-decoration: none;
                color: #FFFFFF;
            }
            
            p {
                text-align: center;
                color: #695050;
                font-family: Tahoma, Geneva, sans-serif;
                font-size: 14px;
            }
            
            ul {
                position: relative;
                font-family: Tahoma, Geneva, sans-serif;
                color: #695050;
                right: 30px;    
            }
            
            ul:hover {
                color: #FFFFFF;    
            }
            
            li {
                position: relative;
                left: 30px;
                color: #e4ae2b;
            }
        
            #studio_animation {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                position: absolute;
                padding: 0;
                margin: 0;
                z-index:: -1;
            }
            
            #block_sensitive{
                width: 175px;
                height: 75px;
                top: 70%;
                left: 50px;
                position: absolute;
            }
            
            #conteudo {
                position: absolute;
                top: 35%;
                left: 280px;
                width: 525px;
                height: 350px;
                border-style: dotted;
                border-width: 1px;
                background-color: #280b0d;
            }
            
            #conteudo_title{
                widht:  525px;
                height: 35px;
                text-align: left;
                border-width: 1px;
                border-style: solid;
                border-color: #e4ae2b;
                border-top-width:   0;
                border-right-width: 0;
                border-left-width:  0;
                background-color: #280b0d;
            }
            
            #ocultar{
                padding-right: 2%;
                float: right;
                font-family: "Comic Sans MS", cursive;
                color: #695050;
                font-size: 28px;
            }
            
            #ocultar:hover{
                color: #FFFFFF;
            }
            
            #main_map{
                width: 300px;
                height: 305px;
                float: left;
                position: relative;
                top:  5px;
                border-style: solid;
                border-width: 1px;
                border-color: #695050;
                border-top-width:   0;
                border-left-width: 0;
                border-bottom-width:  0;
                display: block;
            }
            
            #eb_map {
                width: 300px;
                height: 305px;
                float: left;
                position: relative;
                top:  5px;
                border-style: solid;
                border-width: 1px;
                border-color: #695050;
                border-top-width:   0;
                border-left-width: 0;
                border-bottom-width:  0;
                display: none;
            }
            
            #sg_map {
                width: 300px;
                height: 305px;
                float: left;
                position: relative;
                top:  5px;
                border-style: solid;
                border-width: 1px;
                border-color: #695050;
                border-top-width:   0;
                border-left-width: 0;
                border-bottom-width:  0;
                display: none;
            }
            
            #sesi_map {
                width: 300px;
                height: 305px;
                float: left;
                position: relative;
                top:  5px;
                border-style: solid;
                border-width: 1px;
                border-color: #695050;
                border-top-width:   0;
                border-left-width: 0;
                border-bottom-width:  0;
                display: none;
            }
            
            #near_places{
                width: 215px;
                height: 225px;
                float: right;
                position: relative;    
            }
            
            #adreess{
                float: right;
                top: 6%;
                position: relative;
                width: 220px;
                height: 65px;
                border-style: solid;
                border-width: 1px;
                border-color: #695050;
                border-right-width:   0;                
                border-left-width:    0;
                border-bottom-width:  0;
            }
        
        </style>
    </head>
    <body>
        <div id="studio_animation">
            <object type="application/x-shockwave-flash" data="../../img/flash/studio_animation.swf" width="100%" height="660px">
                <param name="movie" value="../../img/flash/studio_animation.swf"  />
                <param name="quality" value="high" />
                <param name="wmode" value="transparent" />
                <embed src="../../img/flash/studio_animation.swf" width="100%" height="660px" quality="high" wmode="transparent">
                </embed>
              </object>
            <a id="exibir" href="#">
                 <div id="block_sensitive"></div>
            </a>
            <div id="conteudo">
                <div id="conteudo_title">
                    <font style="float: left; padding-top: 2%;" face="Lucida Sans Unicode, Lucida Grande, sans-serif" size="4" color="#e4ae2b">Localidade - Lugares Próximos</font>
                    <a id="ocultar" href="#">X</a>
                </div>
                <div id="main_map">
<iframe width="300" height="305" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=d&amp;source=s_d&amp;saddr=-16.005997,+-48.059983&amp;daddr=&amp;hl=pt-BR&amp;geocode=&amp;sll=-16.005772,-48.060052&amp;sspn=0.001382,0.002642&amp;mra=prev&amp;ie=UTF8&amp;ll=-16.005997,-48.059983&amp;spn=0.006295,0.006549&amp;t=m&amp;output=embed"></iframe>                </div>
                <div id="eb_map">
<iframe width="300" height="305" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=d&amp;source=s_d&amp;saddr=Est%C3%A1dio+Bezerr%C3%A3o,+Bras%C3%ADlia+-+Distrito+Federal&amp;daddr=-16.005997,+-48.059983&amp;hl=pt-BR&amp;geocode=FV-tC_8dNaUi_SHNwfGZRLVPxg%3BFZPEC_8dsaki_Q&amp;aq=0&amp;o que=Estadio&amp;sll=-16.007375,-48.060405&amp;sspn=0.011055,0.021136&amp;mra=prev&amp;ie=UTF8&amp;ll=-16.007371,-48.0604&amp;spn=0.00744,0.00359&amp;t=m&amp;output=embed"></iframe>
                </div>
                <div id="sg_map">
<iframe width="300" height="305" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=d&amp;source=s_d&amp;saddr=Gama,+Bras%C3%ADlia+-+DF+(Shopping+do+Gama)&amp;daddr=-16.0098638,-48.0625842+to:-16.005997,+-48.059983&amp;hl=pt-BR&amp;geocode=FReoC_8d0Z4i_SFOoQgdLV0wFw%3BFXm1C_8diJ8i_SlRHuBkoCpakzFcouhdHloYUA%3BFZPEC_8dsaki_Q&amp;aq=1&amp;o que=Shoppin&amp;sll=-16.010093,-48.0629&amp;sspn=0.005528,0.010568&amp;mra=dpe&amp;mrsp=1&amp;sz=17&amp;via=1&amp;ie=UTF8&amp;ll=-16.012032,-48.062589&amp;spn=0.005528,0.010568&amp;t=m&amp;output=embed"></iframe>
                </div>
                <div id="sesi_map">
<iframe width="300" height="305" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=d&amp;source=s_d&amp;saddr=SESI,+Gama,+Distrito+Federal&amp;daddr=-16.005997,+-48.059983&amp;hl=pt-BR&amp;geocode=FYqsC_8dvpci_SE0IPWB9rg0qA%3BFZPEC_8dsaki_Q&amp;aq=0&amp;o que=SESI&amp;sll=-16.009392,-48.057418&amp;sspn=0.022111,0.042272&amp;mra=ls&amp;ie=UTF8&amp;ll=-16.009645,-48.0629&amp;spn=0.00713,0.00582&amp;t=m&amp;output=embed"></iframe>
                </div>
                <div id="near_places">
                    <li>
                        <a id="tk_link" href="#"><ul id="tk_text">Toko Tatto</ul></a>
                    </li>
                    <li>
                        <a id ="eb_link" href="#"><ul id="eb_text">Estadio Bezerrão</ul></a>
                    </li>
                    <li>
                        <a id="sg_link" href="#"><ul id="sg_text">Gama Shopping</ul></a>
                    </li>
                    <li>
                        <a id="sesi_link" href="#"><ul id="sesi_text">SESI do Gama</ul></a>
                    </li>
                </div>
                <div id="adreess">
                    <p>Quadra 02 - Conjunto l -<br /> Prédio 421 - Setor Norte Gama DF</p>
                </div>
            </div>
       </div>
   </body>
</html>

Volto a citar o erro, quando a pagina abre no IE, aparecer a div oculta por um instante até a pagina se totalmente carregada, após ela ser carregada quando eu clico no link para ativar a div, nada acontece somente no bendito IE

já no firefox funciona tudo perfeitamente

Editado por Victor Hugo Marques
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Quando à div ficar visível até a página ser carregada, isso se deve ao fato de que o código responsável por torná-la invisível só é executado no evento onload. Uma possibilidade é deixar a div invisível via CSS.

Em relação à div conteudo não aparecer, testei nas versões 6 a 9 do IE (jQuery 1.3.2, mesma versão de seu código) e a div sempre aparecia em resposta ao clique no elemento exibir.

Um problema que tive ao testar ao código foi quanto ao elemento exibir não aparecer na página (tanto no IE quanto no FF). Para fins de teste, adicionei uma mensagem à div block_sensitive (interna ao elemento exibir) de forma que fosse possível localizá-la.

Assim sendo, acho que talvez tenha entendido errado. O problema é quanto à div conteudo não aparecer (em resposta ao clique na outra div) ou quanto ao elemento exibir não aparecer?

Link para o comentário
Compartilhar em outros sites
  • 0
Victor Hugo Marques

Victor Hugo Marques

Postado
  • Autor
Postado (editado)

Jonathan, eu consegui !

Oque ocorria é o seguinte, a div 'block_sensitive' que tem o elemento exibir ela foi posicionada em uma posição, porém no FF ela fica em uma posição e no IE fica em outra, eles não ficam no mesmo lugar, então eu n estava clicando na block_sensitive por isso n aparecia,

tem algum jeito de posicionar da mesma forma tanto para o IE quanto para o FF ?

Editado por Victor Hugo Marques
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...