Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

halfar

CDNS google ou microsoft

Recommended Posts

no navegador do chrome, o site está tudo ok... mas no do microsoft tá meio bagunçado...

 

eu havia especificado a cdn do google, no navegador chrome está tudo ok...no da microsoft ficou meio bagunçado.

troquei a cdn para microsoft, no chrome está ok, no navegador IE melhorou um pouco, mas mesmo assim os objetos estão fora de lugar.

 

tive o cuidado de no script, nos objetos,  definir tanto as propriedades id e name em cada objeto...

 

alguma dica para contornar este problema no IE??

Compartilhar este post


Link para o post
Compartilhar em outros sites

não parece ter nada a ver com cdn isso ai.

você que escreveu o css? poste um link para vermos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

 

Bem, gastei algumas horas para realizar alguns testes.

Em anexo segue os arquivos menus.php e estilos.css para quem quiser ver.

 

Retirei do meu codigo o menu expansivel que fiz e criei um novo
arquivo chamado menus.php apenas para testar estes menus.

Na sua tela ele irá aparecer no meio da tela, isto porque no 
meu codigo de origem esta é a posição exata deles. Para mudar as posicoes, estilos demais, tem que alterar o css.

Como este menu estava dando problema no navegador IE, fiz vários testes com as CDNS.


No navegador chrome, utilizando a CDN mais recente:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Esta CDN não dá nenhum problema no chrome, a não ser um leve detalhe,
mas totalmente insignificante. É que quando voce carrega a pagina
que contem o menu, pode ocorrer do menu se expandir muito rapidamente e logo em seguida
fechar, mas isto é fração de segundos. Basta voce apertar o f5 várias vezes que voce
vai notar isto.

No navegador IE versão 8, nada funciona. Os menus já aparecem abertos, os cliques não funcionam, as caixas de texto ficam desordenadas.
Utilizei a ferramenta de depuracao do IE e aponta um problema na linha3, no arquivo jquery.min.js:
"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",R),a.addEventListener("load",R));

Já versão CDN anterior, ainda do google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Curiosamente, no navegador Chrome, o problema relatado na CDN anterior não ocorre. Pode pressionar
mil vezes o F5 para atualizar a página, o menu fica firme lá, não dá uma mínima leve
piscada de carregamento. Então, por ora, optei por trabalhar com esta versão do CDN.

No navegador IE apresenta mais erros ainda que a CDN anterior.


Utilizando a CDN disponível no site da Microsoft:
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js

No navegador Chrome, sem problemas, dá o mesmo pequeno problema relatado com a CDN do google, totalmente insignificante.
No navegador IE, cheio de erros.


Utilizando a CDNjs disponivel no site https://cdnjs.com/libraries/jquery/:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.map
Ambas as CDNJS acima, no navegador Chrome, não funciona, menus já aparecem expandidos, e nenhum clique funciona.

No navegador IE, cheio de erros.


Utilizando a CDN disponível no site https://www.jsdelivr.com/projects/jquery:
https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js

No chrome a mesma situação das cdns anteriores desta versão, apenas o pequeno problema da exibição rápida dos menus no carregamento das páginas.

NO IE, sem comentários.

E por fim, ainda a CDN do mesmo site acima:
https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.map

Esta no chrome, apresenta problemas, os menus já são exibidos expandidos e os cliques não funcionam.

No IE, mesmo sabendo que é pura perca de tempo, testei só por desencargo da consciência, obviamente, nada funciona.


Resumindo, melhor a CDN do google, porém a versão anterior:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

menus.php

estilos.css

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não importa de onde você pega a biblioteca, ela é a mesma de todos os lugares, o mesmo código.

O que você deve atentar é a versão dela. Veja:

 

http://jquery.com/browser-support/

 

Quanto a isso:

https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.map
esse .map não é o código da biblioteca, mas sim o map do minificado para debug. 

Qual versão do IE você quer dar suporte ? ie10 ? ie8 ?

Dependendo da versão do IE, você tem que escolher a versão do jQuery que suporta essa versão do IE.
 

Além disso, existem vários erros básicos no teu html.

-> você não deve duplicar IDs

-> o html está inválido
-> o doctype está no lugar errado

corrija essas coisas, enviando para um validador de html da w3c, e depois que você definir qual versão do ie tem que dar suporte, veja a versão do jQuery que atende.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

 

corrigi o doctype, e realmente  deu uma ajustada no navegador IE. No entanto ainda há problemas.

 

As duplicações de ids, fiz a correção.

 

A validação do W3c não apresentou erros na validação do arquivo css.

 

No arquivo html, ele fez uma referencia que a propriedade "name" não é valida.  Eu costumo sempre declarar as propriedades ID e NAME nos documentos, porque,  uns tempos atrás era ncessário especificar a propriedade name também por causa do javascript, pois o IE não reconhecia ID, somente name. Já outros navegadores reconheciam o ID. Então para não ter problemas era recomendado com o IE era especificado ambos.

 

Ainda referente a isto, o validador informou o seguinte:

Citar

Você usou o atributo acima mencionado no documento, mas o tipo de documento que você está usando não suporta esse atributo para esse elemento. Este erro é frequentemente causado pelo uso incorreto do tipo de documento "Strict" com um documento que usa quadros (por exemplo, você deve usar o tipo de documento "Transitional"

 

Alterei pois o docType para <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Todavia suprimi a propriedade name do codigo, mas não apresentou melhorias.

 

Resumindo, o que realmente funcionou, foi onde havia colocado o doctype, coloquei no local correto, no topo da página, e no IE apresentou de forma ordenada. 

 

A única coisa que não está funcionando no IE é que os menus já abrem expansionados e os cliques não funcionam.

 

A versao do IE é 8.

Mas o usuário pode ter 8, 10  , como contornar isto também???

 

Valeu...

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nesse caso, utilize o jQuery 1.12, pois o 2 e o 3 não suportam IE8.

 

https://code.jquery.com/jquery-1.12.1.min.js

 

Quanto ao atributo name, ele só deve ser usado em controles de formulário (input, select, textarea). Nos outros elementos só use ID.

Compartilhar este post


Link para o post
Compartilhar em outros sites

opa, de fato, a versão anterior do jquery funcionou em ambos navegadores.

 

Citar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

não sei como se comporta no IE 10... voce tem o IE 10 ai?? tem como testar para mim??

 

seguem os arquivos corrigidos.

 

uma outra questão, tem como identificar o navegador que o usuário está utilizando, para inserir o link do jquery mais apropriado??

 

 

estilos.css

menus.html

Compartilhar este post


Link para o post
Compartilhar em outros sites

O jquery 1.12 tem compatibilidade com todos os ies, então vai funcionar para ie8, ie9, ie10..

o problema do jquery 2 e 3 é que foram abandonando os IEs mais antigos. Entendeu?

 

Se funciona no ie8, vai funcionar no ie10. O jQuery foi feito para fazer isso pra você.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dando minha contribuição contribuição:

Citar

não sei como se comporta no IE 10... voce tem o IE 10 ai?? tem como testar para mim??

 

Utilizando o Internet Explorer é possivel emular versões anteriores (se não me engano do 11+ é possível emular)

 

Outra opção é instalar uma VM, com um XPzão e instalar o I.E. a gosto se o suporte é realmente necessário.

 

Se o suporte a versões antigas estiver atrapalhando muito uma maneira bacana de argumentar é com dados (Google Analtiycs funciona bem nesse aspecto) , assim tenha uma noção real de % de usuários que estão utilizando o seu site/sistema e qual navegador/versão predomina.

 

Dependendo as vezes a parcela é tão pequena que o suporte fica inviável.

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.