Jump to content

M.S.S

Members
  • Content count

    20
  • Joined

  • Last visited

Community Reputation

0 Comum

About M.S.S

Informações Pessoais

  • Sexo
    Masculino
  1. O problema é que a tela treme com o "TOP:100%" na hora que a Viewport se ajusta, não há uma transição suave. O mesmo acontece se você usar um javascript para forçar uma DIV a ter 100% de height via variável que passa o valor em pixel. Acho que o problema em parte é a meta tag. <meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1"> Detalhe, que a mesma página não treme se eu não usar o "TOP:100%" ou Script para forçar o height em uma DIV para esconder o conteúdo.
  2. Um detalhe importante, o problema não aparece no navegador padrão do Android e no Opera Coast. No safari ele é muito sutil, pois sua Viewport não tem um redimensionamento grande. Já no Chrome e no Firefox o problema é mais evidente. Dispositivos em que eu fiz testes: Ipad Air 9.7″ com IOS 9 Iphone 4 com IOS 7 Tablet Samsung Galaxy Tab4 10.1″ com android 4.4
  3. Eu tentei fazer isso. Criei uma DIV que recebia o height via uma variável em javascript. Chegue a colocar animações de CSS via javascript para suavizar o redimensionamento da Viewport por causa da barra de endereço. Mas não consegui resolver o problema. Segue o meu código: Javascript: <script type="text/javascript"> function DivAltura(id) { var stage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("blocoLivre").style.height = stage+"px"; document.getElementById("blocoLivre").style.WebkitTransition = "all 0.2s"; // Code for Safari 3.1 to 6.0 document.getElementById("blocoLivre").style.transition = "all 0.2s"; } </script> HTML: <body onLoad="DivAltura('blocoLivre')" onresize="DivAltura('blocoLivre')"> <div id="blocoLivre"></div> // Conteúdo do site
  4. M.S.S

    Detecta Mobile

    Boa tarde, Alguém conhece um script em PHP ou JAVASCRIPT que redirecione dispositivos mobile que usam o navegador em modo clássico do Android KitKat e o Windows Phone? Se alguém conhecer. Obrigado! M.S.S
  5. Boa tarde, Eu estou com dor de cabeça com a altura da viewport de dispositivos mobile e já tentei todo tipo de hack do bem para evitar que o conteúdo trema na rolagem. O problema não ocorre em PC nos navegadores IE, Firefox, Chrome, Edge, Safari e Opera nem no MAC nos navegadores Chrome, Safari e Firefox. Mas como quase todos os navegadores mobile têm um redimensionamento automático com a rolagem da página você acaba tendo problema com recursos como o “top:100%” com “position:absolute” na rolagem do conteúdo (o navegador mais problemático é o Chrome de IOS). Isso ocorre também com background, mesmo com recurso o “background-cover: cover;” e o “background-size: cover;” configurados (detalhe que eu configurei os prefixos -webkit-, -moz-, -ms-, -o- e -vendor-). Segue a META que eu estou usando (acredito que o problema seja em parte por causa dela, mas preciso dela para que a resolução fique adequada para dispositivos mobile) Estou usando essa META no site em que estou desenvolvendo, pois quero que o usuário não de zoom no site (por causa do layout). <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1"> Mas testei a mesma META com "user-scalable=yes" e não adiantou. <meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1"> Segue meu código CSS: #texto_sombra { font-family:"Trebuchet MS", tahoma, verdana, arial; font-size:35px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.80); text-align:center; color:#FFFFFF; bottom: 80px; display: block; left: 50%; position: absolute; width: 400px; z-index:1 !important; } #container_pai { top:100%; width:80%; margin-left:10% !important; margin-right:10% !important; height:600px; background:#fff; position:absolute; padding:0px; display:block; z-index:20 !important; } #backgroup { background: url(http://wallpaper.ultradownloads.com.br/118363_Papel-de-Parede-Campo-Aberto--118363_1600x1200.jpg); background-position: center center; background-repeat: no-repeat; position:fixed; z-index:-1; display:block !important; width: 100%; height: 100%; min-width:100%; min-height:100% !important; right:0px; bottom:0px !important; margin: 0px; overflow:hidden; /*AJUSTE*/ -webkit-background-cover: cover; -vendor-background-cover: cover; -moz-background-cover: cover; -ms-background-cover: cover; -o-background-cover: cover; background-cover: cover; /*///////////////////////////////*/ -webkit-background-size: cover; -vendor-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; /*AJUSTE*/ } Segue meu código HTML: <div id="texto_sombra">Titulo da Página</div> <div id="container_pai"></div> <div id="backgroup"></div> Visão do código no jsfiddle: https://jsfiddle.net/mauriansoares/xy01xL7z/ Se alguém puder ajudar
  6. No navegador nativo do tablet com Android 4.4.2 você tem a opção de navegar na opção padrão e na versão "modo clássico" e é justamente no "modo clássico" que os detecta mobile não funcionam. Eles funcionam muito bem no navegador padrão do Android 4.4.2 e nos aplicativos Google Chrome, Opera Mini e Firefox de Android e IPad além do Safari que é da Apple, pelos testes que eu fiz. Abs
  7. Boa tarde! Eu estou com problema para encontrar um script em PHP ou JAVASCRIPT que redirecione um dispositivo mobile que usa o navegador em modo clássico do Android 4.4.2. Achei dois sites fantásticos com script de redirecionamento mobile (um com várias linguagens de programação e um em PHP), mas o problema é que eles são baseados no "userAgent" e não detectam dispositivos mobile que usam o modo clássico do navegador do Android. Segue links: Site 01: https://github.com/serbanghita/mobile-detect Site 02: http://detectmobilebrowsers.com/ Se alguém puder me ajudar com um script de redirecionamento em PHP ou JAVASCRIPT para dispositivos Androids antigos, eu ficarei muito agradecido. Obrigado ! M.S.S
  8. Boa tarde! Eu estou com problema para encontrar um script em PHP ou JAVASCRIPT que redirecione um dispositivo mobile que usa o navegador em modo clássico do Android 4.4.2. Achei dois sites fantásticos com script de redirecionamento mobile (um com várias linguagens de programação e um em PHP), mas o problema é que eles são baseados no "userAgent" e não detectam dispositivos mobile que usam o modo clássico do navegador do Android. Segue links: Site 01: https://github.com/serbanghita/mobile-detect Site 02: http://detectmobilebrowsers.com/ Se alguém puder me ajudar com um script de redirecionamento em PHP ou JAVASCRIPT para dispositivos Androids antigos, eu ficarei muito agradecido. Obrigado! M.S.S
  9. M.S.S

    Trocar nome de exibição (nome do usuário)

    Boa noite, tudo bem? Gostaria de mudar o meu nome de exibição para M.S.S, para que eu não seja achado pelo meu nome na busca orgânica do Google. Já alterei o meu nome para M.S.S no meu perfil, mas pelo que eu entendi a mudança só será efetivada para que meu nome não apareça no Google, se um administrador do site fizer a alteração. Grato
  10. M.S.S

    Trocar nome de exibição (nome do usuário)

    Boa tarde, gostaria de mudar meu nome para ocultar minha conta do Google (gostaria de mudar para M.S.S). Já alterei o meu nome no meu perfil cadastrado, mas não foi o suficiente. Grato
  11. M.S.S

    Variável

    Caso ajude, achei um link do modernizr funcionando no Blog da Kaytee..... mas não consegui progredir muito com a variável que usa o modernizr. http://codepen.io/anon/pen/hwdyt
  12. M.S.S

    Variável

    Pessoal, eu resolvi o problema de cima com condições para o Browser - o Scroll está detectando a posição atual e invertendo no click, mas a solução é paliativa. Se alguém puder me ajudar com a primeira opção que trabalha com o webkit + modernizr ..... <script type="text/javascript"> ​ function controle(id) { var ancora=document.getElementById(id); //Variável para o Edge, IE, Firefox var Altura = $(document).scrollTop(); //Navegadores webkit $.browser.chrome = $.browser.webkit && !! window.chrome; $.browser.safari = $.browser.webkit && !window.chrome; //Condições para mudar a variável no Chrome, Opera e Safari if ($.browser.chrome) { var Altura = $('body').scrollTop(); alert (Altura + "Chrome"); } if ($.browser.safari) { var Altura = $('body').scrollTop(); alert (Altura + "Safari"); } if ($.browser.opera) { var Altura = $('body').scrollTop(); alert (Altura + " Opera"); }; //Script do Scroll dinâmico if (Altura == 0){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#footer2"; //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else if (Altura <= 401){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#footer2"; ​ //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else if (Altura == 402){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#header2"; ​ //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else { //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#header2"; ​//Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } } </script> HTML: <a href="" class="scroll" id="troca" title="descer" onclick="controle('troca')"> <img src="img/down.jpg" alt="" /> </a> Valeu!
  13. M.S.S

    Variável

    Boa tarde, pessoal! Tudo bem? Pessoal, eu estou com problema com uma variável que usa o modernizr. var selector = Modernizr.testProp('webkitAppearance') ? 'body' : 'html'; $(selector).scrollTop(); Segue abaixo o que eu montei com a variável (o Scroll deveria detectar a posição e inverte). Se alguém conseguir mudar o script para que ele funcione vai ajudar muito.... Javascript: <!-- Modernizr.js --> <script src="animation/js/modernizr-2.6.2.min.js"></script> <script src="dist/modernizr-custom.js"></script> <!-- Modernizr.js --> ​ <script type="text/javascript"> function controle(id) { var ancora=document.getElementById(id); //Variável com o seletor Modernizr var selector = Modernizr.testProp('webkitAppearance') ? 'body' : 'html'; //Variável que captura o valor do Scroll var Altura = $(selector).scrollTop(); //Script do Scroll dinâmico if (Altura == 0){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#footer2"; //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else if (Altura <= 401){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#footer2"; ​ //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else if (Altura == 402){ //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#header2"; ​ //Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } else { //Muda atributo - troca o link para que o scroll fique dinâmico ancora.href = "#header2"; ​//Ativa o script de scroll que faz a rolagem suave ancora.class = "scroll"; } } </script> HTML: <a href="" class="scroll" id="troca" title="descer" onclick="controle('troca')"> <img src="img/down.jpg" alt="" /> </a> Link para o Blog que fala a respeito da rolagem com JQuery com scrollTop() http://kayteelynne.com/animated-scrolling-with-jquery/ Site do modernizr: https://modernizr.com/news Valeu! Se alguém puder ajudar..... Valeu!
  14. M.S.S

    Mudando imagens com um Clique - onClick

    RESOLVIDO function changeSrc(id) { var imagem=document.getElementById(id); if(imagem.alt == "Abrir"){ imagem.src = "imagens/open.gif"; imagem.alt = "Fechar"; } else { imagem.src = "imagens/folder.gif"; imagem.alt = "Abrir"; } } <a href="#" onclick="changeSrc('p-a1');"><img id="p-a1" alt="Abrir" src="imagens/folder.gif">Link</a> OU <img id="botao" alt="Abrir" src="botoes/off.jpg" onclick="changeSrc('botao')" width="107" height="98" />
  15. M.S.S

    [Resolvido] Problema com scroll to

    Resolvi! <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000); }); }); </script> <a href="#footer" class="scroll" style="color:#FFFFFF; font-family:tahoma, arial; font-size:16px;">Clique aqui para rolar</a>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.