Jump to content
Fórum Script Brasil
  • 0

Problema com jQuery no IE

Victor Hugo Marques

Asked by Victor Hugo Marques,

 Share

Question

Victor Hugo Marques

Victor Hugo Marques

Posted
Posted

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 to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Victor Hugo Marques

Victor Hugo Marques

Posted
  • Author
Posted (edited)

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

Edited by Victor Hugo Marques
Link to comment
Share on other sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Posted
Posted

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 to comment
Share on other sites
  • 0
Victor Hugo Marques

Victor Hugo Marques

Posted
  • Author
Posted (edited)

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 ?

Edited by Victor Hugo Marques
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...