Jump to content

Search the Community

Showing results for tags 'scroll'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 25 results

  1. Robson Tenorio Henriques

    Scroll de Imagens

    Olá pessoal, estou com um projeto onde no mesmo existe 11 categorias e vários modelos para cada categoria, as categorias e modelos são apresentadas por meio de imagens em miniaturas (OBS: as imagens são dispostas em duas colunas), onde ao clicar numa categoria abre os modelos existentes, esta parte esta funcionando perfeitamente, porém o que necessito fazer é limitar a exibição das categorias e modelo para uma área de no máximo 1000px, que seria umas 6 ou 7 imagens aproximadamente e adicionar botões de navegação para passar entre os itens.. Abaixo segue o código da página: <div id="menu" class="pecasmain"> <input type="hidden" id="idlinha" name="idlinha" value="0"> <input type="hidden" id="idmodelo" name="idmodelo" value="0"> <div id="menuLinhas" class="menuLinhas"> <h3>LINHAS</h3> <a id="linha1" idreg="225" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000225_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras Pendulares</span> </a> <a id="linha2" idreg="62" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000062_01_gd.jpg" /> <span class="linknaoselecionado">Mini Pá Carregadeira e Mini Retro Escavadeira</span> </a> <a id="linha3" idreg="63" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000063_01_gd.jpg" /> <span class="linknaoselecionado">Manejo de solo e trituração de poda: </span> </a> <a id="linha4" idreg="61" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000061_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras mono disco</span> </a> <a id="linha5" idreg="242" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000242_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora de terreiro</span> </a> <a id="linha6" idreg="246" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000246_01_gd.jpg" /> <span class="linknaoselecionado">Enlerador e soprador</span> </a> <a id="linha7" idreg="59" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000059_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras de 2 discos</span> </a> <a id="linha8" idreg="10419" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000010419_01_gd.jpg" /> <span class="linknaoselecionado">Adubadora cafeeira e citrus</span> </a> <a id="linha9" idreg="65" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000065_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora e abonadora de chão</span> </a> <a id="linha10" idreg="9039" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000009039_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span> </a> <a id="linha11" idreg="16321" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000016321_01_gd.jpg" /> <span class="linknaoselecionado">Braço de retro agrícola</span> </a> </div> <div id="menuModelos0" class="menuModelos"> <h3>MODELOS</h3> <span>Selecione uma LINHA no menu à esquerda.</span> </div> <div id="menuModelos225" class="menuModelos" style="display: none;"> <h3>Adubadoras Pendulares</h3> <a href="#" id="modelo1" idreg="69" class="linkmodelo"> <img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000069_01_gd.jpg" /> <span class="linknaoselecionado"> PS 203</span></a> <a href="#" id="modelo2" idreg="232" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000232_01_gd.jpg" /> <span class="linknaoselecionado"> PS / PSPP 303</span></a> <a href="#" id="modelo3" idreg="235" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000235_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 403</span></a> <a href="#" id="modelo4" idreg="236" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000236_01_gd.jpg" /> <span class="linknaoselecionado">PS 503</span></a> <a href="#" id="modelo5" idreg="237" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000237_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 603</span></a> <a href="#" id="modelo6" idreg="233" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000233_01_gd.jpg" /> <span class="linknaoselecionado">PS 753</span></a> <a href="#" id="modelo7" idreg="234" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000234_01_gd.jpg" /> <span class="linknaoselecionado">PS 953</span></a> <a href="#" id="modelo8" idreg="238" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000238_01_gd.jpg" /> <span class="linknaoselecionado">PS 1153</span></a> <a href="#" id="modelo9" idreg="239" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000239_01_gd.jpg" /> <span class="linknaoselecionado">PS 1353</span></a> <a href="#" id="modelo10" idreg="240" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000240_01_gd.jpg" /> <span class="linknaoselecionado">PS 1553T</span></a> <a href="#" id="modelo11" idreg="16808" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016808_01_gd.jpg" /> <span class="linknaoselecionado">Pendulum</span></a> </div> <div id="menuModelos62" class="menuModelos" style="display: none;"> <h3>Mini Pá Carregadeira e Mini Retro Escavadeira</h3> <a href="#" id="modelo1" idreg="88" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000088_01_gd.jpg" /> <span class="linknaoselecionado">PX 04 Mini Pá carregadeira</span></a> <a href="#" id="modelo2" idreg="89" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000089_01_gd.jpg" /> <span class="linknaoselecionado">RX 04 Mini Retro escavadeira</span></a> </div> <div id="menuModelos63" class="menuModelos" style="display: none;"> <h3>Manejo de solo e trituração de poda: </h3> <a href="#" id="modelo1" idreg="86" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000086_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90</span></a> <a href="#" id="modelo2" idreg="87" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000087_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90E</span></a> <a href="#" id="modelo3" idreg="251" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000251_01_gd.jpg" /> <span class="linknaoselecionado">TRV 100 </span></a> <a href="#" id="modelo4" idreg="252" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000252_01_gd.jpg" /> <span class="linknaoselecionado">TRV 120</span></a> <a href="#" id="modelo5" idreg="16615" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016615_01_gd.jpg" /> <span class="linknaoselecionado">TRL 120</span></a> <a href="#" id="modelo6" idreg="258" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000258_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140</span></a> <a href="#" id="modelo7" idreg="259" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000259_01_gd.jpg" /> <span class="linknaoselecionado">TRL 160</span></a> <a href="#" id="modelo8" idreg="260" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000260_01_gd.jpg" /> <span class="linknaoselecionado">TRL 180</span></a> <a href="#" id="modelo9" idreg="261" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000261_01_gd.jpg" /> <span class="linknaoselecionado">TRL 200</span></a> <a href="#" id="modelo10" idreg="262" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000262_01_gd.jpg" /> <span class="linknaoselecionado">TRL 220</span></a> <a href="#" id="modelo11" idreg="254" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000254_01_gd.jpg" /> <span class="linknaoselecionado">TRP 120</span></a> <a href="#" id="modelo12" idreg="255" class="linkmodelo"><img id="img12" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000255_01_gd.jpg" /> <span class="linknaoselecionado">TRP 160H</span></a> <a href="#" id="modelo13" idreg="253" class="linkmodelo"><img id="img13" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000253_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 180 </span></a> <a href="#" id="modelo14" idreg="15868" class="linkmodelo"><img id="img14" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000015868_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 140</span></a> <a href="#" id="modelo15" idreg="257" class="linkmodelo"><img id="img15" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000257_01_gd.jpg" /> <span class="linknaoselecionado">TRS 360</span></a> <a href="#" id="modelo16" idreg="256" class="linkmodelo"><img id="img16" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000256_01_gd.jpg" /> <span class="linknaoselecionado">TRC 220</span></a> <a href="#" id="modelo17" idreg="10327" class="linkmodelo"><img id="img17" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010327_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 1,50</span></a> <a href="#" id="modelo18" idreg="2947" class="linkmodelo"><img id="img18" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000002947_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140 RS</span></a> </div> <div id="menuModelos61" class="menuModelos" style="display: none;"> <h3>Adubadoras mono disco</h3> <a href="#" id="modelo1" idreg="85" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000085_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600</span></a> <a href="#" id="modelo2" idreg="81" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000081_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600 INOX</span></a> </div> <div id="menuModelos242" class="menuModelos" style="display: none;"> <h3>Recolhedora de terreiro</h3> <a href="#" id="modelo1" idreg="243" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000243_01_gd.jpg" /> <span class="linknaoselecionado">VRC 1600</span></a> <a href="#" id="modelo2" idreg="10245" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010245_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidraulico 2.6 Para Terreiro de Café</span></a> <a href="#" id="modelo3" idreg="10421" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010421_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café</span></a> <a href="#" id="modelo4" idreg="13270" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013270_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 2.6 Para Terreiro de Café Com Pistão Hid</span></a> <a href="#" id="modelo5" idreg="13693" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013693_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café Com Pistão Hid</span></a> </div> <div id="menuModelos246" class="menuModelos" style="display: none;"> <h3>Enlerador e soprador</h3> <a href="#" id="modelo1" idreg="13885" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013885_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Simples Geração 2C </span></a> <a href="#" id="modelo2" idreg="14055" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014055_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Duplo Geração 2C</span></a> <a href="#" id="modelo3" idreg="14491" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014491_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Duplo G2 Caixa Dupla</span></a> <a href="#" id="modelo4" idreg="14351" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014351_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Simples G2 Caixa Dupla </span></a> <a href="#" id="modelo5" idreg="247" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000247_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner café/ RTF Dual</span></a> <a href="#" id="modelo6" idreg="248" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000248_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner maçã / citrus</span></a> <a href="#" id="modelo7" idreg="9042" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009042_01_gd.jpg" /> <span class="linknaoselecionado">Soprador</span></a> </div> <div id="menuModelos59" class="menuModelos" style="display: none;"> <h3>Adubadoras de 2 discos</h3> <a href="#" id="modelo1" idreg="74" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000074_01_gd.jpg" /> <span class="linknaoselecionado">TDS 750</span></a> <a href="#" id="modelo2" idreg="75" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000075_01_gd.jpg" /> <span class="linknaoselecionado">TDS 950</span></a> <a href="#" id="modelo3" idreg="76" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000076_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1150</span></a> <a href="#" id="modelo4" idreg="73" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000073_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1350</span></a> <a href="#" id="modelo5" idreg="72" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000072_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1550</span></a> <a href="#" id="modelo6" idreg="71" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000071_01_gd.jpg" /> <span class="linknaoselecionado">Vibraflow II</span></a> </div> <div id="menuModelos10419" class="menuModelos" style="display: none;"> <h3>Adubadora cafeeira e citrus</h3> <a href="#" id="modelo1" idreg="10420" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010420_01_gd.jpg" /> <span class="linknaoselecionado">MX 2100</span></a> </div> <div id="menuModelos65" class="menuModelos" style="display: none;"> <h3>Recolhedora e abonadora de chão</h3> <a href="#" id="modelo1" idreg="9343" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009343_01_gd.jpg" /> <span class="linknaoselecionado">Catacafé </span></a> </div> <div id="menuModelos9039" class="menuModelos" style="display: none;"> <h3>Podadora</h3> <a href="#" id="modelo1" idreg="9040" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009040_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span></a> </div> <div id="menuModelos16321" class="menuModelos" style="display: none;"> <h3>Braço de retro agrícola</h3> <a href="#" id="modelo1" idreg="16322" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016322_01_gd.jpg" /> <span class="linknaoselecionado">BRM BRAÇO MÓVEL </span></a> <a href="#" id="modelo2" idreg="16423" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016423_01_gd.jpg" /> <span class="linknaoselecionado">BRF BRAÇO FIXO </span></a> </div> <div id="pecasHome" class="pecasConteudo"> <img src="../img/pecas.jpg" /> <img src="../img/diversas-pecas.jpg" /> <div id="desconto"> <p class="desconto"> Desconto de 3% para compras efetuadas em nosso site. </p> </div> </div> <div id="pecasConteudo" class="pecasConteudo" style="display: none;"></div> <br style="clear: both;"/> <iframe id="frameprocessa" name="frameprocessa" style="width: 0px; height: 0px; visibility: hidden; "></iframe> <!--<script src="../js/jquery-3.4.1.min.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script language="Javascript"> $(document).ready(function() { $(".linklinha").click(function(e) { $("#menuLinhas > a > span").removeClass ( 'linkselecionado' ); $("#menuLinhas > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); var idreg = parseInt($(this).attr("idreg")); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idreg).show(); //console.log("idreg= " + idreg); $("#menuModelos"+idreg+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idreg+" > a > span").addClass ( 'linknaoselecionado' ); // Ajusta Foco $("#menuModelos"+idreg+" #modelo1").focus(); $("#pecasConteudo").hide(); $("#pecasHome").show(); // Seta Deselecionada Modelo $("#idlinha").val(idreg); $("#idmodelo").val(0); }); $(".linkmodelo").click(function(e) { var idlinha = parseInt($("#idlinha").val()); $("#menuModelos"+idlinha+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idlinha+" > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); $("#pecasHome").hide(); //alert('Vai carregar DETALHES do MODELO IDREG: ' + $(this).attr("idreg")); $("#pecasConteudo").load( "carrega_pecas_detalhe.html?id="+ $(this).attr("idreg"), function( response, status, xhr ) { if ( status == "error" ) { console.log("#error" + xhr.status + " " + xhr.statusText ); } }); $("#pecasConteudo").show(); }); function initPage() { console.log('Carregou Linhas OK !'); var idlinha = parseInt($("#idlinha").val()); var idmodelo = parseInt($("#idmodelo").val()); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idlinha).show(); } initPage(); }); </script> Se alguém puder me ajudar, pois esse pequeno detalhe ta me tomando um grande tempo e atrasando o projeto.
  2. adrianomonteiroweb

    Scroll

    Galera, é possível realizar o efeito scroll suave até uma div após algum tempo determinado que a página carregar?
  3. lordgreen

    Scroll em modo horizontal

    Olá, andei procurando e não encontrei exatamente o que preciso então, talvez alguém possa me ajudar. Eu quero colocar um site em modo horizontal e não consigo pensar em como fazer isto. Deixe-me explicar melhor, tenho uma imagem com altura de 960px e largura de 5000px, ponho ela como background da página e fica a barra em baixo e não em cima, gostaria de saber como mover essa barra para o lado com a roda do mouse (no ato do scrolling). Deve ser uma coisa bem simples, porém realmente não consigo fazer e não encontro exatamente o que procuro na internet, só encontro como colocar menu na horizontal, enfim. Obrigado a todos.
  4. Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. Gostaria de saber algum código de JavaScript ou CSS para solucionar isso Esse é o código : <button id="explorer"><a href="#about">Explorar</a></button>
  5. Olá, Preciso manter esse layout, porém gostaria que a barra de rolagem ficasse na página e não na div como está agora. Qualquer alteração é bem vinda, inclusive com Jquery. <body> <div id="background"></div> <div id="menu"></div> <div id="content"> <div id="inner"> <div id="section"> <h3>Passagem padrão original de Lorem Ipsum, usada desde o século XVI.</h3> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <h3>Seção 1.10.32 de "de Finibus Bonorum et Malorum", escrita por Cícero em 45 AC</h3> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> <h3>Tradução para o inglês por H. Rackha, feita em 1914</h3> <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p> <h3>Seção 1.10.33 de "de Finibus Bonorum et Malorum", escrita por Cícero em 45 AC</h3> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p> <h3>Tradução para o inglês por H. Rackha, feita em 1914</h3> <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p> </div> </div> </div> </body> <style> body{ margin: 0; } #background{ position: fixed; filter: grayscale(0.8) contrast(100%); width: 100%; height: 100%; background: url(back.jpg) center center; background-size: cover; z-index: -9999; } #menu { height: 60px; background: rgba(47, 47, 47, 0.29); position: fixed; width: 100%; } #content{ width: 100%; height: 100%; padding-top: 120px; padding-left: 300px; box-sizing: border-box; } #inner{ background: rgba(255, 255, 255, 0.74); padding: 60px 0 12px 65px; box-sizing: border-box; height: 100%; font-family: calibri; color: #204267; } #section{ background: #fff; padding: 20px 50px; overflow-x: hidden; height: 100%; box-sizing: border-box; } </style>
  6. BryanSamuel

    Rolar scroll do mouse na horizontal

    Como faz para que, quando o mouse estiver em cima do bloco, o scroll rode na horizontal?
  7. Olá à todos!!! Em um listView, carrego o conteúdo do banco de dados (O bd esta em uma thread em backgroud e carrega em tempo satisfatório), como o conteúdo é grande, leva um tempo para o componente ser preenchido. Como fazer para preencher apenas a parte visível na tela e ir preenchendo na medida que role o scroll? Flw!!!
  8. Estou utilizando o plugin ScrollMe, do Nick Pearson. Até ai tudo bem, as animações estão funcionando perfeitamente. Mas, preciso que o efeito inverso não aconteça ao voltar para o topo do site. Alguma ideia de como posso desativar isto? Ou algum outro plugin em jQuery para utilizar.
  9. Queria configurar os botoes de subir e descer para dar scroll na pagina. Atualmente só consegui dar um scroll em uma determina parte da pagina, gostaria de configurar para ir clicando e a pagina rolando para baixo ou para cima. Aqui está o codigo exemplo, se clicar no texto, o popup abre com os tres botoes, o botao "fechar" ja consegui configurar. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } html, body { background: silver; color: #fff; overflow: hidden; touch-action: none; -ms-touch-action: none; } canvas { touch-action-delay: none; touch-action: none; -ms-touch-action: none; } .container_black{ background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; z-index: 9999; top: 0; left: 0; display:none } .container_popup{ background: #fff; width: 90%; height: 90%; overflow: auto; position: fixed; top: 5%; left: 5%; color: #666; padding: 10px; box-sizing: border-box; font-family: Tahoma, Geneva, sans-serif; border: 3px solid #666; box-shadow: -3px 3px 4px 1px rgba(0, 0, 0, 0.33); } .container_popup h1 {margin: 10px 0;} .container_popup p { margin: 10px 0; } .fechar_popup{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 20px; cursor: pointer; position: fixed; right: 5%; top: 5%; } .descer{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 30px; cursor: pointer; position: fixed; right: 5.5%; top: 86.5%; } .subir{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 30px; cursor: pointer; position: fixed; right: 5.5%; top: 77%; </style> </head> <body> <div class="container_black"> <div class="container_popup"> <div id="lista"> <h1>Política de Privacidade</h1> <p>Esses tipos de serviços permitem a interação com as redes sociais ou outras plataformas externas diretamente a partir das páginas deste serviço (este aplicativo). A interação e as informações obtidas por este aplicativo estão sempre sujeitas às configurações de privacidade do usuário em cada rede social. Se um serviço que permite a interação com as redes sociais estiver instalado poderá coletar dados de tráfego para as páginas, onde o serviço esteja instalado, mesmo quando os usuários não estiverem usando os mesmos.</p> <h4>O botão Curtir e widgets sociais do Facebook (Facebook, Inc.)</h4> <p>O botão Curtir do Facebook e widgets sociais são serviços que permitem a interação com a rede social Facebook fornecido pela Facebook, Inc.</p> <p>Dados pessoais coletados: cookie e dados de uso. Local de processamento: EUA – Política de Privacidade.</p> <h3>Contatar o usuário</h3> <h4>Lista de endereçamento ou boletim informativo (este aplicativo)</h4> <p>Ao registar-se na lista de endereçamento ou no boletim informativo, o endereço de e-mail do usuário será adicionado à lista de contatos daqueles que podem receber mensagens de e-mail que contenham informações de natureza comercial ou promocional sobre este Aplicativo. O seu endereço de e-mail também poderá ser adicionado a esta lista, como resultado de sua inscrição neste serviço (este aplicativo).</p> <h2>Informações adicionais sobre a coleta e processamento de dados</h2> <h3>Ação jurídica</h3> <p>Os dados pessoais dos usuários podem ser utilizados para fins jurídicos pelo controlador de dados em juízo ou nas etapas conducentes à possível ação jurídica decorrente de uso indevido deste serviço (este aplicativo) ou dos serviços relacionados.</p> <p>O usuário declara estar ciente de que o controlador dos dados poderá ser obrigado a revelar os dados pessoais mediante solicitação das autoridades governamentais.</p> <h3>Informações adicionais sobre os dados pessoais do usuário</h3> <p>Além das informações contidas nesta política de privacidade, este aplicativo poderá fornecer ao usuário informações adicionais e contextuais sobre os serviços específicos ou a coleta e processamento de dados pessoais mediante solicitação.</p> <h3>Logs do sistema e manutenção</h3> <p>Para fins de operação e manutenção, este aplicativo e quaisquer serviços de terceiros poderão coletar arquivos que gravam a interação com este aplicativo (logs do sistema) ou usar, para este fim, outros dados Pessoais (tais como o endereço IP).</p> <h3>As informações não contidas nesta política</h3> <p>Mais detalhes sobre a coleta ou processamento de dados pessoais podem ser solicitados ao controlador de dados, a qualquer momento. Favor ver as informações de contato no início deste documento.</p> <h3>Os direitos dos usuários</h3> <p>Os usuários têm o direito de, a qualquer tempo, consultar o controlador de dados para saber se os seus dados pessoais foram armazenados e saber mais sobre o conteúdo e origem, verificar a sua exatidão ou para pedir que sejam complementados, cancelados, atualizados ou corrigidos, ou que sejam transformados em formato anônimo ou bloquear quaisquer dados mantidos em violação da lei, bem como se opor ao seu tratamento por quaisquer todas as razões legítimas. Os pedidos devem ser enviados para o controlador de dados usando a informação de contato fornecida anteriormente.</p> <p>Este aplicativo não suporta pedidos de &#8220;Não me rastreie&#8221;.</p> <p>Para determinar se qualquer um dos serviços de terceiros que utiliza honram solicitações de &#8220;Não me rastreie&#8221;, por favor leia as políticas de privacidade.</p> <h3>Mudanças nesta política de privacidade</h3> <p>O controlador de dados se reserva o direito de fazer alterações nesta política de privacidade a qualquer momento, mediante comunicação aos seus usuários nesta página. É altamente recomendável que esta página seja consultada várias vezes em relação à última modificação descrita na parte inferior. Se o Usuário não concorda com qualquer das alterações da política de privacidade, o usuário deve cessar o uso deste serviço (este aplicativo) e pode solicitar ao controlador de dados que apague os dados pessoais dele. Salvo disposição em contrário, a atual política de privacidade se aplica a todos os dados pessoais dos usuários que o controlador de dados tiver.</p> <h3>Definições e referências jurídicas</h3> <h3>Dados pessoais (ou dados)</h3> <p>Quaisquer informações relativas a uma pessoa física, pessoa jurídica, instituição ou associação, as quais sejam, ou possam ser identificadas, mesmo que indiretamente, por referência a quaisquer outras informações, incluindo um número de identificação pessoal.</p> <h3>Dados de uso</h3> <p>As informações coletadas automaticamente a partir deste serviço (ou serviços de terceiros contratados neste serviço (este aplicativo), que podem incluir: os endereços IP ou nomes de domínio dos computadores utilizados pelos usuários que utilizam este aplicativo, os endereços URI (Identificador Uniforme de Recurso), a data e hora do pedido, o método utilizado para submeter o pedido ao servidor, o tamanho do arquivo recebido em resposta, o código numérico que indica o status do servidor de resposta (resultado positivo, erro , etc.), o país de origem, as características do navegador e do sistema operacional utilizado pelo usuário, os vários detalhes de tempo por visita (por exemplo, o tempo gasto em cada página dentro do aplicativo) e os detalhes sobre o caminho seguido dentro da aplicação, com especial referência à sequência de páginas visitadas e outros parâmetros sobre o sistema operacional do dispositivo e/ou ambiente de TI do Usuário.</p> <h3>Usuário</h3> <p>A pessoa que usa este aplicativo que deverá coincidir com ou estar autorizada pelo titular dos dados a quem os dados pessoais se referem.</p> <h3>Titular dos dados</h3> <p>A pessoa jurídica ou física a quem os dados pessoais se referem.</p> <h3>Processador de dados (ou supervisor de dados)</h3> <p>A pessoa física, pessoa jurídica, a administração pública ou qualquer outro órgão, associação ou organização autorizada pelo controlador de dados para o processamento dos dados pessoais em conformidade com esta política de privacidade.</p> <h3>Controlador de dados (ou proprietário)</h3> <p>A pessoa física, pessoa jurídica, administração pública ou qualquer outra entidade, associação ou organização com direitos, também em conjunto com outro controlador dos dados, para tomar decisões sobre as finalidades e os métodos de processamento de dados pessoais e os meios utilizados, incluindo medidas de segurança relativas ao funcionamento e ao uso deste serviço. O controlador de dados, a menos que seja especificado de outra forma, é o proprietário deste serviço (este aplicativo).</p> <h3>Este aplicativo / Jogo</h3> <p>A ferramenta de hardware ou software pela qual os dados pessoais do usuário são coletados.</p> <h3>Cookie</h3> <p>Pequenas unidades de dados armazenados no dispositivo do usuário.</p> <h2>Informação jurídica</h2> <p>Aviso aos usuários europeus: esta declaração de privacidade foi elaborada em cumprimento das obrigações nos termos do art. n.10 da Diretiva 95/46/CE, e de acordo com as disposições da Diretiva 2002/58/CE, tal como revisto pela Diretiva 2009/136/CE, sobre o assunto de Cookies.</p> <p>Esta política de privacidade é apenas sobre este Aplicativo/Jogo.</p> <p><b>Última atualização:</b> 25 de Fevereiro de 2018</p> <p>&nbsp;</p> </div> <div class="fechar_popup">X</div> <div class="descer">⬇</div> <div class="subir">⬆</div> </div><!--container_popup--> </div><!--container_black--> <div id="fb-root"></div> <p>Clique para aparecer o poup</p> <p>Clique para aparecer o poup</p> <p>Clique para aparecer o poup</p></div> <script> $(document).ready(function(){ $("p").click(function(){ $(".container_black").fadeIn(); }); }); </script> <script> $(document).ready(function(){ $(".fechar_popup").click(function(){ $(".container_black").fadeOut(); }); }); </script> <script> $(document).ready(function(){ $(".descer").click(function(){ $(".container_popup").animate({ scrollTop: 1000 }, 1000); }); }); </script> <script> $(document).ready(function(){ $(".subir").click(function(){ $(".container_popup").animate({ scrollTop: 0 }, 500); }); }); </script> </body> </html>
  10. Alessandro Bodão

    usar funções de scroll com o overflow:hidden

    Bom dia rapaziada, estou fazendo um site com o scroll travado com overflow:hidden, e quero que alguns elementos apareçam e desapareçam em determinadas partes do site, mas o código js só funciona se o scroll estiver rolando. Queria que me ajudassem a funcionar mesmo o overflow:hidden.
  11. CHmg1991

    Mostrar Header

    Boa tarde! Como faço para meu header aparecer quando o scroll estiver parado e quando a pessoa rolar a página (para cima ou para baixo) o header ocultar até que o scroll pare novamente? Obrigado! (js vanilla)
  12. Meu site é scroll, estou com problemas pra deixar o texto adaptável ao width, o texto não está quebrando automático e está criando uma barra de rolagem no rodapé. O estilo do texto está na classe "Sobre" @charset UTF=8; *{ margin: 0; padding: 0; } body, html{ max-width: 100%; height: 100%; } #menu{ width: 100%; height: 102px; background-color: #000; color: #fff; position: fixed; display: flex; } #menu a{ display: block; color: #fff; text-decoration: none; padding: 48px; flex-grow: 1; font-family: Arial; } #menu a:hover{ padding: 48px; background: #fff; color: #000; } .logo{ display: block; } .content{ width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } p{ text-indent: 50px; text-align: center; } #home{ background-color: #000;} #sobre{ background-color: #fff; width: 100%;} .sobre{ text-align: center; padding: 30px; overflow: visible; }
  13. Boa noite. Estou desenvolvendo uma pequena rede social, e cheguei na parte do scroll infinito por PHP + MySQL + Ajax, a parte da programação, tudo certo, fiz a query corretamente, o PHP tranquilo, mas o meu problema é, quado bate próximo ao fim da página (scroll), eu deveria pegar a página do get e dar um append, tudo certo até aí, o problema entra quando ele dar 2, 3 get e append, e fica tudo bagunçado. Eu preciso que ele só permita dar outro get, depois que o primeiro for concluído, tentei usar a variável sinal, mas sem sucesso! Controller (CodeIgniter) public function usuario_pergunta($usuario = null, $last = null) { $data['uci'] = $this->m_acao->get( 'usuarios', array('id' => $usuario), true ); $data['perguntas'] = $this->m_usuarios->getTimeLine( $usuario, $last ); $this->load->view('site/usuarios/usuario_perguntas', $data); } Model (Query) public function getTimeLine($usuario = null, $last = null) { if($last) { $last = 'AND p.id < '.$last; } $query = $this->db->query(" SELECT p.id, p.pergunta, p.criacao, r.resposta, r.criacao as r_criacao, u.nome, u.username, u.oauth_uid, u.foto, u.id as uid FROM perguntas p LEFT JOIN usuarios u ON u.id = p.usuarios_id LEFT JOIN respostas r ON p.id = r.perguntas_id WHERE p.usuario_destino = ".$usuario." AND p.status > 1 ".$last." ORDER BY p.criacao DESC LIMIT 15"); //echo $this->db->last_query(); if($query->num_rows() > 0) { $result = $query->result(); return $result; } else return false; } js_scroll.php var win = $(window); var sinal = 1; win.scroll(function() { if ( $(document).height() - win.height() - 150 <= win.scrollTop()) { if(sinal == 1) { sinal = 0; $('.loading').fadeIn(500); //PERFIL DO USUÁRIO @USER if( $('.pergunta-user').length > 0 ) { var last = $('.item-perg').last().data('perg'); $.get('<?= base_url('usuarios/usuario_pergunta/'.$uci->id.'/') ?>' + last, function (dados) {$("#pergunta").append(dados);}); } $('.loading').fadeOut(500); sinal = 1; } } });
  14. Qual o nome da animação desse site: http://pt.wix.com/ Quando rolar a página para baixo a segunda página aparece por baixo.
  15. AlessandroPiaz

    Rolar scroll na horizontal

    Boa noite pessoal. Quero que meu site role o scroll na horizontal. Achava que com o overflow-y:hidden; ele ja rolava na horizontal mas pelo jeito não funciona. Sou meio leigo em javascript ainda.
  16. AlessandroPiaz

    Rolar scroll de uma vez

    E ai pessoal. Preciso da ajuda de vcs porque sou bem leigo em javascript. Meu site é one page e gostaria de criar um efeito para que da primeira pagina(topo do site) pra segunda. O scroll role direto de uma pra outra com uma so descrida no scroll do mouse. Mas n sei como posso fazer isso funcionar.
  17. AlessandroPiaz

    Evento com scroll

    Boa tarde pessoal. Meu site é onepage e quero criar um evento pra que a pagina role pra determinado lugar após o primeiro scroll executado. Para passar rolando direto da primeira pg pra segunda por exemplo. Já vi esse efeito em muitos websites, mas sou bem leigo em javascript ainda.
  18. quantic2016

    scroll infinito com ajax ! ajuda

    estou com esse script de scroll infinito, ele mostra para min os 10 primeiros artigos , ate aqui ok , porem como eu faço para ele mostrar mais 10 artigos depois dos 10 primeiros ??? <?php include "conexao.php";?> <!DOCTYPE html> <html lang="pt-br"> <head> <title>Sistema de busca igual facebook</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> <link rel="stylesheet" type="text/css" href="lib/css/default.css" /> <script src="lib/js/jquery.js" type="text/javascript"></script> <script src="js-all.js" type="text/javascript"></script> </head> <body> <h1>Infinite Scrolling, Demo 2</h1> <ul id="posts"> <li> <article> <header> <h1>This Is an Article</h1> </header> <?php include "load_first.php";?> </article> </li> </ul> <p id="loading"> <img src="images/loading.gif" alt="Loading…" /> </p> </body> </html> <script type = "text/javascript"> $(document).ready(function() { var win = $(window); // Each time the user scrolls win.scroll(function() { // End of the document reached? if ($(document).height() - win.height() == win.scrollTop()) { $('#loading').show(); $.ajax({ url: 'load_second.php?id=<?php echo $id; ?>', dataType: 'html', success: function(html) { $('#posts').append(html); $('#loading').hide(); } }); } }); }); </script> load_first.php <?php include "conexao.php"; $mostraDados = mysqli_query($conecta, "SELECT * FROM artigo ORDER BY data DESC LIMIT 10")or die (mysqli_error()); while($linha = mysqli_fetch_array($mostraDados)) { $id = $linha["id"]; $titulo = $linha["titulo"]; echo " <p class='tm' id=$id > $id $titulo </p>"; } ?> load_second.php <?php include "conexao.php"; $last_msg_id = $_GET ['id']; $mostraDados = mysqli_query($conecta, "SELECT * FROM artigo WHERE id < '$last_msg_id' ORDER BY id DESC LIMIT 5")or die (mysqli_error()); $last_msg_id = " "; while( $linha = mysqli_fetch_array($mostraDados)) { $id = $linha["id"]; $titulo = $linha["titulo"]; $endereco = $linha["endereco"]; $cep = $linha["cep"]; ?> <div id = "<?php echo $id; ?>" class = "message_box" > <?php echo $id; ?> <?php echo $titulo; ?> </div> <?php } ?>
  19. Olá galera, estou a mais um menos 3 dias pesquisando sobre isso e até agora não encontrei solução devido ao meu pouco conhecimento na area de programação em javascript, mas a minha dúvida é a seguinte: Coloquei um setInterval que faz a requisição da pagina para buscar se há novas mensagens e assim mostra-las em uma div, porém não consigo fazer com que, quando receber uma nova mensagem, a div role para baixo e exiba a nova mensagem. ja usei funções do tipo scrollTop: $('#chat').prop('scrollHeight')}, 500 mas não tive sucesso com a mesma, pois ela não rola de acordo com o que eu quero. Se alguém tiver uma luz, poste aqui. Desde já, obrigado
  20. 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
  21. Olá pessoal! Gostaria de uma ajuda de vocês já mestres! Eu tenho uma tabela com uma coluna e 4 linhas, em cada célula há uma pequena imagem. Essa tabela é fixa, ou seja, quando eu rolo o resto da página para baixo, ela se mantém fixa na tela. Porém, a 4ª imagem não aparece por completo na tela, pois a tabela ficou muito comprida. Eu pensei então em colocar uma barra de rolagem, que só funcionasse para essa tabela fixa. Procurei em alguns fóruns por casos semelhantes mas não consegui aplicar na minha aplicação. Será que alguém pode me ajudar? Desde já agradeço!
  22. Danilo Milan_54764

    Ultrapassando o 100% do browser

    Bom dia, estou montando um layout com 3 'seções': header, main e footer, porém, no header e no footer quero que fico 100% largura e no main quero que ultrapasse os 100%, criando a barra de rolagem horizontal somente nessa div. tentei colocar o width: auto; mesmo como o conteúdo dele sendo maior, quando chega em 100% o restante é jogado para baixo, quebrando a linha. colocando o tamanho da div main (está como display: table) como width: 2620px; (é o tamanho que preciso mais ou menos) deu certo, ultrapassou o limite, entretanto, criou a barra de rolagem na pagina inteiro e não somente nessa div. Tentei usar na div: overflow-x: scroll, sem sucesso também. .table{ display: table; overflow: scroll;} .row{ display: table-row;} .left{float: left;} .tile{ width: 122px; height: 122px; display: inline-block; margin: 2px; padding: 2px; float: left; } .table#movimento > .row > .tile:hover, .table#cadastro > .row > .tile:hover, .table#relatorio > .row > .tile:hover, .table#manutencao > .row > .tile:hover{ background-color: #ff8000; transition: 0.7s; } .table#movimento > .row > .tile{ background-color: #00bde3; } .table#cadastro > .row > .tile{ background-color: #e76221; } .table#relatorio > .row > .tile{ background-color: #6955a5; } .table#manutencao > .row > .tile{ background-color: #ddc100; } <div class="table"> <div id="movimento" class="table left"> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> </div> <div id="cadastro" class="table left"> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> </div> <div id="relatorio" class="table left"> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> </div> <div id="manutencao" class="table left"> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> <div class="row"> <div class="tile"></div> <div class="tile"></div> </div> </div> </div> </div> Obrigado desde a já
  23. diigaumrodrigo

    Problema scroll-x

    Bom dia galera. Estou tendo problema em deixar o scroll-x funcionando de forma responsiva. Quando redimensiono a janela ele "vaza" a div e em tela cheia funciona normalmente.
  24. kaiquemix

    Scroll rolagem em Imagem

    Gostaria de colocar um scroll unico apenas na imagem, fazendo com que o resto da pagina fique fixo e poder rolar só a imagem. Codigo: <div id="formContact"> <div id="barra-sty"> <div class="wrap"> <a href"javascript:;" onclick="fecharForm();"> <img src="images/close.png" style="float: right;margin-top: 12px;margin-right:10px;"/></a> <img src="images/logom.png"> </div></div> <div class="wrap"> <div id="img-proj"> <img src="images/img.png"> </div> <div id="text-proj"> <h1>CARTÃO DE VISITA</h1> <img src="images/linha.png" style="padding-top: 15px;padding-left: 13px;"> <div id="prop1"> <h2>Cliente:</h2> <h3><img src="images/proj-icon.png">Fulano de Tal</h3></br></br> <h2>Formato:</h2> <h3><img src="images/proj-icon.png">9x5cm</h3></br></br> <h2>Material:</h2> <h3><img src="images/proj-icon.png">Couchê 300g</h3> </div> <div id="prop2"> <h2>Acabamento:</h2> <h3><img src="images/proj-icon.png">Veniz licalizado</h3> <h3><img src="images/proj-icon.png">Canto Redondo</h3> <h3><img src="images/proj-icon.png">Laminação Fosca</h3> </div> </div> </div> #formContact{ background-color: white; position: fixed; width: 100%; height: 100%; top: 0%; opacity: 0; display: none; z-index: 9998; } #formContact img{ z-index: 9999; }
  25. Gleyson Abreu

    Esconder scroll

    bom quero sabe como escondo o scroll de um div mais que ele fique funcional como se estive-se invisível já tentei o overflow-y/x: hidden; mais como sabem ele só esconde e deixa não funcional, alguem sabe como faz para deixa funcional mais que a barra fique invisível?
×

Important Information

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